CodeSphere Academy 🚀

A modern Next.js 15 application where users can browse, search, and purchase courses. Built with cutting-edge technologies like TypeScript, Tailwind CSS, Firebase, Nodemailer, Stripe, Swiper Slider, and Context API. and React 19 features, Server and Client Components, and SEO metadata support.

Features ✨

1. Browse Courses:

   • List of curated courses with Swiper Slider for carousel navigation. 🎡
   • View course title, description, duration, and price. 📚

2. Search Courses:

   • Search bar with filtering by title, category, or instructor. 🔍
   • Real-time updates using Client Components. ⚡

3. Add Courses to Cart:

   • Cart functionality using Context API. 🛒
   • Cart persists across pages and sessions. 🧩

4. Purchase Courses:

   • Integrated with Stripe for secure checkout. 💳
   • Order confirmation via Nodemailer email. 📧

5. Authentication:

   • Firebase-based login/signup. 🔐
   • Auth-protected routes and personalized dashboard. 🛡️

6. Database:

   • Store and retrieve data from Firebase Firestore. 🗄️
   • Sync course purchases and user profiles.

7. Responsive Design:

   • Built with Tailwind CSS for a beautiful, responsive UI. 🎨

8. Dark Theme:

   • Toggle between dark/light mode. 🌞🌙
   • Theme stored in local storage for session persistence. 💾

9. SEO and Metadata:

   • Optimized with generateMetadata() in Next.js App Router for dynamic SEO. 🧠
   • Social previews, title tags, and descriptions are auto-generated. 📈

10. Server and Client Components:

    • Modular architecture using Next.js Server and Client Components. 🔀
    • Heavy data logic and rendering moved to Server Components for better performance.

11. React 19 Features:

    • Utilized useOptimistic for optimistic UI updates on checkout and course actions. ⚙️
    • useActionState for form submissions and state handling without boilerplate. 🧵

Tech Stack 🛠️

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Backend Services: Firebase (Auth, Firestore)
• Payments: Stripe
• Emailing: Nodemailer
• State Management: Context API + React 19 Hooks
• SEO: generateMetadata() from Next.js
• Routing: App Directory Structure (Server/Client Components)
• UX Enhancements: Swiper Slider, Dark Mode