Full Stack Development with React and Node js – Expense Tracker Application
Full stack development refers to the practice of creating both the front-end and back-end of a web application. It involves building the user interface, managing the server-side logic, and connecting the two using APIs.
React is a popular JavaScript library for building user interfaces, while Node.js is a runtime environment that allows JavaScript to run server-side. By combining these two technologies, developers can create powerful and dynamic web applications.
Expense Tracker Application
An expense tracker application is a useful tool for managing personal finances. It allows users to track their income and expenses, set budgets, and visualize their financial data in a clear and organized manner.
Front-end Development with React
With React, developers can create a modern and responsive user interface for the expense tracker application. Using components, state management, and routing, they can design a seamless experience for the end user.
import React from 'react';
const ExpenseTracker = () => {
return (
Expense Tracker
{/* Add components for managing income and expenses */}
);
};
export default ExpenseTracker;
Back-end Development with Node.js
Node.js enables developers to build a robust server-side architecture for the expense tracker application. They can create APIs for data storage, authentication, and other server-side functionality using frameworks like Express.js.
const express = require('express');
const app = express();
app.get('/api/transactions', (req, res) => {
// Retrieve and return transaction data from the database
});
app.post('/api/transactions', (req, res) => {
// Add a new transaction to the database
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Full Stack Integration
By integrating the front-end and back-end components, developers can create a complete and functional expense tracker application. React can make API calls to the Node.js server to retrieve and update financial data, providing a seamless user experience.
Overall, full stack development with React and Node.js offers a powerful and efficient way to build web applications. With their combined capabilities, developers can create feature-rich and interactive applications like the expense tracker, providing value to users and businesses alike.
Can anyone explain how to solve this at 36:00 information is not stored in mongodb atlas and postman is also not giving response "Income Added"
can you pls generate a user login and signup page in this project
how do i run my code can someone tell
Does this project have login and registration for users?
can u put some time stamps
Can anyone explain how to solve this at 36:00 information is not stored in mongodb atlas and postman is also not giving response "Income Added"
Thanks bro
P.S: To create an instance of a document in the "Income" collection, you should use the Mongoose model, which in this case is named "Income." You do not directly create instances using the schema (IncomeSchema). Instead, the schema is used to define the structure and constraints of your documents, and the Mongoose model (Income) is what you use to create, query, and manipulate actual document instances.
My income and expense are not updating in the db, its is throwing 500 error, any inputs?
please make it responsive please brroo
Sir mail id?
Could you please help
I am getting db not connected
disliked. No time stamps. Also, when showing the application at the beginning, you didn't show the View Transaction part.
36:36 doesnt created ,updated in my lap
In 4:33:00 it's just a one const line of code Example:
const minExpense = expenses.length > 0 ? Math.min(…expenses.map(item => item.amount)) : 0;
Then put the minExpense at inside of p tag like this
<p>{minExpense} </p>
For those who can't put in the same length of DatePicker with input-control use this instead:
– put the DatePicker inside of div with className"customDatePickerWidth". And it should be like this.
<div className="input-control">
<div className="customDatePickerWidth">
<DatePicker
placeholderText='Enter the Date'
autoComplete='off'
selected={date}
dateFormat="dd/MM/yyyy"
onChange={(date) => {
setInputState({ …inputState, date: date })
}}
/>
</div>
</div>
– At FromStyled, paste this css
.customDatePickerWidth, .customDatePickerWidth > div.react-datepicker-wrapper,
.customDatePickerWidth > div > div.react-datepicker__input-container
.customDatePickerWidth > div > div.react-datepicker__input-container input {
width: 100%;
}
Can I use MongoDB on Windows 11 PC as an alternative to MongoDB Atlas for this tutorial project?
Trash!! This stupid chart ain't even working properly!! I have to create the logic for this chart?? Are you fucking kidding me??!! Thing is you can't just plug and play those incomes and expenses like you did here and expect it to work properly. It doesn't work that way. The incomes won't even display and if they do display, it's on the wrong dates. I actually have to create the logic for that.
Why are the dates in my chart in reverse order? July 1 is on the right of the chart and July 31 is on the left.
Sections: not done yet
Backend section: 4:40
Frontend section: 57:08