Component Architecture Overview

Component Architecture

EducaStream uses a component-based architecture built with React, organizing components into reusable, modular units. The application follows a clear separation between presentational components and page-level views.

Directory Structure

The component architecture is organized into two main directories:

src/
├── Components/       # Reusable UI components
│   ├── Button/
│   ├── Card/
│   ├── CardContainer/
│   ├── CardLayout/
│   ├── Carrousel/
│   ├── Cart/
│   ├── Footer/
│   ├── NavBar/
│   └── Loader/
└── views/           # Page-level components
    ├── Courses/
    ├── DetailCourse/
    ├── Student/
    ├── Instructor/
    ├── Layout/
    └── dashboard/

Component Categories

UI Components

Reusable components located in src/Components/ that handle specific UI functionality:

Button
Card
NavBar
Carrousel

Button ComponentA reusable button component with consistent styling and scroll-to-top functionality.

import Button from "./Components/Button/Button";

<Button 
  text="Click Me" 
  onClick={() => console.log('clicked')} 
/>

Props:

text (string) - Button label text
onClick (function) - Click handler function

Card ComponentDisplays course information in a card format with pricing, ratings, and actions.

import Card from "./Components/Card/Card";

<Card course={courseData} />

Props:

course (object) - Course data object containing:
- id - Course identifier
- title - Course title
- description - Course description
- price - Course price
- image - Course image URL
- category - Course category
- ratings - Array of rating objects
- lesson - Array of lesson objects
- onSale - Boolean for sale status
- percentageDiscount - Discount percentage

NavBar ComponentMain navigation component with user authentication state and responsive menu.

import NavBar from "./Components/NavBar/NavBar";

<NavBar />

Features:

Responsive mobile menu
User profile dropdown
Shopping cart integration
Authentication state handling
Context-aware navigation links

Carrousel ComponentImage carousel using react-responsive-carousel library.

import { Carrousel } from "./Components/Carrousel/Carrousel";

<Carrousel />

Configuration:

Auto-play enabled (5 second interval)
Fade animation
Infinite loop
No thumbnails or status display

Layout Components

CardContainer
CardLayout
Footer

CardContainer ComponentWrapper component for individual course cards.

import CardContainer from "./Components/CardContainer/CardContainer";

<CardContainer course={courseData} />

CardLayout ComponentAlternative card layout for course display with compact design.

import CardLayout from "./Components/CardLayout/CardLayout";

<CardLayout courses={courseData} />

Features:

Compact card design
Pricing with discount display
Context-aware purchase buttons
Shopping cart integration

Footer ComponentApplication footer with links and information.

import Footer from "./Components/Footer/Footer";

<Footer />

Includes:

Site navigation links
Team member LinkedIn profiles
Terms and privacy links
Copyright information

Utility Components

Loader
Cart

Loader ComponentLoading spinner for async operations.

import Loader from "./Components/Loader/Loader";

{isLoading && <Loader />}

Cart ComponentShopping cart functionality integrated into the navigation bar.

import Cart from "./Components/Cart/Cart";

<Cart />

Page-Level Views

Views are located in src/views/ and represent full pages:

Layout - Home page layout with course listings
Courses - Course catalog with filtering and pagination
DetailCourse - Individual course detail page
Student - Student dashboard
Instructor - Instructor dashboard
Dashboard - Admin dashboard
Login - Authentication page

Context Usage

Components utilize React Context for state management:

import { userContext } from "../../App";
import { useContext } from "react";

const MyComponent = () => {
  const userData = useContext(userContext);
  // Access user data across components
};

The userContext provides:

User authentication state
User profile information
Course purchase history
Role-based permissions

Component Communication

Props Down

Parent components pass data to children via props

Context

Global state shared via React Context

Cart Context

Shopping cart state managed separately

Navigation

React Router for page navigation

Best Practices

When creating new components in EducaStream:

Place reusable UI components in src/Components/
Create a dedicated folder for each component
Include a matching CSS module file
Export component as default
Use context for global state access
Implement prop validation where appropriate

Always use CSS modules for component styling to avoid naming conflicts. Each component should import its own .module.css file.

Development

Components

API Reference

Component Architecture Overview