CHAPTER 1

1. INTRODUCTION

1.1 OVERVIEW OF THE PROJECT

Task management applications play a crucial role in improving productivity,

organization, and efficiency in handling daily activities. Whether in professional settings
or personal life, individuals often require tools that help them track, manage, and
complete their tasks effectively. This project focuses on the development of a To-Do List
Application with CRUD (Create, Read, Update, Delete) API Integration, built using
ReactJS and JSON Server.

The To-Do List Application is a web-based solution designed to allow users to add,
update, delete, and retrieve tasks dynamically. Unlike traditional paper-based lists or
simple note-taking applications, this system incorporates data persistence, ensuring that
tasks remain saved even after refreshing the page. By integrating a RESTful API, the
project simulates real-world applications where frontend and backend systems interact
seamlessly.

1.2 Problem Statement

Many individuals struggle with organizing their tasks efficiently, leading to missed
deadlines and reduced productivity. Existing task management solutions, such as Google
Keep, Microsoft To-Do, and Todoist, offer extensive functionalities but may come with
limitations such as premium subscriptions, dependency on cloud services, or complex
user interfaces.

1
The proposed To-Do List Application addresses these challenges by providing a simple,
open-source, and customizable task management solution. Using ReactJS for the frontend
and JSON Server for backend simulation, this application ensures smooth task handling
while maintaining an intuitive user experience.

1.3 Motivation

The motivation behind this project stems from the increasing demand for digital tools
that help individuals plan, prioritize, and track their tasks effectively. The following key
factors inspired the development of this application:

Ease of Use – Many task management apps come with excessive features that may
overwhelm users. This project aims to create a minimalistic, easy-to-use solution.

Customization – Unlike commercial software, this application can be modified based on

specific user needs.

Learning Opportunity – The project provides hands-on experience with ReactJS,

RESTful APIs, and CRUD operations, essential skills in modern web development.

Scalability – The system is designed to be extended with features like authentication,

cloud storage, and multi-user support in the future.

1.4 Features of the To-Do List Application

The application incorporates the following essential features:

Task Creation – Users can add new tasks dynamically.

Task Editing – Users can modify existing tasks.

Task Deletion – Users can remove completed or unnecessary tasks.

2
Task Status Update – Users can mark tasks as completed or pending.

Data Persistence – Tasks remain saved using JSON Server even after refreshing the
browser.

Responsive UI – The interface is optimized for both desktop and mobile devices.

1.5 Benefits of the System

This To-Do List Application provides the following benefits:

Enhanced Productivity – Helps users organize and prioritize their tasks efficiently.

User-Friendly Interface – Designed with simplicity to ensure an intuitive user experience.

Lightweight & Fast – Uses minimal resources, making it fast and responsive.

Offline Support – Tasks remain accessible even without an active internet connection (if
local storage is enabled).

Future Scalability – Can be extended with authentication, cloud database integration, and
collaboration features.

1.5 Project Features

The application consists of three primary sections:

Heading Section: The application header displays the title "To-Do List" in bold text,
giving users a clear understanding of the application's purpose.

Content Section: This section includes an input field for adding new tasks, a search bar
for filtering tasks, and a dynamically updated list displaying tasks with checkboxes and
delete icons.

3
Footer Section: The footer displays the total number of tasks in the list, providing users
with an overview of their pending activities.

The application's modern and responsive UI ensures smooth navigation, making it

accessible on both desktop and mobile devices. Additionally, ReactJS components and
state management techniques enhance the user experience by ensuring seamless task
updates and API communication.

4
 CHAPTER 2
2. SYSTEM STUDY
2.1 EXISTING SYSTEM

Traditional task management methods rely on physical notes, spreadsheets, or basic

applications lacking real-time synchronization. These methods are inefficient and do not provide
interactive features such as reminders, categorization, and cloud synchronization.

2.2 DISADVANTAGES

 Lack of real-time updates and synchronization.

 No centralized storage leading to data loss.
 Limited accessibility across multiple devices.
 Manual task tracking leads to inefficiency.

