Udemy Clone

A fully functional e-commerce course platform clone built with React — featuring category browsing, detailed course pages, and a persistent shopping cart powered by Context API + useReducer.

Udemy.mp4

🚀 View Live Demo

🎯 About

Udemy Clone is a React SPA that replicates the core UI and shopping experience of the Udemy platform. Users can browse courses by category, view detailed course pages with ratings, syllabi and instructor info, add items to a cart, and proceed to checkout — all with a persistent cart that survives page refreshes via localStorage.

The project was built to practice advanced React patterns, specifically global state management with Context API and useReducer, client-side routing with dynamic parameters, and component styling with Styled Components.

✨ Key Features

• 🏠 Home Page — Hero slider, featured course list, and category grid
• 📂 Category Filtering — Dynamic route per category rendering filtered course cards
• 📖 Single Course Page — Full course detail view: description, star rating, syllabus, what you'll learn, pricing and add-to-cart
• 🛒 Shopping Cart — Add, remove and clear items, with total price calculation
• 💾 Persistent Cart — Cart state is saved to localStorage and restored on page load
• 📱 Responsive Layout — CSS Grid breakpoints from 1 to 4 columns adapting to screen size
• 🎠 Hero Carousel — Auto-play image slider built with react-slick

🛠️ Tech Stack

Frontend:

• React 18 — Component architecture, hooks (useState, useEffect, useReducer, useContext)
• React Router DOM v6 — Multi-page routing with dynamic segments (/courses/:id, /category/:category)
• Styled Components v6 — Component-scoped CSS-in-JS styling with theming variables
• React Slick — Hero banner carousel
• React Icons — Icon library used across UI elements

State Management:

• Context API — Three isolated contexts: CartContext, CoursesContext, SidebarContext
• useReducer — Predictable state transitions for cart operations and course data

Build Tool:

• Vite — Fast dev server and optimized production build

🚀 Quick Start

# Clone the repository
git clone https://github.com/Luan-Neumann-Dev/udemy.git
 
# Navigate to project
cd udemy
 
# Install dependencies
npm install
 
# Start the dev server
npm run dev

Then open http://localhost:5173 in your browser.

Or visit the live demo →

📁 Project Structure

udemy/
├── src/
│   ├── components/         # Reusable UI components
│   │   ├── Navbar.jsx      # Top bar with cart badge and sidebar toggle
│   │   ├── Sidebar.jsx     # Mobile navigation drawer
│   │   ├── Hero.jsx        # Homepage banner carousel
│   │   ├── Course.jsx      # Course card (used in lists)
│   │   ├── CourseList.jsx  # Featured courses section
│   │   ├── CategoriesList.jsx
│   │   ├── CartItem.jsx    # Single item row in cart
│   │   ├── StarRating.jsx  # Visual star rating component
│   │   ├── Tabs.jsx
│   │   ├── Loader.jsx
│   │   └── Footer.jsx
│   ├── pages/              # Route-level page components
│   │   ├── HomePage.jsx
│   │   ├── CoursesPage.jsx     # Filtered by category
│   │   ├── SingleCoursePage.jsx
│   │   └── CartPage.jsx
│   ├── context/            # Global state providers
│   │   ├── cartContext.jsx
│   │   ├── coursesContext.jsx
│   │   └── sidebarContext.jsx
│   ├── reducers/           # Pure reducer functions
│   │   ├── cartReducer.js
│   │   ├── coursesReducer.js
│   │   └── sidebarReducer.js
│   ├── utils/
│   │   ├── data.js         # Static course dataset
│   │   ├── images.js       # Centralized image imports
│   │   └── constants.js
│   └── actions.js          # Action type constants

💡 Technical Highlights

Context API + useReducer for Global State

Instead of prop drilling, all shared state is managed through three independent contexts. Each follows the same pattern: a context, a provider with useReducer, and a custom hook for consumption.

// Dispatching a cart action
const addToCart = (courseID, image, course_name, creator, discounted_price, category) => {
    dispatch({ type: ADD_TO_CART, payload: {
        courseID, image, course_name, creator, discounted_price, category
    }})
}

localStorage Cart Persistence

The cart initializes from localStorage and syncs on every state change via useEffect, so items survive full page reloads without any backend.

const loadCartFromStorage = () => {
    let cart = localStorage.getItem('cart');
    return cart ? JSON.parse(cart) : [];
}
 
useEffect(() => {
    dispatch({ type: GET_CART_TOTAL })
    localStorage.setItem('cart', JSON.stringify(state.cart))
}, [state.cart])

Duplicate Prevention in Cart Reducer

Before adding an item, the reducer checks for an existing entry by ID — preventing duplicates without needing extra UI logic.

if (action.type === ADD_TO_CART) {
    const exists = state.cart.filter(item => item.courseID === action.payload.courseID);
    if (exists.length < 1) {
        return { ...state, cart: [...state.cart, action.payload] }
    }
    return { ...state }
}

📚 What I Learned

Technical Skills:

• Structuring multiple useReducer + Context patterns in a scalable, non-overlapping way
• Managing derived state (total items, total amount) reactively inside a reducer
• Using Styled Components for component-scoped styling with CSS variables and media queries
• Navigating dynamic routes with useParams to fetch and display contextual data

Best Practices:

• Centralizing all action type strings in a single actions.js file to avoid typos
• Separating data-fetching/state logic (context + reducers) from presentational components
• Handling empty states gracefully (empty cart page with redirect CTA)

🗺️ Roadmap

• Search bar with real-time course filtering
• Wishlist feature
• Checkout flow with order summary
• Course ratings filterable on category page
• Migrate static data to a mock REST API (e.g. JSON Server)

📝 Notes

• All course data is static — stored locally in src/utils/data.js
• Not affiliated with Udemy, Inc. This is a frontend practice project

📄 License

MIT License - see LICENSE for details.

👤 Author

Luan Neumann

• LinkedIn: luan-neumann-dev
• GitHub: @Luan-Neumann-Dev

---

⭐ Found this helpful? Give it a star!