Money Management App

This is a full-stack Money Management application designed to track income and expenses. Built with Next.js on the client-side and NestJS on the server-side, the app provides a seamless experience for managing personal finances.

Features

• Income & Expense Tracking: Add, edit, and delete financial transactions with details like amount, category, and date.
• Chart: Income and expenses graph per category.
• User Authentication: Secure login and user management.
• Responsive Design: Optimized for use on both desktop and mobile devices.

Technologies

• Frontend: Next.js (React, TypeScript)
• Backend: NestJS (TypeScript, Prisma)
• Database: MySQL
• State Management: React Context and Zustand
• Authentication: JWT, Cookies, etc.

📷 Screenshots

---

Running on Local

Prerequisites

• Node.js (v14.x or later)
• npm or yarn
• MySQL database
• Environment setup for both Next.js and NestJS projects

Clone the Repository

You have to clone the client-side and server-side one by one.

git clone https://github.com/alfathrajif/money-management-app-client.git

git clone https://github.com/alfathrajif/money-management-app-server.git

Set Up Environment Variables

Install Frontend Dependencies (Next.js)

1. Navigate to the client folder (assumed structure for Next.js project).
2. Create a .env.development.local file with the following variables:

NODE_ENV=development
NEXT_PUBLIC_API_URL=<NestJS_API_URL> 
NEXT_PUBLIC_AUTH_COOKIE_NAME=<JWT_SECRET>

Backend Setup (NestJS)

1. Go to the server folder (assumed structure for NestJS project).
2. Create a .env.development.local file with the following variables:

DATABASE_URL="mysql://<username>:<password>@<host>:<port>/<database>"
JWT_SECRET=<JWT_SECRET>
PORT=5000

Ensure to replace <username>, <password>, <host>, <port>, <database>, and <JWT_SECRET> with your actual MySQL credentials and JWT secret key.

Frontend

cd client # Make sure it's in the client folder

npm install
# or
yarn install

Backend

cd server # Make sure it's in the server folder

npm install
# or
yarn install

Set Up Database (Prisma)

Run Prisma migrations to create the database tables.

npm run prisma:migrate:dev

Optionally, seed the database if there’s a seed file

npm run prisma:seed:dev

Run the Application

Backend (NestJS)

In the server folder, start the backend server in development mode:

npm run start:dev
# or
yarn start:dev

Frontend (Next.js)

In the client folder, start the frontend app:

npm run dev
# or
yarn dev

Access the Application

• Frontend: Visit http://localhost:3000:
• Backend: Visit http://localhost:5000:

Additional Notes

• Ensure the database is running and accessible via the credentials in .env.development.local
• Both frontend and backend servers should be running concurrently for the application to work as expected.