🚀 DevLearn

A Premium Learning Platform for Developers & Programming Students

📖 About The Project

DevLearn is a modern, fast, and highly interactive online educational platform built with React and Vite. It serves as a unified hub where developers can find comprehensive courses, insightful articles, and connect with top instructors in fields like Web Development, AI, Data Structures, and more.

Key Features

• 📚 Expansive Course Catalog: Explore premium courses ranked by popularity, rating, and student count.
• ✍️ Tech Blog Integration: Read the latest technical articles, tutorials, and tech news directly on the platform.
• 👨‍🏫 Instructor Profiles: Dive deep into the portfolios of renowned instructors, their social links, and associated courses.
• 🔐 Secure Dashboard: (Protected Routes) A personalized learning hub to track your enrolled courses and saved blogs.
• ⚡ Blazing Fast Performance: Powered by Vite, lazy-loaded routes, and optimized component rendering.
• 📱 Responsive UI: Fully mobile-responsive implementation leveraging Tailwind CSS.
• 🎨 Smooth Animations: Fluid page transitions and micro-interactions constructed with Framer Motion.
• 🔍 SEO Optimized: Fully configured sitemap.xml and robots.txt out of the box.

🛠️ Tech Stack

Client:

• ⚛️ React 18
• ⚡ Vite
• 🛣️ React Router DOM (v6)
• 💅 Tailwind CSS
• 🎬 Framer Motion

Other Tools:

• 🛡️ React Helmet Async (for SEO headers)
• 🧊 UI Icons (Lucide React)

🚀 Running Locally

Follow these steps to run the project on your local machine.

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

1. Clone the repository

   git clone https://github.com/Devanshi-Vadiya/DevLearn.git

2. Navigate to the project directory

   cd DevLearn

3. Install the dependencies

   npm install

   or if you are using yarn/pnpm:

   yarn install

4. Start the development server

   npm run dev

5. Open your browser and navigate to http://localhost:5173.

📁 Folder Structure

📦 src
 ┣ 📂 assets         # Static assets (images, svg vectors)
 ┣ 📂 components     # Reusable UI components (Navbar, CourseCard, Footer)
 ┣ 📂 data           # Hardcoded dummy JSON data (courses, blogs, instructors)
 ┣ 📂 layouts        # Wrapper generic layouts (MainLayout, DashboardLayout)
 ┣ 📂 pages          # Individual page views (Home, Courses, Blogs, etc.)
 ┃ ┗ 📂 dashboard    # Protected dashboard pages
 ┣ 📂 routes         # Routing configuration mapping (AppRoutes)
 ┣ 📜 App.css        # Root application styles
 ┣ 📜 index.css      # Tailwind configuration & global CSS rules
 ┗ 📜 main.jsx       # React application mounting point

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.

_{Built with ❤️ by Devanshi}