Week 1 – Spread, Rest, Array Methods Basics

Drills:

Merge two arrays using spread.

Copy an array without affecting the original (spread).

Combine two objects into one (spread).

Write a function sum(...nums) to sum unlimited numbers (rest).

Filter numbers greater than 10 from an array.

Map an array of numbers to their squares.

Reduce an array of prices to a total sum.

Find the maximum number in an array using reduce.

Remove duplicates from an array using spread & Set.

Convert an array of objects to an array of names using map.

Week 2 – Closures, Destructuring, Timers

Drills:

Write a closure-based counter (counter() → increment()).

Make a closure for private bank balance with deposit/withdraw functions.

Create a closure-based stopwatch (start, stop, reset).

Destructure [first, second] from an array.

Swap two variables using array destructuring.

Use destructuring with nested objects.

Use destructuring in function parameters.

Build a setInterval that stops after 5 seconds.

Countdown timer using setInterval.

Week 3 – Async/Await, Promises

Drills:

Create a function that returns a promise that resolves after 2 seconds.

Create a function that rejects after 3 seconds and handle with .catch.

Fetch data from a free API using fetch + then.

Fetch data from a free API using async/await.

Chain two API calls (fetch user → fetch posts).

Create multiple promises and resolve them with [Link].

Race two promises using [Link].

Convert a callback function to return a promise.

Handle API error and show fallback data.

Week 4 – API Data & Map Rendering

Drills:

Fetch an array of objects and map them into HTML cards.

Use destructuring to extract properties from each object.

Create a function that takes an array of movies and returns only titles.

Map numbers to their doubled values.

Map user objects to just usernames.

Map + filter together (movies with rating > 8).

Map + reduce to calculate total cost from product list.

Map array of strings to uppercase.

Map array of dates to formatted strings.

Map array of API data to clickable links.

Week 5 – Filter, Sort, Reduce

Filter numbers that are even.

Filter words longer than 5 letters.

Filter users older than 18.

Sort numbers ascending.

Sort strings alphabetically.

Sort objects by a numeric property.

Reduce numbers to a sum.

Reduce products to total cost.

Reduce to find max value.

Reduce to group items by category.

Week 6 – Closures + Drag & Drop

Drills:

Closure-based task list (add, remove tasks).

Closure for managing cart items.

Closure that counts how many times a function was called.

Make a drop zone that changes color on hover.

Store dragged element’s data using dataset.

Move element between two containers on drop.

Prevent default behavior on dragover.

Save dropped items to localStorage.

Load saved drag/drop state on refresh.

Week 7 – Nested Destructuring & API Integration

Drills:

Nested destructuring from API JSON.

Destructure an array inside an object.

Destructure with default values.

Destructure deep nested properties safely.

Fetch GitHub user and destructure name, bio, followers.

Map over user repos and destructure name & stars.

Use async/await to fetch and display repos.

Show loading & error states during fetch.

Cache fetched data in localStorage.

If you follow this —

Day 1–2: Drill sheet practice (don’t skip)

Day 3–7: Build the weekly project

By the end of Week 7, you’ll own ES6+ syntax, closures, promises, and array methods.

React

Learning Roadmap for Each Project

1. Weather Finder App

Goal: Fetch and display weather data based on user input.

Steps:

Setup

Create a React app (create-react-app or Vite).

Install Axios (npm install axios).

Basic UI
Create an input field and a search button.

Display weather data (temperature, humidity, conditions).

State Management

useState → Store city (input) and weatherData (API response).

API Fetching

useEffect → Call OpenWeather API when the city changes.

Axios → Make the HTTP request.

Optimizations

useCallback → Memoize the search function.

useMemo → Format temperature (e.g., Celsius to Fahrenheit).

Form Validation

Prevent empty searches.

Show error if city not found.

Bonus

useRef → Auto-focus input after search.

Goal: A todo app with add/delete functionality and filtering.

Steps:

Setup

Basic UI: Input, "Add" button, list of todos.

State Management

useState → todos (array) and filter (string: "All", "Completed", "Active").

