🔹 Welcome to the Web Development Internship Project Portal
This updated portal is designed to provide hands-on, practical experience in Frontend, Backend, and Full Stack Development aligned with industry standards.
You are required to complete tasks module-wise and submit them as per instructions.
💼 Project Title:
Create Full Stack E-Commerce Website using React JS
🎯 Objective:
Build a complete full-stack E-Commerce web application using React JS for frontend and backend integration with database support.
📌 Project Requirements
🔹 Frontend (React JS)
- Create responsive homepage
- Product listing page
- Product detail page
- Add to Cart functionality
- Login / Signup page
- Checkout page
- Proper routing using React Router
- Use reusable components
🔹 Backend (Node.js / Express)
- Create REST APIs
- Handle user authentication
- Manage product data
- Manage cart & orders
🔹 Database (MongoDB / MySQL)
- Store user data
- Store product details
- Store order history
🛒 Must Include Features
✔ User Registration & Login
✔ Add / Remove from Cart
✔ Order Placement System
✔ Admin Panel (Add / Edit Products)
✔ Fully Responsive Design
✔ Clean UI/UX
✅ Task 1: Project Setup & React Installation
🎯 Objective:
Set up the development environment and initialize React project.
🔹 To Do:
🎥 Watch Session 1 : https://drive.google.com/file/d/166083zHPtBkJb8kgI1vvx4XP-p3C91YH/view?usp=sharing
📝 Notes on:
- What is React JS
- Node.js & npm
- Project folder structure
- Components concept
📌 Mini Practice:
- Install Node.js
- Create React app
- Run project successfully
- Clean unnecessary default files
✅ Task 2: Create Homepage UI
🎯 Objective:
Design the homepage layout.
🔹 To Do:
🎥 Watch Session 2 : https://drive.google.com/file/d/166083zHPtBkJb8kgI1vvx4XP-p3C91YH/view?usp=sharing
📝 Notes on:
- JSX
- Components
- CSS styling
- Navbar & Footer creation
📌 Mini Practice:
- Create Navbar
- Create Hero section
- Create Footer
- Make layout responsive
✅ Task 3: Product Listing Page
🎯 Objective:
Display products dynamically.
🔹 To Do:
🎥 Watch Session 3 : https://drive.google.com/file/d/10ZDOg8I7TuM96xSFTLdjxNg5-iw5hQ4A/view?usp=sharing
📝 Notes on:
- Props
- useState
- Mapping arrays
📌 Mini Practice:
- Create product card component
- Display multiple products
- Add price & image
✅ Task 4: Product Details & Routing
🎯 Objective:
Implement routing and product detail page.
🔹 To Do:
🎥 Watch Session 4: https://drive.google.com/file/d/1dfyutMjtK5VvRbhgvtBq6qPcegPU7emc/view?usp=sharing
📝 Notes on:
- React Router
- useParams
- Dynamic routes
📌 Mini Practice:
- Create Product Detail page
- Show product info dynamically
✅ Task 5: Cart Functionality
🎯 Objective:
Implement Add to Cart system.
🔹 To Do:
🎥 Watch Session 5 : https://drive.google.com/file/d/1dfyutMjtK5VvRbhgvtBq6qPcegPU7emc/view?usp=sharing
📝 Notes on:
- useState / useContext
- Cart logic
- Local storage
📌 Mini Practice:
- Add to Cart button
- Remove from Cart
- Display total price
✅ Task 6: Backend & Database Integration
🎯 Objective:
Connect frontend with backend and database.
🔹 To Do:
🎥 Watch Session 6 : https://drive.google.com/file/d/1-BJZyIX2GlOlSw-Ews1uzWpasb5ssgc9/view?usp=sharing
📝 Notes on:
- Node.js & Express
- REST API
- MongoDB connection
📌 Mini Practice:
- Create product API
- Fetch products in React
- Store user data
✅ Task 7: Authentication & Order System
🎯 Objective:
Implement login system and order placement.
🔹 To Do:
🎥 Watch Session 7 : https://drive.google.com/file/d/1bzi8u-LbrdrXMFmZQr3wU0VitOGWuRZx/view?usp=sharing
📝 Notes on:
- User registration
- Login system
- JWT authentication
- Order API