Agenda :
- Aim of the project
- Project Structure
- Progress Rates
The aim of this project is for me to be able to create a dashboard like website that is able to help me track my finances ( Income & Expenditure from my bank statements ).
This interactive dashboard helps me to visulaise and analyse my finances very well !!
finance-tracker/ ├── node_modules/ # installed dependencies (auto-created) ├── public/ # static assets (images, icons, etc.) ├── src/ │ ├── app/ # all your routes/pages (App Router) │ │ ├── api/ # server API routes (e.g., /api/import) │ │ ├── upload/ # /upload page │ │ │ └── page.js │ │ ├── transactions/ # /transactions page │ │ │ └── page.js │ │ ├── dashboard/ # /dashboard page │ │ │ └── page.js │ │ └── page.js # home page (/) │ ├── components/ # shared React components (you’ll add later) │ └── lib/ # helpers (e.g., db.js for database connection) ├── migrations/ # SQL migration files (you’ll add) ├── scripts/ # utility scripts (e.g., migrate.js) ├── .env.local # your DATABASE_URL lives here (not committed to git) ├── .gitignore # tells git what to ignore ├── package.json # project dependencies & scripts ├── README.md # project documentation └── next.config.mjs # Next.js config file
First Commit :
- Created my supabase account
- Initalised the next.js project that i will be working on that includes the Javascript, APP router, '/src' folder as well.
- Added placeholder pages
Second Commit :
-
Fixed the routing for the pages (Note to self that when we want to use next.js APP FOLDER for routing we need to ensure that we put name of folder followed by the name of page.js as a file in the folder. The name of the folder can be something like login then add the page.js under the folder so that the routing will work !!)
-
Routing pages for [signup, login, dashboard, homepage, transactions, upload are all changed]
-
Created a standardised global layout.js (Always ensure that the app routing starts from the root page.js in that folder)
- Getting started ( CLONE THE REPO FROM GITHUB )
- Enter the folder names finance-tracker
- cd finance-tracker
- install all the necessary dependencies
- npm install
- npm run dev
- check if it is working on ur personal computer at localhost
- open up and browser and input http://localhost:3000/
- Try out the app and you should see that it is running