Easy Learning

Why Should I Use This Template?

Welcome to EZ-Learning! This template is a modern, responsive web application built with React and Next.js, designed to provide an intuitive interface for browsing and accessing online courses.

It's built with the latest technologies to ensure a modern look and feel. Here are some reasons to consider it:

• Save Time: Save over 100 hours of work with a ready-made template.
• No Learning Curve: No need to learn complex animations or advanced setup.
• Easy Customization: Easily configure and make changes to match your brand.
• Quick Start: 1-click download and straightforward setup process.
• Fast Updates: Update text and images in under 5 minutes.
• Seamless Deployment: Deploy live to Vercel in just a few steps.

Features

• Course Catalog: Browse through a variety of courses
• Category Filtering: Filter courses by category
• Search Functionality: Search for courses by title, description, or tags
• Responsive Sidebar: Easy navigation with a collapsible sidebar
• Course Progress Tracking: Visual indication of course progress
• Detailed Course Pages: In-depth information about each course
• Video Lessons: Integrated video player for course content
• User Authentication: Login functionality for accessing courses

Project Structure

EZ-LEARNING/
├── .next/
├── app/
│   ├── buy-now/
│   ├── course-details/
│   │   └── [id]/
│   │       └── [title]/
│   ├── course-page/
│   ├── data/
│   ├── fonts/
│   ├── login/
│   ├── start-course/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   ├── sidebar.tsx
│   ├── start-course-header.tsx
│   └── start-course-sidebar.tsx
├── lib/
│   └── utils.ts
├── .eslintrc.json
├── .gitignore
├── components.json
├── next-env.d.ts
├── next.config.mjs
└── package-lock.json

Key Directories and Files

• app/: Contains the main application pages and routing structure
• components/: Reusable React components, including UI components
• lib/: Utility functions and helper modules
• layout.tsx: The main layout component for the application
• page.tsx: The main page component
• globals.css: Global styles for the application

Understanding the Code

Here's a brief overview of the main components and their functions:

CoursePage Component

This is the main component for displaying the course catalog. It includes:

• State management for sidebar visibility, selected category, and search query
• Filtering logic for courses based on category and search input
• Responsive design considerations

const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState("");

Sidebar Component

The Sidebar component handles the navigation and category filtering:

<Sidebar
  categories={categories}
  selectedCategory={selectedCategory}
  setSelectedCategory={setSelectedCategory}
  isSidebarOpen={isSidebarOpen}
  toggleSidebar={toggleSidebar}
/>

Course Card

Each course is displayed as a card with details like title, description, progress, and tags:

<div className="bg-white rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105">
  {/* Course image and details */}
</div>

Customization

To customize this template for your needs:

1. Update course data: Modify the courses array in app/data/courses.ts to include your own course information.
2. Styling: The project uses Tailwind CSS. You can adjust the styling by modifying the Tailwind classes or updating the tailwind.config.js file.
3. Add new pages: Create new pages in the app directory to add more functionality to your platform.
4. Integrate with a backend: Update the data fetching logic to pull course information from your own API or database.

Tech Stack

Quick Setup

1. 1-Click Download and Setup: Get started instantly with our easy setup process.
2. 5 Minutes to Update: Quickly update text and images to match your brand.
3. Deploy to Vercel: Easily deploy your site live with Vercel’s seamless integration.

Get started today and bring your website to life with minimal effort and maximum impact!