Logo

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

Next.js React TypeScript TailwindCSS GSAP

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

• 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

1. Clone the repository

   git clone https://github.com/yourusername/project-4.git
   cd project-4

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

4. Open your browser

   Navigate to http://localhost:3000 to see the application.

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.

Deploy with Vercel

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
2. Import your project to Vercel
3. Vercel will automatically detect Next.js and configure the build settings
4. 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 #0a0a0a as 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

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 ☕