2.3 PROPOSED SYSTEM

The proposed system is a web-based To-Do List application using React.js and JSON Server.
The application allows users to create, update, delete, and manage tasks in a structured manner with a
modern user interface.
This system overcomes the limitations of traditional methods by incorporating real-time task
updates, user-friendly interface elements, and a lightweight yet efficient backend. The application
operates as a single-page application (SPA), ensuring fast interactions and smooth user experiences.

2.4 ADVANTAGES

 Efficient task management with real-time updates.

 Persistent storage using JSON Server.
 User-friendly interface with enhanced usability.
 Scalability for future enhancements.
 Improved accessibility across multiple devices

5
 CHAPTER 3
3. SYSTEM SPECIFICATION
3.1 HARDWARE SPECIFICATION

 Processor: Intel i3/i5/i7 or equivalent

 RAM: Minimum 4GB (Recommended: 8GB)
 Storage: Minimum 10GB free space
 Network: Stable internet connection for real-time updates

3.2 SOFTWARE SPECIFICATION

 Operating System: Windows/Linux/macOS

 Development Tools: Visual Studio Code, Node.js, JSON Server
 Browsers: Google Chrome, Mozilla Firefox
 Libraries & Frameworks: React.js, Bootstrap, Axios

3.3 LANGUAGE SPECIFICATION

Language Specification

1. HTML (HyperText Markup Language)

Overview:

HTML is the standard markup language for creating web pages. It provides the
structure of the web content, allowing developers to define elements such as
headings, paragraphs, links, images, and tables.

6
Key Features:

Elements and Tags: HTML uses a series of elements (tags) to create the
structure of a webpage. Common tags include <div>, <h1>, <p>, <table>, and
<a>.

Attributes: HTML elements can have attributes that provide additional

information about the element, such as class, id, and style.

Semantic HTML: Using semantic tags (like <header>, <footer>, <article>, and
<section>) improves accessibility and SEO.

Usage in the Project:

The index.html file serves as the main entry point for the React application. It
includes the root <div> where the React components will be rendered.

Basic metadata, such as character set and viewport settings, are defined in the
<head> section to ensure proper rendering on different devices.

CSS (Cascading Style Sheets)

Overview:

CSS is a stylesheet language used to describe the presentation of a document

written in HTML. It controls the layout, colors, fonts, and overall visual
appearance of web pages.

7
Key Features:

