Scribd
Upload
3 views

Implementation

The document outlines the implementation of an expense tracker application using React for the frontend and Node.js with Express and MongoDB for the backend. It includes a Home component for displaying expenses, an API for managing expenses, and an AddExpense component for inputting new expenses. Optional enhancements and deployment options are also suggested for the application.

Uploaded by

sadhujanani3002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Implementation

The document outlines the implementation of an expense tracker application using React for the frontend and Node.js with Express and MongoDB for the backend. It includes a Home component for displaying expenses, an API for managing expenses, and an AddExpense component for inputting new expenses. Optional enhancements and deployment options are also suggested for the application.

Uploaded by

sadhujanani3002
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Implementation

1. Frontend UI (React Example)


Home Page (Expense List & Summary)
jsx
CopyEdit
// Home.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Home() {
const [expenses, setExpenses] = useState([]);
const [total, setTotal] = useState(0);

useEffect(() => {
axios.get('/api/expenses').then(res => {
setExpenses(res.data);
setTotal(res.data.reduce((sum, e) => sum + e.amount, 0));
});
}, []);

return (
<div>
<h2>Total Spent: ${total}</h2>
<ul>
{expenses.map(e => (
<li key={e._id}>
{e.date} - {e.category}: ${e.amount}
</li>
))}
</ul>
</div>
);
}

2. Backend API (Node.js + Express + MongoDB)


Basic Express Setup
js
CopyEdit
// server.js
const express = require('express');
const mongoose = require('mongoose');
const Expense = require('./models/Expense');
const app = express();
app.use(express.json());

mongoose.connect('mongodb://localhost:27017/expense-tracker');

app.get('/api/expenses', async (req, res) => {


const expenses = await Expense.find();
res.json(expenses);
});

app.post('/api/expenses', async (req, res) => {


const expense = new Expense(req.body);
await expense.save();
res.status(201).json(expense);
});

app.listen(3000, () => console.log('Server running on port 3000'));


Expense Model (Mongoose)
js
CopyEdit
// models/Expense.js
const mongoose = require('mongoose');

const expenseSchema = new mongoose.Schema({


amount: Number,
category: String,
date: { type: Date, default: Date.now },
notes: String
});

module.exports = mongoose.model('Expense', expenseSchema);

3. Add Expense Component


jsx
CopyEdit
// AddExpense.js
import React, { useState } from 'react';
import axios from 'axios';

function AddExpense() {
const [form, setForm] = useState({ amount: '', category: '', notes: '' });

const handleSubmit = async (e) => {


e.preventDefault();
await axios.post('/api/expenses', form);
alert('Expense added!');
};
return (
<form onSubmit={handleSubmit}>
<input type="number" placeholder="Amount" onChange={e => setForm({ ...form,
amount: e.target.value })} />
<input type="text" placeholder="Category" onChange={e => setForm({ ...form, category:
e.target.value })} />
<input type="text" placeholder="Notes" onChange={e => setForm({ ...form, notes:
e.target.value })} />
<button type="submit">Add Expense</button>
</form>
);
}

4. Optional Enhancements
• Add Chart.js for visual summaries
• Add filters (date range, category)
• Implement user login (Firebase Auth or JWT)
• Set up recurring expenses
• Export to CSV (using libraries like json2csv)

Deployment
• Frontend: Vercel or Netlify
• Backend: Render or Railway
• MongoDB: Atlas (cloud-hosted)
• CI/CD: GitHub + GitHub Actions (optional)

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy