Checkout Video here to understand Ecommerce Project

Roadmap : https://youtu. StartDate 9/4/2023

Design Reference
be/MgjoIqZYGAo https://websitedemos.net/organic-shop-02/

Deadline
Number of
Topics Preferred Resource Tasks To Do days
(Set According
To Start Date)

PREREQUISITES : HTML,
Learn HTML, CSS, JS from here : https://parikh.club/react-frontend
CSS, JAVASCRIPT

REACT ROADMAP

States & Components

Introduction to JSX Preferred Resource States:

2 9/6/2023 0:00:00
Props Preferred Resource - Understand the difference between component state and props.
- Create stateful components to handle dynamic data (e.g., a product's
quantity, the shopping cart's items, etc.).
Components Preferred Resource - Implement interactive UI elements that modify the state, such as toggling 2 9/8/2023 0:00:00
a product's favorite status or adjusting the product quantity in the cart.

Functional Components Preferred Resource Components: 2 9/10/2023 0:00:00

- Break down the application UI into reusable components.

- Create component hierarchies for:
Conditional Rendering Preferred Resource 1. Product Listings (including Product Cards)
2. Product Details
3.Shopping Cart & Cart Items 2 9/12/2023 0:00:00
4. Checkout Process (address, payment, confirmation screens)
JSX in Depth Preferred Resource 5. User Profile (if there's user authentication)

Hooks
useState:
Basics Of Hooks Preferred Resource Use this to manage local state in functional components, like product 1 9/13/2023 0:00:00
quantity selection or toggle display details.
useEffect:
useState() Preferred Resource Use this to fetch products from an API, or for any side-effects that should 2 9/15/2023 0:00:00
run after rendering (e.g., setting document title, sending analytics).
useContext:
useEffect Preferred Resource To manage global app state such as the user's shopping cart or user status 3 9/18/2023 0:00:00
(logged in/out).

Rules of Hooks Preferred Resource

Custom Hooks:
Create custom hooks for repetitive logic, such as fetching products, 3 9/21/2023 0:00:00
managing cart operations, etc.
Custom Hooks Preferred Resource

Routing & State Management

React Router Preferred Resource

Routing:

- Set up client-side routing using react-router-dom or use Next.js’s built-in

useReducer Preferred Resource routing if you decide to integrate it earlier. 3 9/24/2023 0:00:00
- Implement routes for:
1. Homepage/Product Listing
Redux States, Actions and 2. Individual Product Detail
Preferred Resource
Reducers 3. Shopping Cart
4. Checkout Process
5. User Profile/Login/Register
Concepts Of Redux Preferred Resource

State Management:

- Decide on a state management approach, be it Context API, Redux,

Mobx, or any other state management library. 4 9/28/2023 0:00:00
Async Logic and Data Fetching - Set up the store, actions, reducers (or equivalent entities).
Preferred Resource
in Redux - Implement actions for:
1. Adding/removing products from the cart
2. Adjusting product quantity in cart
3. User authentication (login, register, logout)
4. Fetching products from an API

Next JS

1. Setup and Configuration: Initialize a Next.js project and understand its

Intro To Next JS Preferred Resource directory structure.
2. Pages: Convert the routes from your React application to Next.js pages
in the /pages directory. 3 10/1/2023 0:00:00
3. API Routes: Set up API routes in Next.js for backend operations (if you
want a monolithic structure).
Next js vs React Preferred Resource
Checkout Video here to understand Ecommerce Project
Roadmap : https://youtu. StartDate 9/4/2023
Design Reference
be/MgjoIqZYGAo https://websitedemos.net/organic-shop-02/

Deadline
Number of
Topics Preferred Resource Tasks To Do days
(Set According
To Start Date)

Server Side Rendering Preferred Resource 4. Static Generation & Server Side Rendering: Use getStaticProps and
getServerSideProps for product pages where appropriate.
5. Dynamic Imports: Implement dynamic imports for better code splitting 4 10/5/2023 0:00:00
and faster page loads.
Data Fetching Preferred Resource

Hot Reloading Preferred Resource 6. Custom App & Document: Customize the overall layout or include global
styles.
4 10/9/2023 0:00:00
7. Deployment: Learn how to deploy a Next.js app, either on platforms like
Image Optimization Preferred Resource Vercel or any other hosting service.
 Checkout Video here to understand Social Media Project
Roadmap : https://youtu. StartDate 9/4/2023
Design Reference
be/MgjoIqZYGAo https://online-communities.demos.buddyboss.com/

Deadline
Number of
Topics Preferred Resource Tasks To Do days
(Set According
To Start Date)

PREREQUISITES : HTML,
Learn HTML, CSS, JavaScript from here : https://parikh.club/react-frontend
CSS, JAVASCRIPT

REACT ROADMAP

States & Components

Introduction to JSX Preferred Resource

States:
2 9/6/2023 0:00:00
Props Preferred Resource - Understand the use of states for forms (e.g., post creation, comments,
profile updates).
- Implement states for UI components like modal popups, toggling a post's
Components Preferred Resource liked status, etc. 2 9/8/2023 0:00:00

Functional Components Preferred Resource Components: 2 9/10/2023 0:00:00

- Break down the UI into reusable components such as:

Conditional Rendering Preferred Resource 1. Post Card (including content, likes, comments, etc.)
2. Comment Component
3. User Profile Card 2 9/12/2023 0:00:00
4. Friend/Follower List
JSX in Depth Preferred Resource 5. Chat/Message Component

Hooks

Basics Of Hooks Preferred Resource

useState: 1 9/13/2023 0:00:00
Handle local state for things like toggling UI elements, forms, etc.
useEffect:
useState() Preferred Resource Fetch user's posts, notifications, messages, or any side-effects after 2 9/15/2023 0:00:00
rendering.
useContext:
Manage global app states such as the user's session, current profile view,
useEffect Preferred Resource 3 9/18/2023 0:00:00
theming, etc.

Rules of Hooks Preferred Resource

Custom Hooks:
For operations like fetching a user's posts, sending a message, liking a 3 9/21/2023 0:00:00
post, etc.
Custom Hooks Preferred Resource

Routing & State Management

React Router Preferred Resource

Routing:

- Implement client-side routes or use Next.js’s built-in routing.

useReducer Preferred Resource - Routes might include: 3 9/24/2023 0:00:00
1. User timelines
2. Specific post views
Redux States, Actions and 3. Direct Messages/Chats
Preferred Resource
Reducers 4. User profiles
5. Notification page
6. Settings page
Concepts Of Redux Preferred Resource

State Management:
- Choose a state management solution suitable for a social media app
(Context API, Redux, Mobx, etc.).
- Set up the store, actions, reducers. 4 9/28/2023 0:00:00
- Implement actions for:
Async Logic and Data Fetching
Preferred Resource 1. Creating, editing, deleting posts
in Redux
2. Liking/unliking posts
3. Adding/removing friends or followers
4. Sending and receiving messages
5. User authentication

Next JS

Intro To Next JS Preferred Resource 1. Setup and Configuration: Initialize your Next.js project.
2. Pages: Convert routes from your React application to Next.js pages.
3 10/1/2023 0:00:00
3. API Routes: If you opt for a monolithic structure, set up API routes in
Next.js for backend operations.
Next js vs React Preferred Resource
Checkout Video here to understand Social Media Project
Roadmap : https://youtu. StartDate 9/4/2023
Design Reference
be/MgjoIqZYGAo https://online-communities.demos.buddyboss.com/

Deadline
Number of
Topics Preferred Resource Tasks To Do days
(Set According
To Start Date)

Server Side Rendering Preferred Resource 4. Static Generation & Server Side Rendering: Determine which pages or
data can be statically generated.
4 10/5/2023 0:00:00
5. Dynamic Imports: Improve load times by splitting your code.
Data Fetching Preferred Resource

Hot Reloading Preferred Resource 6. Custom App & Document: Customize your global styles and overall
layouts.
4 10/9/2023 0:00:00
7. Deployment: Understand how to deploy a Next.js app, especially if you
Image Optimization Preferred Resource include real-time features.
 Checkout Video here to understand OTT Platform Project
Roadmap : https://youtu. StartDate 9/4/2023
Design Reference
be/MgjoIqZYGAo https://wordpress.iqonic.design/product/wp/streamit/

Deadline
Number of
Topics Preferred Resource Tasks To Do days
(Set According
To Start Date)

PREREQUISITES : HTML,
Learn HTML, CSS, JavaScript from here : https://parikh.club/react-frontend
CSS, JAVASCRIPT

REACT ROADMAP

States & Components

Introduction to JSX Preferred Resource

States: 2 9/6/2023 0:00:00
Props Preferred Resource
- Handling media playback state (play, pause, forward, rewind, volume).
- Managing user preferences (subtitles, playback speed, quality).
Components Preferred Resource - Capturing user feedback on content (like, dislike, rating). 2 9/8/2023 0:00:00

Functional Components Preferred Resource Components: 2 9/10/2023 0:00:00

1. Video Player Component (with controls like play, pause, volume,

Conditional Rendering Preferred Resource subtitles).
2. Content Catalog (List of movies, series, episodes).
3. Search Component. 2 9/12/2023 0:00:00
4. User Profile & Settings.
JSX in Depth Preferred Resource 5. Recommendation Cards.

Hooks
useState:
Basics Of Hooks Preferred Resource Manage local states like volume level, current playback time, selected 1 9/13/2023 0:00:00
quality, etc.
useState() Preferred Resource
useEffect: 2 9/15/2023 0:00:00
Fetch content lists, user history, recommendations, etc.
useEffect Preferred Resource
useContext: 3 9/18/2023 0:00:00
Manage global states such as user session, themes, or favorite lists.

Rules of Hooks Preferred Resource

Custom Hooks:
For interactions like searching, getting recommendations, and handling 3 9/21/2023 0:00:00
playback.
Custom Hooks Preferred Resource

Routing & State Management

React Router Preferred Resource

Routing:

useReducer Preferred Resource Implement routes for: 3 9/24/2023 0:00:00

1. Homepage (with recommendations, trending, etc.)
2. Individual content detail (with episodes for series)
Redux States, Actions and 3. Search results
Preferred Resource 4. User profile & settings
Reducers
5. Categories or genres
6. Playlists or user's saved lists
Concepts Of Redux Preferred Resource

State Management:

- Decide on a state management strategy (Redux, Mobx, Context API). 4 9/28/2023 0:00:00
- Set up actions for:
Async Logic and Data Fetching
Preferred Resource 1. User authentication and profile management
in Redux
2. Content playback and history
3. User feedback (likes, ratings)
4. Content search and filtering

Next JS

Intro To Next JS Preferred Resource 1. Setup and Configuration: Initialize your OTT project with Next.js.
2. Pages: Convert the routes from your React application to Next.js pages.
3. API Routes: Set up API routes for user interactions, content 3 10/1/2023 0:00:00
management, analytics, etc..
Next js vs React Preferred Resource

4. Static Generation & Server Side Rendering: Determine which parts of the
Server Side Rendering Preferred Resource platform can benefit from static generation (e.g., static pages like "About
Us" or "Help").
4 10/5/2023 0:00:00
5. Dynamic Imports: Split your code for better performance, especially for
rarely used features.
Checkout Video here to understand OTT Platform Project
Roadmap : https://youtu. StartDate 9/4/2023
Design Reference
be/MgjoIqZYGAo https://wordpress.iqonic.design/product/wp/streamit/

4. Static Generation & Server Side Rendering: Determine which parts of the Deadline
Number of
Topics Preferred Resource Tasks
platform can benefit from static To Do
generation (e.g., static pages like "About days
(Set According
Us" or "Help"). To Start Date)
4 10/5/2023 0:00:00
5. Dynamic Imports: Split your code for better performance, especially for
Data Fetching Preferred Resource rarely used features.

Hot Reloading Preferred Resource

6. Custom App & Document: Customize the global layout and styles.
7. Deployment: Ensure you have a robust hosting solution that can handle 4 10/9/2023 0:00:00
streaming services' bandwidth requirements.
Image Optimization Preferred Resource
 Personal Portfolio

Design Reference
Checkout Video here to understand
Roadmap : https://youtu. https://themewagon.github.
be/MgjoIqZYGAo io/devfolio/ StartDate 9/4/2023
Deadline
Number of (Set According
Topics Preferred Resource Tasks To Do days To Start Date)

PREREQUISITES : HTML,
CSS, JAVASCRIPT Learn HTML, CSS, JavaScript from here : https://parikh.club/react-frontend

REACT ROADMAP

States & Components

Introduction to JSX Preferred Resource States:

- Managing active navigation links.

Props Preferred Resource 2 9/6/2023 0:00:00
- Handling modals or pop-ups for contact forms or project
details.
- Toggling between light and dark mode, if you plan to
Components Preferred Resource implement themes. 2 9/8/2023 0:00:00

Components:
Functional Components Preferred Resource 2 9/10/2023 0:00:00
- Navigation Bar.
- Home/Introduction section.
Conditional Rendering Preferred Resource - About Me section (short biography, skills).
- Projects or Work showcase (cards or sliders).
- Experience or Resume section (timeline or list format).
- Contact Form.
JSX in Depth Preferred Resource - Footer (with links to social profiles and resume download). 2 9/12/2023 0:00:00

Hooks
useState:
Manage local states for modals, active links, theme toggles,
and possibly interactive animations or transitions.
Basics Of Hooks Preferred Resource 1 9/13/2023 0:00:00
useEffect:
If you have any side effects, like fetching testimonials or posts
useState() Preferred Resource dynamically. 2 9/15/2023 0:00:00
useContext:
For shared states, such as theme information (light or dark
useEffect Preferred Resource mode). 3 9/18/2023 0:00:00

Rules of Hooks Preferred Resource Custom Hooks:

For common functionalities you might want to abstract, like
form submission logic or fetching blog posts from an API if you
Custom Hooks Preferred Resource have a blog section. 3 9/21/2023 0:00:00

Routing & State Management

Routing:

React Router Preferred Resource - Single-page vs Multi-page: Decide if you want a single-page
scrollable portfolio or separate routes for different sections. For
single-page portfolios, consider using libraries like react-scroll
useReducer Preferred Resource for smooth scroll behavior.
- If multi-page, implement routes for:
Redux States, Actions and 1. Home
Reducers Preferred Resource 2. Projects/Work 3 9/24/2023 0:00:00
3. Blog (if you have one)
4. Contact
Concepts Of Redux Preferred Resource Any other sections you want to emphasize separately

A personal portfolio might not need an extensive state management library

like Redux, given its likely simplicity. However, you may use:

Async Logic and Data Fetching React's Context API: If you want to manage global states like themes.
in Redux Preferred Resource useState and useReducer: For local state management in components. 4 9/28/2023 0:00:00

Next JS

1. Setup and Configuration: Initialize a Next.js project and understand its

directory structure.
2. Pages: Convert the routes from your React application to Next.js pages
Intro To Next JS Preferred Resource in the /pages directory.
3. API Routes: Set up API routes in Next.js for backend operations (if you
want a monolithic structure).
3 10/1/2023 0:00:00
 Personal Portfolio

Design Reference
Checkout Video here to understand
Roadmap : https://youtu. https://themewagon.github.
be/MgjoIqZYGAo io/devfolio/
1. Setup and Configuration: Initialize a Next.js project and understand its
StartDate 9/4/2023
directory structure. Deadline
2. Pages: Convert the routes from your React application to Next.js pages Number of (Set According
Topics Preferred Resource in Tasks To
the /pages Do
directory. days To Start Date)
3. API Routes: Set up API routes in Next.js for backend operations (if you
want a monolithic structure).
Next js vs React Preferred Resource 3 10/1/2023 0:00:00

4. Static Generation & Server Side Rendering: Use getStaticProps and

Server Side Rendering Preferred Resource getServerSideProps for product pages where appropriate.
5. Dynamic Imports: Implement dynamic imports for better code splitting
and faster page loads.
Data Fetching Preferred Resource 4 10/5/2023 0:00:00

Hot Reloading Preferred Resource 6. Custom App & Document: Customize the overall layout or include global
styles.
7. Deployment: Learn how to deploy a Next.js app, either on platforms like
Image Optimization Preferred Resource Vercel or any other hosting service. 4 10/9/2023 0:00:00