My React Personal Project and How I did It?

Why DistractionCut?

• Distractions on YouTube: Users face numerous distractions on YouTube, including suggested videos, ads, comments, and related content, detracting from their learning focus.

• Lack of Structured Learning Paths: YouTube lacks structured learning paths found in formal education, making it challenging for users to organize videos into coherent learning journeys without significant effort.

*How I build DistractionCut ? *

Tech Stack
React
Bootstrap
JSON

Concept Used
Props
State lifting
useState
useEffect
React Router
Axios
HttpMethods
Drag and Drop method

*Developement Process *

First drawn a layout of the project i want to do in paper , can also draw figma

Then installed React Router and properly assigned where all pages are navigated , used useNavigate for that

Then created components and pages

then started the backend of the project with JSON server , json server is a lightweight and simple tool that allows you to quickly set up a RESTful API server using a JSON file as a data source.

then created services folder and in that created allAPI.js and commonApi,js and serverURl.js

AllApi consits of all the api methods consists of https methods PUT,GET,POST,DELETE etc

Commonapi.js consists of body of the data to be stored in the backend

serverUrl is the url of the backend

After these things the backend is setted by created another separate folder

used db.json to store the backend data

in the backend index.js is there there json server configuration code for backend is written

then assigned the functions such as Link , delete,onClick on the components and pages