Expense Tracker

This is a simple Expense Tracker built with the MERN stack (MongoDB, Express, React, Node.js).

Project Goals

• Learn how to set up a backend server with Express and Node.js.
• Connect the server to a MongoDB database using Mongoose.
• Create a RESTful API to handle expense data (CRUD operations).
• Build a frontend with React and Vite to interact with the backend API.

Project Structure

• server/: The backend API built with Express and Node.js.
  • models/: Database schemas (using Mongoose).
  • routes/: API endpoints.
  • index.js: Server entry point.
• client/: The frontend built with React and Vite.
  • src/components/: Reusable React components.
  • App.jsx: Main application logic and state management.

Technologies Used

• Backend:
  • Node.js
  • Express.js
  • MongoDB with Mongoose
• Frontend:
  • React.js
  • Vite
  • Axios for API calls

Getting Started

1. Prerequisites

• Node.js installed.
• A MongoDB Atlas cluster (or a local MongoDB instance).

2. Backend Setup

1. Go to the server folder: cd server
2. Install dependencies: npm install
3. Create a .env file (copied from the template) and add your MONGO_URI.
4. Start the server: npm start
   • The server runs on http://localhost:5001.

3. Frontend Setup

1. Go to the client folder: cd client
2. Install dependencies: npm install
3. Start the development server: npm run dev
   • The app will be available at the URL shown in your terminal (usually http://localhost:5173).

What I've Learned

• Backend: Setting up an Express server, connect to MongoDB using Mongoose, and create RESTful API routes.
• Frontend: Creating functional React components, manage state with useState and useEffect, and perform API calls using Axios.
• Full Stack: How the frontend communicates with the backend to perform CRUD (Create, Read, Update, Delete) operations.

Note

This project is designed for learning purposes and does not include authentication.

Author

Supakorn P. GitHub