This is a fully responsive MERN stack app to track your daily expenses. It supports email and password based authentication. It's built with React, Node.js, Express, MongoDB, TypeScript, and Redux, to name a few.

• Overview
  • Screenshots
  • Links
  • Features
• My process
  • Built with
  • Useful resources
• Author

• Live Site URL: https://money-tracker-client.netlify.app/

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Register for a new account using name, email, and password
• Log in using email and password
• Log out
• If there are no expenses, see a button to add a new expense
• See a table (with fields - date, title, description, amount, balance, and actions) of their expenses in descending order
• See the loading animation
• Click with a floating action button to add a new expense
• See the new expense modal
• Add a new expense
• Edit an existing expense in the modal
• Delete an expense

• React - JavaScript library
• TypeScript - Syntactic superset of JavaScript
• Vite - Build tool, dev server
• Tailwind CSS - CSS framework
• prettier-plugin-tailwindcss - Automatic Tailwind CSS class sorting with Prettier
• React Router - Routing for React
• React Redux - Official React bindings for Redux (A predictable state management library)
• Redux Toolkit - Official toolset for Redux development
• RTK Query - Powerful data fetching and caching tool included in the Redux Toolkit
• clsx - utility for constructing className strings conditionally
• tailwind-merge - Merge Tailwind CSS classes without style conflicts
• react-icons - Library to include popular icons in React

• Node.js - JavaScript runtime environment
• Express - Node.js web framework
• TypeScript - Syntactic superset of JavaScript
• cors - Node.js CORS middleware
• cookie-parser - Parse HTTP request cookies
• MongoDB - NoSQL Database
• Mongoose - ODM library for MongoDB
• bcrypt - bcrypt (a password-hashing function) for Node.js
• express-async-handler - Async Error Handling Middleware for Express
• jsonwebtoken - JSON Web Tokens implementation for Node.js
• nodemon - automatically restarts Node.js server when change detected
• ts-node - TypeScript execution engine for Node.js

• MERN Auth by Brad Traversy
• MERN Stack by Dave Gray

• Twitter - @IShaunt
• Portfolio - Ishant Bhurani