FULL-STACK WEB DEVELOPMENT PROJECTS/ROADMAP

No.	FRONTEND	No.	BACKEND
1.	HTML	8.	Node JS
2.	CSS	9.	Express JS
3.	JavaScript	10.	Rest API
4.	React JS	11.	Mongo DB
5.	Redux ToolKit	12.	MERN
6.	FIREBASE	13.	MERN PROJECTS
7.	TypeScript	14.	Next JS

---

Download Resources / Projects

Download Resources	Projects
Link	Link

---

FRONTEND PROJECTS

HTML CSS PROJECTS

1. Survey Form
2. Login Form
3. News Website
4. Technical documentation Page
5. Youtube Clone
6. Ecommerce Website

JAVASCRIPT PROJECTS

1. Clock
2. JS Calculator
3. News Website
4. JS Guess the color game
5. To-Do list
6. Productive app
7. Quiz game
8. Browser code editor

TailwandCSS, ReactJS, ReduxToolkit, Firebase_PROJECTS

1. QR_code_Generatoe
2. BackgroundChanger, React carousel
3. CodePen Editor Clone
4. Image Background Remover
5. Video Calling web App
6. Movie Searching
7. Weather App
8. ReeactJs and Firebase Authentication
9. React Firebase CRUD Application
10. React Blog Project
11. React News Project
12. Netflix Clone
13. React and Firebase E-commerce Project
14. Advance Quiz web app
15. Portfolio Project

Full Stack Web-Development RoadMap (MERN)

FRONTEND

HTML

1. Introduction
2. Hml Structure
3. Heading
4. Container
5. Div tag
6. Span tag
7. pre tag
8. p tag
9. text formating tag
10. code tag
11. list
12. table
13. media
14. forms
15. links
16. semantic element

CSS

1. Introduction
2. Hml id and class Attributes
3. Three way to add css to html
4. Css Selectors
5. Colors And background
6. Css Box Model
7. Fonts And Display
8. Size, Position and Lists
9. Flex box
10. Css grid and media queries
11. Transform, Transition and Animation

JAVASCRIPT

No	Topics	No	Topics
1.	JavaScript Introduction	26.	JavaScript Array Methods
2.	JavaScript Where To	27.	JavaScript Array Search
3.	JavaScript Output	28.	JavaScript Sorting Arrays
4.	JavaScript Statements	29.	JavaScript Array Iteration
5.	JavaScript Syntax	30.	JavaScript Array Const
6.	JavaScript Comments	31.	JavaScript Date Objects
7.	JavaScript Variables	32.	JavaScript Math Object
8.	JavaScript Let	33.	Javascript Random
9.	JavaScript Var	34.	JavaScript Booleans
10.	JavaScript Const	35.	JavaScript Comparison and Logical Operators
11.	JavaScript Operators	36.	JavaScript if, else, else if, and Switch
12.	JavaScript Arithmetic	37.	JavaScript Loop [For, For In,For Of, While Loop]
13.	JavaScript Assignment	38.	JavaScript Maps
14.	JavaScript Data Types	39.	JavaScript typeof
15.	JavaScript Functions	40.	JavaScript Type Conversion
16.	JavaScript Objects	41.	JavaScript Errors
17.	JavaScript Events	42.	JavaScript Modules
18.	JavaScript Strings	43.	JavaScript JSON
19.	JavaScript String Methods	44.	JS Async
20.	JavaScript String Search	45.	JavaScript Local Storage
21.	JavaScript Template Strings
22.	JavaScript Numbers
23.	JavaScript Number Methods
24.	JavaScript Number Properties
25.	JavaScript Arrays

Tailwind CSS

1.TailwindCss Introduction

1. TailwindCss Fonts & Sizing
2. TailwindCss Margins, Padding & Borders
3. TailwindCss Background Color : 43:36
4. TailwindCss Square Bracket Notation
5. Creating Responsive Designs
6. Creating Hover, Focus & Other States
7. Creating @apply directive in Tailwind
8. Creating Customizing Tailwind CSS using tailwind.config.js file
9. Flex Box

React Js

1. React Introduction
2. React Setup
3. JavaScript Refresher
4. React JSX
5. React Components
6. React Props
7. ReactJs Events
8. React Conditional Rendering
9. React Lists Rendering
10. React Router
11. React Css Styling
12. React Hook Introduction
13. React useState Hook
14. React useEffect Hook
15. React useReducer Hook
16. React useMemo Hook
17. React callback Hook
18. React Context Api Hook
19. React useRef Hook
20. React Fetch Api
21. React Fetching data using axios
22. React Animation
23. Protected Routes In React Js
24. Upload Images To cloudinary in React Js

Redux Toolkit

1. What is Redux
2. To understand Redux, you must understand the “one-way data flow”
3. known as unidirectional data flow.
4. Why Use Redux
5. Install Redux Toolkit and React-Redux
6. Create a Redux Store
7. Provide the Redux Store to React
8. Create a Redux State Slice
9. Add Slice Reducers to the Store
10. Use Redux State and Actions in React Components
11. Get And Update state in Redux Store
12. -> useSelector
13. -> useDispatch
14. Redux Dev Tool
15. Create Ecommerce Cart System [ Data Manage ]

Firebase

1. Introduction
2. Features of Firebase
3. -> Authentication
4. -> Cloud Firestore
5. -> Hosting
6. -> Storage
7. -> Firebase Cloud Messaging(FCM)