Local Storage

useEffect → Load/save todos to localStorage.

Handlers

useCallback → Memoize addTodo, deleteTodo, toggleComplete.

Filtering

useMemo → Efficiently filter todos based on filter state.

Form Validation

Prevent empty todos.

Bonus
useRef → Auto-focus input after adding a todo.

Use Axios to sync with a mock API (e.g., JSON Server).

3. Movie Search App

Goal: Search for movies using OMDB API and display results.

Steps:

Setup

Install Axios.

Create a search input and results grid.

State Management

useState → searchTerm and movies (API response).

API Fetching

useEffect → Fetch movies when searchTerm changes (with debounce).

Axios → Call OMDB API.

Optimizations

useCallback → Memoize search handler.

useMemo → Sort movies by year/rating.

Require at least 3 characters before searching.

Bonus

useRef → Track previous search term.

4. Contact Form with Real-time Validation

Goal: A form with live validation and submission.

Steps:

Setup

Form fields: Name, Email, Message.

State Management

useState → formData (object) and errors (object).

Live Validation

useEffect → Validate on input change.

Custom validation or Yup schema.

Form Submission

Axios → POST data to a mock API.

useCallback → Memoize submit handler.

useRef → Focus first invalid field.

Bonus

Success/error messages after submission.

5. Expense Tracker

Goal: Track income/expenses with calculations.

Steps:

Setup

Form for adding transactions.

Display list, total balance, income, expenses.

State Management

useState → transactions (array).

Local Storage/API Sync

useEffect → Load/save transactions.

Calculations
useMemo → Compute total, income, expenses efficiently.

Handlers

useCallback → Memoize addTransaction, deleteTransaction.

Form Validation

Ensure amount is a valid number.

Bonus

useRef → Auto-focus input after adding.

Charts (using react-chartjs-2).

Final Challenge

After completing these 5 projects, try combining them into a Personal Dashboard App that includes:

Weather widget

Todo list

Expense tracker

Contact form

This will solidify your understanding of state management, hooks, and API integration in a real-world
scenario.

Would you like me to provide starter code or a GitHub repo for any of these? 🚀
New chat

Project

Here’s a prioritized list of features to build a fully functional e-commerce project from scratch,
ordered by importance (MVP → Advanced):

🚀 Phase 1: Core MVP (Weeks 1-2)

Must-have features to launch a basic store:

Product Catalog

Product listings (grid/list view)

Single product page (images, price, description)

Tech: [Link] dynamic routes (/products/[id])

Shopping Cart

Add/remove items

Quantity adjustment

Tech: Zustand/Context API + localStorage

Guest checkout (no auth required)

Stripe/Razorpay sandbox integration

Tech: [Link] API Routes + Stripe SDK

Basic UI/UX

Responsive design (Tailwind CSS)

Loading states

Tech: ShadCN UI for pre-built components

📈 Phase 2: User System (Weeks 3-4)

Essential for retention:

5. Authentication

Email/password + Google/GitHub login

Tech: [Link]

User Profiles

Order history

Saved addresses

Tech: PostgreSQL + Prisma

CRUD for products/orders

Tech: Protected routes (/admin)

⚡ Phase 3: Performance & SEO (Weeks 5-6)

Critical for scalability:

8. Pagination/Infinite Scroll

URL-synced pagination (/products?page=2)

Tech: useRouter + ISR ([Link])

Search & Filters

Debounced search

Price/category filters

Tech: Client-side filtering (or API-driven)

Optimizations

Image optimization (next/image)

ISR for product pages

🔥 Phase 4: Advanced Features (Weeks 7-8)

Competitive edge:
11. Real-Time Updates

- Stock alerts (WebSockets/Pusher)

- Tech: Ably/Supabase Realtime

AI Recommendations

"Customers also bought" (mock logic)

Tech: Mock API or OpenAI embeddings

Multi-Language (i18n)

[Link] internationalization

Tech: next-intl

Reviews & Ratings

Star ratings + user reviews

Tech: PostgreSQL relations

🎯 Phase 5: Polish & Launch (Week 9)