Selectors: CSS uses selectors to target HTML elements for styling. Common
selectors include class selectors (.className), ID selectors (#idName), and
element selectors (element).

Box Model: CSS follows the box model, which defines how elements are
displayed and how their dimensions are calculated (including margins, borders,
padding, and content).

Responsive Design: CSS can be used to create responsive designs that adapt to
different screen sizes using media queries.

Usage in the Project:

The App.css file contains styles that apply to the entire application, including
layout, typography, and table styling.

CSS classes are used within React components to apply specific styles to
elements, ensuring a consistent and visually appealing user interface.

JavaScript (React.js)

Overview:

JavaScript is a high-level, dynamic programming language that enables

interactive web applications. React.js is a JavaScript library developed by
Facebook for building user interfaces, particularly single-page applications
(SPAs) where data can change dynamically without requiring a full page reload.

8
Key Features of React:

Component-Based Architecture: React applications are built using components,

which are reusable pieces of UI that manage their own state and rendering
logic.

JSX Syntax: React uses JSX, a syntax extension that allows developers to write
HTML-like code within JavaScript. This makes it easier to create and manage
UI components.

Virtual DOM: React maintains a virtual representation of the DOM, allowing

for efficient updates and rendering. When the state of a component changes,
React updates only the parts of the DOM that need to change, improving
performance.

Usage in the Project:

React Components: The application is structured using functional components

(e.g., App, EnergyConsumption, EnergyUpgrades, User Engagement), which
encapsulate

9
TECHNOLOGIES USED

The development of the To-Do List Application is supported by various

technologies that contribute to its functionality, efficiency, and usability. The key
technologies used are:

Frontend Technologies

ReactJS: Component-based UI library for building an interactive

interface.

HTML5: Provides the structure for the application.

CSS3: Used for styling and ensuring responsiveness.

Backend Technologies

JSON Server: Acts as a mock backend for CRUD operations.

RESTful APIs: Facilitates communication between the frontend and

backend.

Development Tools

10
 VS Code: Code editor used for development.

GitHub: Version control and project management.

CHAPTER 4

Feasibility Study

A feasibility study is conducted to evaluate the practicality and viability of the

To-Do List Application in terms of technical, behavioral, economic, and
operational aspects. This analysis ensures that the project can be implemented
efficiently while meeting user requirements.

4.1 Technical Feasibility

The To-Do List Application is technically feasible as it is developed using

widely used and well-supported technologies such as ReactJS, JSON Server, CSS,
and JavaScript. The frontend leverages React’s component-based architecture,
ensuring modularity and maintainability, while the backend uses JSON Server to
simulate a lightweight REST API, eliminating the need for a complex database.
The application’s reliance on modern web technologies makes it easily deployable
on platforms like Vercel or Netlify without requiring extensive infrastructure.
Since these technologies are open-source, development is cost-effective and does
not pose significant technical challenges.

4.2 Behavioral Feasibility

Behavioral feasibility assesses whether the application meets user expectations

and adoption rates. Given the increasing reliance on digital task management tools,
users are likely to find the application intuitive, user-friendly, and efficient for

11
organizing their daily activities. The responsive design ensures usability across
various devices, while features like task addition, completion status, and search
functionality enhance the user experience. Since the application follows industry-
standard UI/UX practices, users can easily adapt to it without requiring extensive
training.

4.3 Economic Feasibility

The project is economically feasible as it does not require significant financial

investment. The use of open-source technologies (ReactJS, JSON Server, and
Bootstrap) eliminates licensing costs, while free hosting services like Vercel or
Netlify further reduce expenses. Additionally, development and maintenance costs
remain minimal due to the project’s scalable and efficient architecture. Future
enhancements, such as cloud storage integration, may introduce costs, but cost-
effective solutions like Firebase or AWS Free Tier can be leveraged to ensure
affordability.

4.4 Operational Feasibility

Operational feasibility ensures that the application functions as intended and

meets its objectives efficiently. The To-Do List Application is designed to be
lightweight, fast, and reliable, making it easy to deploy and maintain. The intuitive
UI allows users to create, update, delete, and search tasks without complications,
enhancing productivity. Additionally, the project’s scalability enables future
improvements such as user authentication, cloud storage, and advanced filtering,
ensuring long-term operational sustainability.

12
 CHAPTER-5
MODULES

5.1 PROCESS

The To-Do List Application with CRUD API Integration is divided into several
key modules, each responsible for different aspects of the application’s
functionality. The following modules are implemented in the project:

5.1.1. User Interface (UI) Module

This module is responsible for designing and implementing a user-friendly

interface that allows users to interact seamlessly with the application. It includes
components such as:

Header: Displays the application title.

Task Input: Provides an input field to add new tasks.

Task List: Displays added tasks, allowing users to update or delete them.

Footer: Shows task statistics.

5.1.2. Task Management Module

The task management module allows users to perform CRUD operations on

tasks. This includes:

13
Creating tasks by entering task details.

Reading tasks from the JSON Server.

Updating tasks by modifying task details.

Deleting tasks from the list.

5.1.3. API Integration Module

This module handles communication with the backend using RESTful APIs. It
ensures:

Fetching tasks from the JSON Server.

Sending task data to the backend.

Updating task status through API requests.

5.1.4. State Management Module

ReactJS state management is handled using React Hooks, such as:

useState: For handling component states.

useEffect: For fetching and updating data from the server.

14
5.1.5. Data Persistence Module

This module ensures that task data remains available even after the application
is refreshed by storing data using JSON Server.

Each of these modules works together to create an efficient and interactive task
management system, allowing users to manage their daily tasks effectively and
efficiently.

This modular approach ensures scalability, maintainability, and future

enhancement possibilities, making it a robust and flexible application.

15
 CHAPTER 6

6 SYSTEM DESIGN

6.1 FILE DESIGN

System design is the process of planning a new system to complement or replace

the old system. The purpose of the design phase is the first step in moving from the
problem domain to the solution domain. The design of the system is a critical
aspect that affects the quality of the software. System design is also called top-
level design. The design phase translates the logical aspects of the system into
physical aspects of the system.

6.2 INPUT DESIGN

Input design is one of the most crucial phases of a computerized system and is
often the major problem of a system. A large number of system issues can be
traced back to faulty input design. The input data must be accurate; otherwise,
errors will lead to incorrect results, which can be costly and embarrassing.

In this system, users are provided with user-friendly interfaces to input data. If
incorrect input is provided, validations ensure error handling, with message boxes
guiding users politely and informatively. The interactive design simplifies data
entry, reducing the number of corrections while entering data.

16
6.3 OUTPUT DESIGN

The output design ensures that users can understand the displayed information.
Each piece of data presented must be meaningful and structured appropriately.
Output design is crucial because it represents the effectiveness of the system. It
determines how well users can interact with the system.

Outputs are categorized into:

 External Outputs: Information that is shared outside the organization.

 Internal Outputs: Information used within the organization for operations.

6.4 DATABASE DESIGN

Database design involves creating tables that store structured data. Each table
consists of rows and columns, where each row represents a record and each
column represents a field of data. Proper database design minimizes redundancy
and ensures normalization.

The database for this project is structured to maintain data integrity and reduce
redundancy. Refer to the appendix for database schema screenshots.

17
6.5 DATA FLOW DIAGRAM

LEVEL 0

18
LEVEL 1

19
6.6 ER DIAGRAM

20
21
6.7 TABLE DESIGN

INVOICE TABLE:

FEEDBACK TABLE:

22
ELECTRICITY BOARD TABLE:

ADMIN TABLE:

23
BILLING TABLE:

ACCOUNT TABLE:

24
CUSTOMER TABLE:

TARIFF TABLE:

25
 CHAPTER 7

7. TESTING AND IMPLEMENTATION

7.1 SYSTEM TESTING

1. Introduction to Testing.

Testing is a crucial phase in software development that ensures the

application functions correctly and meets user requirements. For the To-Do List
application, multiple testing techniques were applied to validate functionality,
performance, and reliability.

2. Testing Strategies

A. Unit Testing

Focused on testing individual components such as TaskForm, TaskList, and

TaskItem.

Used Jest and React Testing Library to verify component rendering and
event handling.

Ensured that task addition, deletion, and updates function correctly.

B. Integration Testing

Verified communication between frontend components and backend API.

Used Mock API responses to test interactions between components.

Ensured that API calls return expected data and handle errors properly.

26
C. Functional Testing

Conducted manual testing to check user interactions.

Validated form submissions, button clicks, and API responses.

Ensured proper state updates and UI responsiveness.

D. Performance Testing

Measured application loading time and responsiveness.

Used Chrome DevTools and Lighthouse to analyze performance metrics.

Optimized API calls and React rendering to improve efficiency.

E. Security Testing

Tested API endpoints for vulnerabilities such as SQL injection and XSS.

Ensured data validation and input sanitization.

Checked authentication mechanisms for future enhancements.

3. Validation Process

A. User Interface Validation

Ensured that the UI is visually appealing and follows accessibility

guidelines.

Validated that elements are properly aligned and responsive across different
devices.

27
B. Data Validation

Checked that task inputs accept only valid data.

Implemented validation for empty inputs and duplicate tasks.

Verified data persistence using JSON Server.

C. API Response Validation

Ensured that API responses return correct HTTP status codes (200, 201, 404,
etc.).

Tested API error handling for network failures and invalid requests.

D. Cross-Browser Testing

Tested application functionality on different browsers (Chrome, Firefox,

Edge, Safari).

Ensured consistent rendering and performance across platforms.

4. Debugging and Fixes

Identified issues using console logs and debugging tools.

Fixed UI inconsistencies and API call failures.

Optimized React state management to avoid unnecessary re-renders.

28
 Implementation

7.2 SYSTEM IMPLEMENTATION

Frontend Implementation

The frontend of the To-Do List application was developed using ReactJS,
leveraging its modular component-based architecture to ensure maintainability and
scalability. The layout design was structured using CSS Flexbox and Grid,
providing a responsive and visually appealing interface that adapts to various
screen sizes.

Backend Implementation

For the backend, JSON Server was used as a lightweight mock REST API
to handle data storage and retrieval. The application efficiently manages CRUD
(Create, Read, Update, Delete) operations through RESTful API calls. The
db.json file was configured to store and organize task data, ensuring seamless
interaction between the frontend and backend.

Database Integration

The application communicates with the backend using Axios or the Fetch
API, facilitating smooth data transactions. Data persistence was a crucial feature,
ensuring that tasks remain saved even after a page refresh, improving the overall
user experience.

Testing and Debugging

29
 To maintain reliability, extensive manual testing was conducted to evaluate
UI responsiveness and functional accuracy. Debugging was carried out using
console tools to detect and resolve errors, while error-handling mechanisms
were integrated to manage potential API failures effectively.

Deployment and Future Enhancements

The To-Do List application was deployed on Vercel/Netlify, ensuring

accessibility across different devices. Future enhancements will include user
authentication for personalized task management and cloud storage integration to
enhance scalability and data security.

This comprehensive implementation ensures that the To-Do List application

is robust, efficient, and user-friendly, offering an intuitive platform for seamless
task management.

30
 CHAPTER 8

8.1 CONCLUSION
The development of the To-Do List Application with CRUD API Integration
has been a comprehensive exercise in modern web development using ReactJS and
JSON Server. This project effectively demonstrates how a structured approach to
frontend development, API communication, and state management can result in an
efficient and user-friendly application.

Key Findings
The application successfully implements CRUD operations, allowing users to
manage tasks seamlessly.
ReactJS, combined with JSON Server, provided a lightweight yet powerful
solution for dynamic task management.
The application ensures a responsive and interactive user interface with real-
time updates.
State management using React Hooks significantly improved application
efficiency and performance.
Testing and validation strategies ensured reliability, security, and cross-
browser compatibility.

Impact of the Project

This project contributes to the field of task management applications by
providing an accessible, scalable, and extendable solution. The structured
modular approach enables easy future enhancements, making it suitable for
both individual users and professional teams.

31
8.2 FUTURE ENHANCEMENT

User Authentication

A key improvement for future iterations of the project is the implementation of

user authentication, enabling users to create accounts and manage personalized
task lists. Features such as login, logout, and secure user sessions will enhance
privacy and customization.

Cloud Storage

To improve scalability and data security, future enhancements will include cloud
storage integration, allowing tasks to be stored in cloud databases instead of local
JSON files. This will ensure data persistence across multiple devices and prevent
data loss.

Task Prioritization

Introducing a task prioritization feature will enable users to assign priority levels
(e.g., high, medium, low) to their tasks, helping them focus on critical tasks first.

Deadline Reminders

To improve time management, the application will include deadline reminders

and notifications, alerting users about upcoming due dates to ensure they stay on
top of their tasks.

Advanced Filtering and Sorting

Enhancing search and filtering capabilities will allow users to sort tasks based on
categories, due dates, or priority levels, making task management more efficient
and intuitive.

These enhancements will significantly improve the functionality, usability, and

scalability of the To-Do List application, making it a more comprehensive and
user-friendly task management solution.

32
Final Thoughts

The To-Do List Application successfully meets its objectives by offering an

intuitive and efficient platform for managing daily tasks. By leveraging ReactJS
for the frontend and JSON Server as a lightweight backend, the project
demonstrates a scalable and modular architecture that ensures flexibility for future
enhancements. The implementation of CRUD operations, responsive design, and
data persistence provides users with a seamless experience, allowing them to
organize and track their tasks efficiently.

Beyond its current functionality, the application lays a strong foundation for
future improvements such as user authentication, cloud storage integration, task
prioritization, and deadline reminders. These enhancements will further refine its
usability, making it an even more powerful productivity tool. The adoption of
industry best practices in development, testing, and deployment ensures that the
application remains robust, maintainable, and scalable over time.

Moreover, this project serves as a practical learning experience in full-stack

web development, reinforcing key concepts such as component-based UI design,
REST API integration, error handling, and performance optimization. The insights
gained from this development process are valuable not only for improving this
application but also for contributing to future projects in the field of web
applications, task management systems, and productivity tools.

In conclusion, the To-Do List Application is more than just a simple task
manager—it is a stepping stone towards building more sophisticated and feature-
rich productivity solutions.

33
 CHAPTER 9

FORM DESIGN

34
 APPENDIX

CODING

db.json (for JSON Server)

"items": [

"id": 1,

"checked": false,

"item": "Learn coding"

},

"id": 2,

"checked": false,

"item": "Play"

},

