Money Mapper

What is Money Mapper?

Money Mapper is a Next.js 13 fullstack finance tracker for organizing personal finances. Covers income, taxes, assets, debt, and net worth management. Utilizes next-auth for user authentication and stores user data in a MongoDB database with prisma ORM. The app uses shadcn-ui with tailwind css, providing a visually appealing and responsive user interface. Global client state is managed with zustand, ensuring efficient and streamlined data management across the app. Emphasizing user experience, the app offers both dark and light modes to suit individual preferences. To enhance data visualization, financial information is presented through interactive charts and comprehensive tables, allowing users to gain valuable insights at a glance.

The Dashboard page

The Money page

The Login page

How to Set Up the Project Locally

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/0mppula/money-mapper.git

Install packages

npm i

`.env` File Configuration

In the root of the project create an .env file and declare the following variables:

DATABASE_URL=
NEXTAUTH_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

Populate the variables with the corresponding data.

Setup Prisma

npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
`dev`	Starts a development instance of the app

Tech Stack

Framework

Front-end Framework: Next.js (v13.4.12)

UI

UI Library: shadcn-ui
UI Styling: tailwindcss (v3.3.3) with tailwindcss-animate (v1.0.6)
Theming: next-themes (v0.2.1)
Data Visualization: recharts (v2.7.2)
Icons: @radix-ui/react-icons (v1.3.0), react-icons (v4.10.1) & lucide-react (v0.263.1)
Date Picker: react-day-picker (v8.8.0)
Date Manipulation: date-fns (v2.30.0)
CSS Utility: clsx (v2.0.0)
Class Variance Management: class-variance-authority (v0.7.0)

State Managment

Global State Management: zustand (v4.4.0)
Data Fetching and Management: @tanstack/react-query (v4.32.6) and @tanstack/react-table (v8.9.3)
Form Handling: react-hook-form (v7.45.2) with @hookform/resolvers (v3.1.1)
State Validation: zod (v3.21.4)

Backend & Authentication

Prisma ORM: @prisma/client (v5.1.0) with prisma (v5.1.0) as a dev dependency
User Authentication: next-auth (v4.22.3)
API Requests: axios (v1.4.0)
TypeScript: (v5.1.6)
Type Definitions: @types/node (v20.4.5), @types/react (v18.2.18), @types/react-dom (v18.2.7)

0mppula / money-mapper Goto Github PK

money-mapper's Introduction