Introduction

TITLE :- TO DO LIST PROJECT IN MERN STACK

What is MERN Stack?

 MERN stands for MongoDB, Express.js, React, and Node.js.

 MERN stands for MongoDB, Express.js, React, and Node.js.

 Express.js: A web application framework for Node.js.

 React: A front-end JavaScript library for building user interfaces.

 Node.js: 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 Node.js 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,

Express.js, React, and Node.js). 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 Node.js and Express.js.

 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) => {

e.preventDefault();

try {

const response = await fetch('http://localhost:5000/api/auth/createuser', {

method: 'POST',

headers: {

'Content-type': 'application/json'

},

body: JSON.stringify({ name: credentials.name, email: credentials.email, password:

credentials.password })

});

const json = await response.json()

if (!json.error) {

localStorage.setItem('token', json)

navigate('/');

showAlert('success', 'Logged In successfully!');

else {

showAlert('danger', json.error);

} catch (error) {
 <div>Some Error Occured</div>

const onChange = (e) => {

setCredentials({ ...credentials, [e.target.name]: e.target.value })

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={credentials.name}

onChange={onChange} required /> <i>Username</i>

</div>

<div className="inputBox">

<input type="email" id='email' name='email' value={credentials.email}

onChange={onChange} required /> <i>Email</i>

</div>

<div className="inputBox">
 <input type="password" id='password' name='password'

value={credentials.password} 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) => {

e.preventDefault();

try {

const response = await fetch('http://localhost:5000/api/auth/login', {

method: 'POST',

headers: {

'Content-type': 'application/json',

},

body: JSON.stringify({ email: credentials.email, password: credentials.password })

});

const json = await response.json();

 if (!json.error) {

localStorage.setItem('token', json)

navigate('/');

showAlert('success', 'Logged In successfully!');

else {

setCredentials({ email: '', password: '' })

showAlert('danger', json.error);

} catch (error) {

<div>Some Error Occured</div>

const onChange = (e) => {

setCredentials({ ...credentials, [e.target.name]: e.target.value })

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={credentials.email}

onChange={onChange} required /> <i>Email</i>

</div>

<div className="inputBox">

<input type="password" id='password' name='password'

value={credentials.password} 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) => {

e.preventDefault();

await addNote(input.title, input.description, input.tag);

setInput({ title: "", description: "", tag: "" });

const onChange = (e) => {

setInput({ ...input, [e.target.name]: e.target.value })

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={input.title} onChange={onChange} minLength={3} required />

</div>

<div className="mb-3">

<i>Description</i>

<input className="form-control" type="text" id="description"

name='description' value={input.description} onChange={onChange} required />

</div>

<div className="mb-3">

<i>Tag</i>

<input className="form-control" type="text" id="tag" name='tag'

value={input.tag} 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: Node.js and Express.js 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 = 'http://localhost:5000';

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': localStorage.getItem('token')

},

});

const json = await response.json();

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': localStorage.getItem('token')

},

body: JSON.stringify({ title, description, tag })

});

const note = await response.json();

setNotes(notes.concat(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': localStorage.getItem('token')

},

});

const json = await response.json();

console.log(json);

const newNotes = notes.filter((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': localStorage.getItem('token')

},

body: JSON.stringify({ title, description, tag })

});
const json = await response.json();

console.log(json);

let NewNotes = JSON.parse(JSON.stringify(notes));

for (let index = 0; index < NewNotes.length; 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 (

<NoteContext.Provider value={{ notes, addNote, deleteNote, editNote,

getAllNotes}}>

{props.children}

</NoteContext.Provider>

export default NoteState;