TypeScript

1. TypeScript Introduction
2. TypeScript Getting Started
3. TypeScript Simple Types
4. TypeScript Special Types
5. TypeScript Arrays
6. TypeScript Tuples
7. TypeScript Object Types
8. TypeScript Enums
9. TypeScript Type Aliases and Interfaces
10. TypeScript Union Types
11. TypeScript Functions
12. TypeScript Casting
13. TypeScript Classes
14. TypeScript Basic Generics
15. TypeScript Utility Types
16. TypeScript Keyof
17. TypeScript Null & Undefined
18. to Use TypeScript with React
19. Getting Started
20. React and TypeScript Basics
21. Three Ways of Defining Prop Types
22. #How to Create a Random Users List Application
23. How to Store the Users List in State
24. How to Display the Users on the Ul
25. How to Create a Separate User Component
26. How to Create a Separate File for Type Declarations
27. How to Display a Loading Indicator
28. How to Load Users on Button Click
29. How to Handle the Change Event

---

FRONTEND --- TOP

---

BACKEND

Node JS

1. Nodes Introduction
2. Node.js Get Started
3. Node.js Modules
4. Node.js HTTP Module
5. Node js File System Module
6. Node.js URL Module
7. Node.js NPM
8. Node.js Events
9. Node.js Upload Files
10. Node.js Send an Email

Express JS

1. Express js Introduction
2. Install Express.js
3. Express.js Request Object
4. Express.js GET Request
5. Express.js POST Request
6. Express.js Routing
7. Express.js Cookies Management
8. Express.js File Upload
9. Express.js Middleware
10. Express.js Scaffolding

Rest API

• A RESTful API is an architectural style for an application program interface (API)that uses HTTP requests to access and use data. That data can be used to GET, PUT, POST and DELETE data types, which refers to the reading, updating, creating and deleting of operations concerning resources.

Mongo DB

1. Node.js MongoDB
2. Creating a Database
3. Create Collection
4. MongoDB Insert
5. MongoDB Find
6. MongoDB Query
7. MongoDB Sort
8. MongoDB Delete
9. MongoDB Drop
10. MongoDB Update
11. MongoDB Limit
12. MongoDB Join

---

FRONTEND --- BACKEND --- TOP

---

MERN

1. Mern Stack Introduction
2. Frontend and Backend Folder Setup
3. eNoteBook database and express Server Setup
4. Creating Routes & Schema
5. Storing Data into the Database Using Mongoose Model
6. Creating a Special database Name
7. Creating ThunderClient Collections to Manage Requests
8. Creating Signup EndPoint
9. Understanding Password Hashing, Salt
10. Hashing Passwords using bcryptjs in NodeJs
11. Creating Login EndPoint
12. Creating a middleware to decode user from a JWT
13. Creating Endpoints for get All notes and Add Note in notes.js
14. Updating an existing Note
15. Creating Endpoint for deleting a Note
16. Creating Endpoint for Get Notes by Id
17. Integrate all APIs with frontend

MERN STACK PROJECT IDEAS

Features	1. Travel Log App	Features	2. Public blog App
1.	Browse the travel experiences of other people	1.	Login/Signup to the application
2.	Ad their own experience	2.	Create articles
3.	Travellers can add multiple factors to an experience	3.	View a List of all the articles
4.	Location	4.	Edit/Delete his/her articles
5.	Images of the Location	5.	Add categories, tags, and filters to list blog page
6.	Cost of Travel	6.	Follow other articles’ authors
7.	Heritages of the location	7.	Favorite/like articles
8.	Places to Visit	8.	Add comments to the articles

Features	3. Workout Tracker App	Features	4. Real-time Chat App
1.	Access a wide range of exercise options	1.	Login/Signup to access the application
2.	Add your own set of exercises	2.	Invite people to use emails
3.	Add your weekly/daily schedule	3.	Create chat rooms
4.	The view of the workout routine of others	4.	Add one-on-one chat with other users
5.	As workout-related queries through a forum

5. E-Commerce Website

• A user-facing application
• An admin dashboard for managing products
• Users can do the following things on this application.
• Login/Register for visit application
• Browse through different products
• Filter products based on category, price, etc
• Like/review products
• Add them to the cart/wish list
• Edit/Delete his/her account
• Admin can do the following tasks on the admin dashboard:
• Add/list products
• Update product details, quantity, etc.
• View list of all the users
• Block/unblock a particular user

6. Bookstore Library & Stock Keeping app

1. User Interface
2. Admin Interface

Users registered for this application can:

• Browse books from the library
• Filter them based on category, author, publications, etc
• Pay & Rent them for a specific duration
• Like/Review them

Admin of this application can:

• List/manage books
• Track rented books and their availability.
• Send notifications via email to users once the lease expires.

7.Hospital Management App

• View a list of doctors from different specialty
• View available surgeries/therapies options
• Schedule an appointment at a particular time
• View application progress status
• Get medical reports

This will help doctors to :

• View their appointments
• Show their availability for the hospital
• Track the patient's application status

8. Video Conferencing App/Website

1. Video/Audio Conferencing It's essential that all communication, including whiteboard doodling so that others can see your point/opinion, texting, emoting, etc, takes place in real-time (you may use Socket.io for it).
2. Video-recording

9.Personal Project Management Tool

---

Next JS

---

MERN --- FRONTEND --- BACKEND --- TOP

---