Skip to content

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.

Notifications You must be signed in to change notification settings

0mppula/money-mapper

Repository files navigation

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

Money Mapper dashboad page

The Money page

Money Mapper money page

The Login page

Money Mapper 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)

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published