cligrenet / expense-tracker

PERN stack application (CS50 Introduction to Computer Science final project)

Expense Tracker

About

This is a full stack project using Express, PostgreSQL and React.

Prerequisites

Node.js, React.js

Dependencies

Authentication:

• bcryptjs
• jsonwebtoken

Backend framework related:

• express
• colors
• dotenv
• morgan

DB related:

• pg: First try, then move to Prisma
• Prisma
• Docker compose

Testing:

• Jest
• SuperTest: It extends another library SuperAgent, to provide a high-level abstraction for testing HTTP

Misc:

• concurrently
• nodemon

Frontend related:

• React Router V6: Routing for React
• axios
• react-icons
• tailwindcss
• framer-motion: Animation library for React
• Chart.js v3
• react-chartjs-2: Charts for React
• react-toastify: Snackbar notifications for React
• react-modal: Accessible modal dialog component for React
• React Select: A select control build with and for React

Installation

$ npm install

Running the server

# development (run this command on the project root, concurrently)
$ npm run dev

# backend
npm run server

# frontend
$ npm start

# check prisma studio (run on backend dir, on port 5555)
$ npx dotenv -e .env -- prisma studio

# API e2e test
$ npm run test
$ npm run test:watch
$ npm run test:e2e

Ports

• Backend: 127.0.0.1:8080

• Frontend: 127.0.0.1:3000

• Docker dompose holds two dbs: ⋅⋅* Dev DB runs on 5434 ⋅⋅* Test DB runs on 5435

Screen shots