"id": 3,

"checked": false,

"item": "Earn"

35
index.jsx:

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

App.jsx:

import React, { useState, useEffect } from "react";

import Header from "./component/Header";

import Footer from "./component/Footer";

import Content from "./component/Content";

import AddItem from "./component/AddItem";

import SearchItem from "./component/SearchItem";

const API_URL = "http://localhost:3500/items";

const App = () => {

const [items, setItems] = useState([]);

36
const [newItem, setNewItem] = useState("");

const [searchItem, setSearchItem] = useState("");

const [error, setError] = useState(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

const fetchItems = async () => {

try {

const response = await fetch(API_URL);

if (!response.ok) throw new Error("Something went wrong!");

const jsonData = await response.json();

setItems(jsonData);

setError(null);

} catch (err) {

setError(err.message);

} finally {

setLoading(false);

};

setTimeout(() => {

fetchItems();

}, 3000);
37
}, []);

const addItem = async (item) => {

const id = items.length ? items[items.length - 1].id + 1 : 1;

const newListItem = { id, checked: false, item };

try {

const response = await fetch(API_URL, {

method: "POST",

headers: { "Content-Type": "application/json" },

body: JSON.stringify(newListItem),

});

if (!response.ok) throw new Error("Failed to add item!");

setItems([...items, newListItem]);

} catch (err) {

setError(err.message);

};

const handleCheck = async (id) => {

const updatedItems = items.map((item) =>

item.id === id ? { ...item, checked: !item.checked } : item

38
 );

try {

const itemToUpdate = updatedItems.find((item) => item.id === id);

await fetch(${API_URL}/${id}, {

method: "PATCH",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({ checked: itemToUpdate.checked }),

});

setItems(updatedItems);

} catch (err) {

setError(err.message);

};

const handleDelete = async (id) => {

try {

await fetch(${API_URL}/${id}, {

method: "DELETE",

});

setItems(items.filter((item) => item.id !== id));

39
 } catch (err) {

setError(err.message);

};

return (

<div className="App">

<Header title="To-Do List" />

<AddItem newItem={newItem} setNewItem={setNewItem}

handleSubmit={(e) => {

e.preventDefault();

if (!newItem.trim()) return;

addItem(newItem);

setNewItem("");

}}

/>

<SearchItem searchItem={searchItem} setSearchItem={setSearchItem} />

{error && <p>{error}</p>}

{loading && <p>Loading items...</p>}

{!error && !loading && (

<Content

items={items.filter((item) =>

40
 item.item.toLowerCase().includes(searchItem.toLowerCase())

)}

handleCheck={handleCheck}

handleDelete={handleDelete}

/>

)}

<Footer items={items} />

</div>

);

};

export default App;

Content.jsx:

import React from "react";

import ItemsList from "./ItemsList";

const Content = ({ items, handleCheck, handleDelete }) => {

return (

<main>

{items.length === 0 ? (

<div style={{ textAlign: "center" }}>

<p>

</p>
41
 <p>Your list is empty</p>

</div>

):(

<ItemsList items={items} handleCheck={handleCheck}

handleDelete={handleDelete} />

)}

</main>

);

};

export default Content;

import React from "react";

import ListItems from "./ListItems";

const ItemsList = ({ items, handleCheck, handleDelete }) => {

return (

<ul>

{items.map((item) => (

<ListItems key={item.id} item={item} handleCheck={handleCheck}

handleDelete={handleDelete} />

))}

</ul>

);

42
};

export default ItemsList;

ListItems.jsx:

import React from "react";

import { FaTrash } from "react-icons/fa";

const ListItems = ({ item, handleCheck, handleDelete }) => {

return (

<li className="item">

<input type="checkbox" checked={item.checked} onChange={() =>

handleCheck(item.id)} />

<label style={{ textDecoration: item.checked ? "line-through" : "none", cursor:

"pointer" }}>

{item.item}

</label>

<FaTrash onClick={() => handleDelete(item.id)} role="button"

tabIndex={0} />

</li>

);

};

export default ListItems;

SearchItem.jsx:

import React from "react";

43
const SearchItem = ({ setSearchItem, searchItem }) => {

return (

<form className="searchForm" onSubmit={(e) => e.preventDefault()}>

<label htmlFor="search">Search</label>

<input

type="text"

id="search"

placeholder="Search items"

value={searchItem}

onChange={(e) => setSearchItem(e.target.value)}

/>

</form>

);

};

export default SearchItem;

AddItem.jsx

import React, { useRef } from "react";

import { FaPlus } from "react-icons/fa";

const AddItem = ({ newItem, setNewItem, handleSubmit }) => {

const inputRef = useRef();

return (
44
 <form className="addForm" onSubmit={handleSubmit}>

<label htmlFor="addItem">Add Item</label>

<input

ref={inputRef}

type="text"

id="addItem"

placeholder="Add Item"

required

value={newItem}

onChange={(e) => setNewItem(e.target.value)}

/>

<button type="submit" onClick={() => inputRef.current.focus()}>

<FaPlus />

</button>

</form>

);

};

export default AddItem;

main .jsx:

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

45
createRoot(document.getElementById('root')).render(

<StrictMode>

<App />

</StrictMode>,

46
WEBSITES

 ReactJS Documentation – React: A JavaScript Library for Building User

Interfaces. Available at: https://react.dev/
 JSON Server Documentation – A Simple and Lightweight Mock REST API.
Available at: https://github.com/typicode/json-server
 JavaScript MDN Web Docs – JavaScript Tutorials and Reference
Documentation. Available at:
https://developer.mozilla.org/en-US/docs/Web/JavaScript
 Bootstrap Documentation – CSS Framework for Responsive Web Design.
Available at: https://getbootstrap.com/
 Jest Documentation – JavaScript Testing Framework for Unit Testing. Available
at: https://jestjs.io/
 Chrome DevTools – Guide to Optimizing Web Applications for Performance.
Available at: https://developer.chrome.com/docs/devtools/
 W3C Accessibility Standards – Web Accessibility Guidelines for UI Validation.
Available at: https://www.w3.org/WAI/
 REST API Best Practices – Guide to Designing Scalable RESTful APIs.
Available at: https://restfulapi.net/
 Lighthouse Performance Testing – Google’s Tool for Improving Web App
Performance. Available at: https://developers.google.com/web/tools/lighthouse
 Stack Overflow Community Discussions – Helpful Insights on Debugging React
Applications. Available at: https://stackoverflow.com/

47