Skip to content

Latest commit

 

History

History
137 lines (92 loc) · 3.39 KB

README.md

File metadata and controls

137 lines (92 loc) · 3.39 KB

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

Main Page

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.