Introduction
TITLE :- TO DO LIST PROJECT IN MERN STACK
What is MERN Stack?
MERN stands for MongoDB, [Link], React, and [Link].
MERN stands for MongoDB, [Link], React, and [Link].
[Link]: A web application framework for [Link].
React: A front-end JavaScript library for building user interfaces.
[Link]: A JavaScript runtime built on Chrome's V8 JavaScript engine.
Purpose of the Project
Objective: To build a functional and interactive to-do list application.
Learning Goals:
Understand full-stack development using the MERN stack.
Learn how to manage state and props in React.
Implement RESTful APIs with [Link] and Express.
Connect a front-end application with a back-end server.
Perform CRUD (Create, Read, Update, Delete) operations with MongoDB.
Key Features of the To-Do List App
Add Tasks: Users can add new tasks to their to-do list.
Edit Tasks: Users can edit existing tasks.
Delete Tasks: Users can remove tasks from their list.
Overview
The To-Do List project is a comprehensive full-stack application built using the MERN stack (MongoDB,
[Link], React, and [Link]). This project demonstrates a typical workflow for creating a web application
that includes user authentication and CRUD (Create, Read, Update, Delete) functionalities.
User Authentication
Login and Registration:
Users must create an account to access the to-do list application.
Authentication is handled using JSON Web Tokens (JWT), which secure the API endpoints
and ensure that users can only access their data.
JWT Implementation:
Upon successful login or registration, a token is generated and sent to the client.
This token is then used to authenticate subsequent API requests.
Home Tab Features (Post-Login)
Task Display:
Lists all tasks associated with the logged-in user, fetched from the MongoDB database.
Each task shows its name and status (complete/incomplete).
Add New Task:
A form allows users to input a new task's name and details.
On submission, the task is sent to the backend API and saved in the database.
Edit Task:
Users can click an edit button next to each task to modify its details.
The updated task information is sent to the backend and the UI is refreshed.
Delete Task:
A delete button allows users to remove tasks.
Once a task is deleted, it is removed from the database and the UI updates accordingly.
Home Tab Interface
Task List:
The main section of the home tab, displaying tasks in a list format.
Each task item includes:
Task name
Status (complete/incomplete)
Action buttons (edit/delete)
Add Task Form:
Located at the top or bottom of the task list.
Simple form with fields for the task name and details.
Project Structure
Backend:
Built with [Link] and [Link].
Defines API routes for user authentication and task management.
Connects to MongoDB to store and retrieve user and task data.
Frontend:
Built with React.
Uses components to manage state and render the UI.
Makes API calls to the backend to fetch and manipulate data.
Database:
MongoDB is used for its flexibility and scalability.
Stores user information, authentication tokens, and tasks.
Practical Learning:
Gain experience with full-stack development using the MERN stack.
Learn how to implement user authentication and secure API endpoints.
Understand how to manage state in a React application.
Scalable Architecture:
The project is designed to be scalable and easily extendable.
Demonstrates best practices in structuring a web application.
Sign Up
import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom';
const Signup = (props) => {
const { showAlert } = props;
const [credentials, setCredentials] = useState({ name: '', email: '', password: '' });
const navigate = useNavigate();
const handleSubmit = async (e) => {
[Link]();
try {
const response = await fetch('[Link] {
method: 'POST',
headers: {
'Content-type': 'application/json'
},
body: [Link]({ name: [Link], email: [Link], password:
[Link] })
});
const json = await [Link]()
if (![Link]) {
[Link]('token', json)
navigate('/');
showAlert('success', 'Logged In successfully!');
else {
showAlert('danger', [Link]);
} catch (error) {
<div>Some Error Occured</div>
const onChange = (e) => {
setCredentials({ ...credentials, [[Link]]: [Link] })
return (
<div className='container'>
<div className='loginBody' >
<div className="login">
<div className="content">
<h2>Signup</h2>
<form className="form" onSubmit={handleSubmit}>
<div className="inputBox">
<input type="text" id='name' name='name' value={[Link]}
onChange={onChange} required /> <i>Username</i>
</div>
<div className="inputBox">
<input type="email" id='email' name='email' value={[Link]}
onChange={onChange} required /> <i>Email</i>
</div>
<div className="inputBox">
<input type="password" id='password' name='password'
value={[Link]} onChange={onChange} required /> <i>Password</i>
</div>
<div className="links"> Already have an account? <Link to='/Login' role='button'
>Signup</Link></div>
<div className="inputBox">
<input type="submit" value="Login" />
</div>
</form>
</div>
</div>
</div>
</div>
export default Signup
Overview:
The To-Do List project is a full-stack web application built using the MERN stack. This application
allows users to keep track of their tasks by adding, editing, and deleting items in a list. The
application includes a user authentication system, ensuring that each user has a personalized
experience.
Login
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
const Login = (props) => {
const { showAlert } = props;
const [credentials, setCredentials] = useState({ email: '', password: '' });
const navigate = useNavigate();
const handleSubmit = async (e) => {
[Link]();
try {
const response = await fetch('[Link] {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: [Link]({ email: [Link], password: [Link] })
});
const json = await [Link]();
if (![Link]) {
[Link]('token', json)
navigate('/');
showAlert('success', 'Logged In successfully!');
else {
setCredentials({ email: '', password: '' })
showAlert('danger', [Link]);
} catch (error) {
<div>Some Error Occured</div>
const onChange = (e) => {
setCredentials({ ...credentials, [[Link]]: [Link] })
return (
<div className='container'>
<div className='loginBody' >
<div className="login">
<div className="content">
<h2>Login</h2>
<form className="form" onSubmit={handleSubmit}>
<div className="inputBox">
<input type="text" id='email' name='email' value={[Link]}
onChange={onChange} required /> <i>Email</i>
</div>
<div className="inputBox">
<input type="password" id='password' name='password'
value={[Link]} onChange={onChange} required /> <i>Password</i>
</div>
<div className="links"> Don't have an account? <Link to='/Signup'
role='button' >Signup</Link></div>
<div className="inputBox">
<input type="submit" value="Login" />
</div>
</form>
</div>
</div>
</div>
</div>
export default Login
User Authentication:
Login and Registration: Users must register for an account and log in to access their to-do lists.
Authentication: Implemented using JSON Web Tokens (JWT) to secure API endpoints.
USER INTERFACE(UI)
import React, { useContext, useState } from "react";
import noteContext from '../Context/Notes/noteContext';
function AddNotes() {
const Context = useContext(noteContext);
const { addNote } = Context
const [input, setInput] = useState({ title: "", description: "", tag: "" })
const handleClick = async (e) => {
[Link]();
await addNote([Link], [Link], [Link]);
setInput({ title: "", description: "", tag: "" });
const onChange = (e) => {
setInput({ ...input, [[Link]]: [Link] })
return (
<>
<div className='noteArea'>
<h2>Add Note</h2>
<form onSubmit={handleClick} className='my-3'>
<div className="mb-3">
<i>Title</i>
<input className="form-control" type="text" id="title" name="title"
value={[Link]} onChange={onChange} minLength={3} required />
</div>
<div className="mb-3">
<i>Description</i>
<input className="form-control" type="text" id="description"
name='description' value={[Link]} onChange={onChange} required />
</div>
<div className="mb-3">
<i>Tag</i>
<input className="form-control" type="text" id="tag" name='tag'
value={[Link]} onChange={onChange} />
</div>
<button type="submit" className="btn btn-primary" >Submit</button>
</form>
</div>
</>
)
export default AddNotes
Home Tab Features (Post-Login)
Task Display: All tasks associated with the logged-in user are displayed.
Add New Note: Users can add new tasks through a form input.
Edit Note: Users can modify existing tasks by clicking an edit button.
Delete Note: Users can remove tasks by clicking a delete button.
Home Tab Interface
Task List: Displays all tasks in a list format, showing task name, status (complete/incomplete), and
action buttons (edit/delete).
Add Task Form: A simple form to input a new task's details.
Delete Task: Which task wrong mention/Add then delete option.
Log Out Button: New account login or After the Add or delete item then we can logout project.
Project Structure
Backend: [Link] and [Link] handle API requests and interact with MongoDB to
perform CRUD operations.
Frontend: React is used to build a dynamic and responsive user interface. Components
manage state and make API calls to the backend.
Database: MongoDB stores user data and to-do items.
CONTEXT
1. Note Context
import { createContext } from "react";
const noteContext = createContext();
export default noteContext;
2. Note State
import React, { useState } from "react";
import NoteContext from "./noteContext";
const NoteState = (props) => {
const host = '[Link]
const exampleNotes = []
const [notes, setNotes] = useState(exampleNotes);
//Get note context
const getAllNotes = async ()=>{
const response = await fetch(`${host}/api/notes/fetchnotes`, {
method: 'GET',
headers: {
'Content-type': 'application/json',
'auth-token': [Link]('token')
},
});
const json = await [Link]();
setNotes(json)
//Add note context
const addNote = async (title, description, tag) => {
const response = await fetch(`${host}/api/notes/addnote`, {
method: 'POST',
headers: {
'Content-type': 'application/json',
'auth-token': [Link]('token')
},
body: [Link]({ title, description, tag })
});
const note = await [Link]();
setNotes([Link](note))
//Delete note context
const deleteNote = async (id) => {
const response = await fetch(`${host}/api/notes/deletenote/${id}`, {
method: 'DELETE',
headers: {
'Content-type': 'application/json',
'auth-token': [Link]('token')
},
});
const json = await [Link]();
[Link](json);
const newNotes = [Link]((note) => { return note._id !== id });
setNotes(newNotes);
//Edit note context
const editNote = async (id, title, description, tag) => {
const response = await fetch(`${host}/api/notes/updatenote/${id}`, {
method: 'PUT',
headers: {
'Content-type': 'application/json',
'auth-token': [Link]('token')
},
body: [Link]({ title, description, tag })
});
const json = await [Link]();
[Link](json);
let NewNotes = [Link]([Link](notes));
for (let index = 0; index < [Link]; index++) {
const element = NewNotes[index];
if (element._id === id) {
NewNotes[index].title = title;
NewNotes[index].description = description;
NewNotes[index].tag = tag;
break;
setNotes(NewNotes);
return (
<[Link] value={{ notes, addNote, deleteNote, editNote,
getAllNotes}}>
{[Link]}
</[Link]>
export default NoteState;