Financely - Personal Finance Tracker

The Financely WebApp project is a user-friendly web application built to simulate a tracking system. The aim of the web app is to help track income and expenses and manage budgets. The Tech stack used is Reactjs and Firebase

Table of Contents

• Instruction
• Frontend
  • Steps for Frontend with Clonned Repository
  • Steps for Building Frontend from Scratch
• Lessons
• React Note

Instruction

• To clone the repository, copy and paste the command below to your terminal

 git clone https://github.com/abiolaah/financely.git

• Follow the steps in this documentation to get started with firebase.

Frontend

The frontend is built using Reactjs and the dependencies are listed below:

• TailwindCSS: for design instead of basic CSS. Check out its documentation here.
• Shadcn UI: to get custom and easy to use components. Check out its documentation here.
• React-Router-Dom: to navigate between pages. Check out its documentation here.
• lucide-react: to get icons to represent. Check out its documentation here.
• ant-design: to get custom and easy to use components. Check out its documentation here.
• ant-design/charts: to get charts diagrams. Check out its documentation here.

Steps for Frontend with Clonned Repository

Below are steps to follow if using the cloned repository

1. After following the clonning instruction above.
2. Navigate to the root directory in your terminal.

   cd financely

3. Install dependencies

   npm install

4. Start the frontend development server with the command below

   npm run dev

5. Open your web browser and navigate to http://localhost:5173 to view the application.

Steps for Building Frontend from Scratch

Below are steps to follow if building from scratch

1. Navigate to the root directory of your project in terminal

cd <name-of-your-project>

2. Create a new React app using the Vite with the command below

npm create vite@latest

3. Give the project a name. I would recommend using frontend or client if the backend and frontend will be in the same main directory
4. Use the down arrow key to navigate to React and use Enter or Return to select it as your framework.
5. Use the down arrow key to navigate to Javascript and use Enter or Return to select it as your variant.
6. Run the command below to navigate to the frontend directory

cd <name-of-frontend-directory>

7. Run the command below to install necessary basic dependencies for react

npm install

8. Start the frontend development server with the command below

npm run dev

or

npm start

9. Open your web browser and navigate to http://localhost:5173 to view the application.

10. Use the command below to install the dependencies for this project. List of dependencies/package are above

npm install <package-name>

11. You can use the code in the repository to complete your code.

Lesson

• Learnt to create a financial tracker using Reactjs, Firebase, TailwindCSS, Shadcn UI and AntDesign.
• I learnt to use firestore for data storage and firebase authentication for sign in and sign up.

React Note

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh