A community of coders, making the world a better place. Learn, build, and grow with the best developers in the industry.
Features • Tech Stack • Getting Started • Project Structure • Challenges • Deployment
This project is a premium, modern learning platform designed to revolutionize the way developers learn and grow. Built with cutting-edge technologies, it offers an immersive, interactive experience with award-worthy animations and a sleek dark-themed UI.
The platform serves as a comprehensive hub for:
- 📚 Structured Learning — Access to curated courses and roadmaps
- 💬 Instant AI Assistance — Get help from an intelligent coding assistant
- 🎯 Interactive Coding Environment — Practice in real-time with live coding exercises
- 👥 Community Support — Join a private Discord community of like-minded developers
- 🏆 Gamified Progress — Track your learning journey with leaderboards
| Component | Description |
|---|---|
| Navigation | Modern, responsive header with smooth animations and mobile-first design |
| Hero Section | Captivating intro with gradient typography, animated scroll indicators, and embedded video dialog |
| Stop Buying Section | Compelling value proposition with animated feature cards |
| Instant Help | AI-powered chat interface with real-time typing animations |
| Interactive Coding Environment | Live code editor showcase with syntax highlighting |
| Reviews/Testimonials | Social proof section with user testimonials |
| Learning Path | Visual curriculum roadmap with animated progress indicators |
| Pricing | Tiered subscription plans with monthly/yearly toggle |
| FAQ | Accordion-style frequently asked questions with Radix UI |
| Mentor Portfolio | Instructor profiles and credentials showcase |
| Contact | Professional contact form with validation |
| Footer | Comprehensive site navigation and social links |
- Login Page — Sleek, animated sign-in form with social auth options
- Signup Page — User registration with form validation
- Leaderboard — Gamified progress tracking and ranking system
- Roadmap — Personalized learning paths and course progression
- Next.js 16 — React framework with App Router, RSC, and Server Actions
- React 19 — Latest React with concurrent features and improved performance
- TypeScript 5 — Type-safe development with strict mode enabled
- Tailwind CSS 4 — Utility-first CSS with JIT compilation
- Radix UI — Accessible, unstyled UI primitives (Accordion, Label, Slot)
- Lucide React — Beautiful, consistent icon library
- tw-animate-css — Pre-built animation utilities
- GSAP 3.14 — Professional-grade animation library for complex sequences
- Motion (Framer Motion) — Declarative animations and gestures
- Lenis — Butter-smooth scrolling experience
- clsx — Utility for constructing className strings
- class-variance-authority — Type-safe component variants
- tailwind-merge — Smart Tailwind class merging
Ensure you have the following installed:
- Node.js 18.17 or higher
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/yourusername/project-4.git cd project-4 -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev # or bun dev
-
Open your browser
Navigate to http://localhost:3000 to see the application.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Create optimized production build |
npm run start |
Start production server |
npm run lint |
Run ESLint for code quality |
project-4/
├── 📂 app/
│ ├── 📂 component/ # Feature-based components
│ │ ├── 📂 Hero/ # Hero section
│ │ ├── 📂 Nav/ # Navigation/Header
│ │ ├── 📂 pricing/ # Pricing cards
│ │ ├── 📂 reviews/ # Testimonials
│ │ ├── 📂 FAQ/ # FAQ accordion
│ │ ├── 📂 Contact/ # Contact form
│ │ ├── 📂 Footer/ # Site footer
│ │ ├── 📂 instant-help/ # AI chat interface
│ │ ├── 📂 interactive-coding-environment/
│ │ ├── 📂 leader-board/ # Leaderboard component
│ │ ├── 📂 mentor-portfolio/
│ │ ├── 📂 other-section/ # Curriculum path
│ │ ├── 📂 roadmap/ # Learning roadmap
│ │ ├── 📂 stop-buying/ # Value proposition
│ │ ├── 📂 log-in-page/ # Login form
│ │ └── 📂 sign-up-page/ # Signup form
│ │
│ ├── 📂 hooks/ # Custom React hooks
│ ├── 📂 providers/ # Context providers (GSAP, Smooth Scroll)
│ ├── 📂 login/ # Login route
│ ├── 📂 signup/ # Signup route
│ ├── 📂 leaderboard/ # Leaderboard route
│ ├── 📂 roadmap/ # Roadmap route
│ │
│ ├── 📄 layout.tsx # Root layout with providers
│ ├── 📄 page.tsx # Home page
│ └── 📄 globals.css # Global styles & Tailwind config
│
├── 📂 components/
│ └── 📂 ui/ # Reusable UI components (shadcn/ui style)
│
├── 📂 lib/ # Utility functions
├── 📂 public/ # Static assets
│
├── 📄 next.config.ts # Next.js configuration
├── 📄 tailwind.config.ts # Tailwind CSS configuration
├── 📄 tsconfig.json # TypeScript configuration
├── 📄 vercel.json # Vercel deployment config
└── 📄 package.json # Dependencies and scripts
Challenge: Coordinating multiple GSAP timeline animations across different components while maintaining smooth 60fps performance.
Solution: Implemented component-scoped GSAP contexts using gsap.context() with proper cleanup in useEffect return statements. This prevents memory leaks and ensures animations don't conflict between route changes.
useEffect(() => {
const ctx = gsap.context(() => {
// Animation code here
}, sectionRef);
return () => ctx.revert(); // Proper cleanup
}, []);Challenge: Integrating Lenis smooth scrolling with GSAP ScrollTrigger while avoiding jank and maintaining native scroll feel.
Solution: Created a dedicated SmoothScrollProvider that wraps the app and synchronizes with GSAP's ticker for seamless integration:
// Sync Lenis with GSAP
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});Challenge: Creating realistic, conversation-like animations for the AI chat interface example cards that feel natural and engaging.
Solution: Implemented staggered delays and typing indicators with precise timing to simulate authentic chat behavior, including visual "waiting" states.
Challenge: Ensuring animations look polished across all device sizes without performance degradation on mobile.
Solution: Utilized responsive GSAP matchMedia queries and reduced animation complexity on smaller viewports while maintaining visual appeal.
Challenge: Managing the "use client" directive effectively in Next.js 16 App Router while leveraging server components where possible.
Solution: Carefully structured components to maximize server-rendered content, using client components only for interactive/animated sections. Providers are isolated for clean separation.
The project is optimized for deployment on Vercel.
- Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
- Import your project to Vercel
- Vercel will automatically detect Next.js and configure the build settings
- Deploy! 🎉
No environment variables are required for the base deployment. Future integrations may require:
- Database credentials
- Authentication provider keys
- API endpoints
This project follows these design principles:
- 🌙 Dark Mode First — Modern, eye-friendly dark theme with
#0a0a0aas the base - ✨ Micro-interactions — Subtle animations that bring the UI to life
- 📱 Mobile Responsive — Fully adaptive layouts from 320px to 4K displays
- ♿ Accessibility — Semantic HTML, ARIA labels, and keyboard navigation
- ⚡ Performance — Optimized bundle sizes, lazy loading, and efficient rendering
| Color | Hex | Usage |
|---|---|---|
| Background | #0a0a0a |
Main background |
| Surface | #0d0d0d |
Cards, containers |
| Primary | Amber gradient | CTAs, highlights |
| Text Primary | #ffffff |
Headlines |
| Text Secondary | #8a8a8a |
Body, descriptions |
| Text Muted | #6a6a6a |
Subtle text |
This project is private and proprietary.
Souvik Karfa
- Portfolio: Click Here
- GitHub: @souvikkarfa
- LinkedIn: Souvik Karfa
⭐ If you found this project helpful, please consider giving it a star!
Made with ❤️ and lots of ☕