Project 2 - Marketing Homepage
Marketing Homepage - Overview
The Marketing Homepage (fda-website-marketing-homepage) is the public-facing Next.js site for Flagship Design Academy. It showcases courses, categories, combo courses, instructors, testimonials, and supports cart and checkout flows.
What This Project Does
- Public pages: Home, About Us, Courses, Categories, Combo courses, Instructors, Testimonials, FAQ, Google Reviews, Verify Certification, Privacy/Refund policies.
- Auth (lightweight): Login, Register, PIN, Forgot PIN (can align with Admin Panel auth).
- Commerce: Cart, checkout; course and combo course purchase flows.
- Content: Courses and categories can be fetched from the Admin Panel API or from static/fallback data.
Tech Stack
- Framework: Next.js 16+ (App Router)
- UI: React 19, Tailwind CSS 4, Headless UI, Heroicons, Motion
- Data: Optional
pgfor DB; primary content from API (NEXT_PUBLIC_API_BASE_URL) or static files insrc/data/ - Cart: React Context (
CartContext) for cart state
Key Areas
| Area | Description |
|---|---|
| Courses | List and detail pages; can use Admin Panel public API or courses.ts / courses-api.ts |
| Categories | Category list and category-specific course listing; categories.ts or categories-api.ts |
| Combo courses | Pre-built and custom combo builder; pricing in utils/comboPricing.ts |
| Instructors | Instructor list and profile pages; data from data/instructors.ts or API |
| Cart & checkout | Add to cart, cart page, checkout; integrates with backend for orders/payments |
| Auth | Login, register, PIN, forgot PIN (typically same phone+PIN as Admin Panel) |
| Verify certification | Public form to verify a certificate |
Project Structure (High Level)
src/app/– Routes:page.tsx(home),courses/,categories/,combo-courses/,cart/,checkout/,instructors/,about-us/,testimonials/,faq/, etc.src/app/(auth)/–login/,register/,pin/,forgot-pin/src/components/– Reusable UI (Header, Footer, CourseCard, CartIcon, etc.)src/context/–CartContext.tsxsrc/data/– Static and API-based data modules (courses.ts,courses-api.ts,categories.ts,categories-api.ts,blogs.ts, etc.)src/lib/–api.ts(API client for Admin Panel)src/utils/– e.g.comboPricing.ts
Related Documentation
- Installation & Quick Start – Install and run locally
- API Integration – Connect to Admin Panel for courses/categories/blogs
- Pages & Features – Main routes and behavior
- Environment & Config – Env vars and deployment