Deployment

Vercel (frontend) + Supabase (backend)

Tech: CI/CD (GitHub Actions)

Analytics
Google Analytics/Vercel Analytics

Tech: next/script

Error Handling

404/500 pages

Sentry for monitoring

📌 Feature Priority Cheatsheet

Priority Feature Why?

P0 Product List + Cart Bare minimum to sell

P0 Stripe Checkout Accept payments

P1 User Auth Repeat customers

P1 Admin Dashboard Manage inventory

P2 Search/Filters UX improvement

P3 Real-Time StockPrevent overselling

P4 AI Recommendations Increase average order value

⚡ Pro Tips

Start with mock data (no DB needed initially).

Use templates ([Link] Commerce, Vercel AI SDK).

Focus on mobile-first (60%+ traffic is mobile).

Need a step-by-week breakdown or code snippets for any feature? Let me know!

Here’s a detailed breakdown of all the features you’ll implement in your [Link] e-commerce project
(without AI), structured for clarity
📌 Core E-Commerce Features

1. User Authentication & Profiles

Signup/Login (Email + OAuth: Google, GitHub)

Role-Based Access Control (Admin, Vendor, Customer)

Profile Management (Order history, saved addresses, wishlist)

Password Reset & Email Verification

2. Product Management

Admin Dashboard (Add/Edit/Delete products)

Product Categories & Tags (Filterable taxonomies)

Inventory Tracking (Stock levels, low-stock alerts)

Product Variants (Sizes, colors, etc.)

High-Quality Image Gallery ([Link] Image optimization)

3. Shopping Cart & Checkout

Cart System (Local storage → DB sync after login)

Guest Checkout (No account required)

Coupon/Discount Codes

Multiple Payment Gateways (Stripe, PayPal)

Order Summary & Confirmation Emails (Nodemailer/Resend)

4. Search & Filtering

Instant Search (Debounced API queries)

Filters (Price range, ratings, attributes)

Sorting (Best-selling, newest, price high/low)

5. Multi-Vendor Support

Vendor Registration & Approval (Admin-moderated)

Vendor Dashboard (Manage products, orders, earnings)

Commission System (Admin takes % per sale)

6. Order & Shipping

Order Tracking (Status: Processing, Shipped, Delivered)

Shipping API Integration (FedEx/Shippo for real-time rates)

Return/Refund Management

7. Reviews & Ratings

Product Reviews (Star ratings + text)

Review Moderation (Admin approval to prevent spam)

📌 Performance & Optimization

8. [Link]-Specific Optimizations

ISR (Incremental Static Regeneration) for product pages

Dynamic Imports for heavy components (e.g., checkout)

CDN Caching for images (using Vercel/Cloudinary)

9. SEO & Analytics

SEO-Friendly URLs (/products/iphone-15)

[Link] Markup (Rich snippets in Google)

Google Analytics 4 (Track conversions, user flow)

10. Security

Rate Limiting (Prevent brute-force attacks)

CSRF Protection (Secure forms)

Data Sanitization (Prevent XSS/SQL injection)

📌 DevOps & Deployment

11. Database & Backend

PostgreSQL (Relational DB for transactions)

Prisma ORM (Type-safe queries)

Redis (Caching frequent queries)

12. CI/CD & Testing

GitHub Actions (Automated tests + deployment)

Cypress (E2E tests for checkout flow)

13. Deployment

Dockerized (For easy scaling)

Vercel (Primary deployment)

AWS/GCP Backup (Show multi-cloud familiarity)

📌 Bonus Features (For Resume Impact)

PWA (Progressive Web App) – Offline mode, installable

Dark Mode Toggle (CSS variables + context API)

Internationalization (i18n) (Next-Intl for multiple languages)

Accessibility (a11y) (WCAG-compliant UI)

Full-Stack Proof – Covers frontend, backend, DB, DevOps.

Scalability – Ready for enterprise-level traffic.

Real-World Relevance – Mirrors features of Shopify/Amazon.

Performance Focus – Critical for e-commerce success.