The official frontend for KKIT — Bangladesh's premium digital solutions and e-learning platform.
Expert-led courses · Portfolio showcase · Digital services · Blog · Payments · Certificates

---

✨ Features

• 🎓 Course Platform — Browse, enroll, and learn from expert-led courses
• 🏆 Certificates — Auto-generated PDF certificates on completion
• 💳 Payments — SSLCommerz, bKash & Stripe integration
• 📝 Blog — Full-featured blog with rich content
• 🎨 Portfolio — Showcase of KKIT's projects
• 🌙 Dark / Light Mode — Seamless theme switching
• ⚡ Animated UI — Framer Motion + GSAP micro-animations
• 🌐 3D Elements — Three.js + React Three Fiber scenes
• 📱 Fully Responsive — Mobile-first design
• 🔒 Auth — JWT-based with role-based access (user / admin)

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS v4 + shadcn/ui
State Management	Redux Toolkit + Zustand
Data Fetching	TanStack Query v5
Forms	React Hook Form + Zod
Animations	Framer Motion + GSAP
3D Graphics	Three.js + React Three Fiber
Charts	Recharts
Icons	Lucide React + React Icons
Fonts	Geist Sans + Geist Mono

---

📁 Project Structure

src/
├── app/                        # Next.js App Router
│   ├── (auth)/                 # Auth pages (login, register)
│   ├── (dashboard)/            # Dashboard (user & admin)
│   └── (main)/                 # Public pages
│       ├── page.tsx            # Home page
│       ├── courses/            # Courses listing & detail
│       ├── blog/               # Blog listing & posts
│       ├── services/           # Services page
│       ├── portfolio/          # Portfolio page
│       ├── about/              # About us
│       ├── team/               # Team page
│       ├── contact/            # Contact form
│       └── pricing/            # Pricing plans
├── components/
│   ├── ui/                     # shadcn/ui + custom primitives
│   │   ├── preloader.tsx       # Multilingual preloader animation
│   │   ├── preloader-wrapper.tsx
│   │   └── ...
│   ├── layout/                 # Header, footer, sidebar
│   ├── sections/               # Page sections (hero, features...)
│   ├── forms/                  # Form components
│   ├── cards/                  # Card variants
│   ├── animations/             # Animation wrappers
│   ├── navigation/             # Nav components
│   └── providers/              # React context providers
├── features/                   # Domain feature modules
├── hooks/                      # Custom React hooks
├── redux/                      # Store, slices, middleware
├── services/                   # API service layer
├── schemas/                    # Zod validation schemas
├── types/                      # TypeScript type definitions
├── constants/                  # App constants
├── data/                       # Static data
└── utils/                      # Helper utilities

---

🚀 Getting Started

Prerequisites

• Node.js >= 18
• pnpm >= 8 — npm i -g pnpm

Installation

git clone https://github.com/kkitbd/client-kkitbd.git
cd client-kkitbd
pnpm install
cp .env.local.example .env.local

Environment Variables

NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_SITE_URL=http://localhost:4000

Running

pnpm dev      # Development (port 4000)
pnpm build    # Production build
pnpm start    # Production server
pnpm lint     # Lint

---

🌐 Pages & Routes

Route	Description
/	Home page
/courses	Course catalog
/courses/[slug]	Course detail
/blog	Blog listing
/blog/[slug]	Blog post
/services	Services
/portfolio	Portfolio
/about	About KKIT
/team	Team members
/contact	Contact form
/pricing	Pricing plans
/dashboard	User dashboard

---

🤝 Contributing

Please read CONTRIBUTING.md before submitting a pull request.

---

📜 Code of Conduct

This project follows the Contributor Covenant v2.1.

---

🔒 Security

Found a vulnerability? Read SECURITY.md and report privately.

---

📄 License

Licensed under the GNU General Public License v3.0 — see LICENSE.

---

Made with ❤️ by KKIT Team · Bangladesh 🇧🇩