SkillSnap Learning - Project Overview

Project Information

Project Name: SkillSnap Learning
Version: 0.1.0
Type: Educational EdTech Platform
Description: India's leading online learning platform for Class 6-10 students combining school academics with future tech skills like coding.
Domain: https://www.skillsnaplearning.com

Tech Stack

Core Framework & Language

Framework: Next.js 16.1.1 (App Router)
Language: TypeScript 5
Runtime: React 19.2.3 with React DOM 19.2.3

Styling & UI

CSS Framework: Tailwind CSS 4 (@tailwindcss/postcss)
PostCSS: PostCSS 4
Animation Library: Framer Motion 12.23.26 (for motion animations)
Icons: Lucide React 0.562.0 (SVG icon library)
Image Optimization: Next.js Image component

Fonts

System Fonts: Geist Sans, Geist Mono (via next/font/google)
Google Fonts:
- Poppins (weights: 400, 500, 600, 700, 800)
- Montserrat (weights: 400, 500, 600, 700, 800)

Analytics & Third-Party

Google Analytics: @next/third-parties/google
Structured Data: Schema.org JSON-LD

Development Tools

Linter: ESLint 9
Module System: ES Module (esm)
Path Alias: @ (maps to root directory)

Project Structure

Directory Layout

root/
├── app/                          # Next.js App Router directory
├── webinar/                     # Webinar registration pages
│   ├── page.tsx                # Main registration page
│   └── success/
│       └── page.tsx            # Success/thank you page
│   ├── layout.tsx               # Root layout with metadata, fonts, analytics
│   ├── page.tsx                 # Homepage (1292 lines - main landing page)
│   ├── globals.css              # Global styles with CSS variables & Tailwind
│   ├── sitemap.ts               # SEO sitemap.xml generator
│   ├── curriculum.tsx           # Curriculum data (2056 lines - Class 6-10 subjects)
│   ├── faqs-data.tsx            # FAQ data structure
│   ├── parents/                 # Parent-facing pages
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── students/                # Student-facing pages
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── privacy-policy/          # Legal pages
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── terms-of-use/
│       ├── layout.tsx
│       └── page.tsx
├── components/                   # Reusable React components
│   ├── AppDownload.tsx          # App store download section
│   ├── LearningJourney.tsx      # Learning journey visualization
│   └── StructuredData.tsx       # Schema.org JSON-LD components
├── lib/                         # Utility functions & API calls
│   └── api.js                   # Backend API integration
├── public/                      # Static assets
│   ├── robots.txt              # SEO robots.txt
│   └── documents/              # Public documents directory
├── package.json                 # Dependencies & scripts
├── tsconfig.json               # TypeScript configuration
├── next.config.ts              # Next.js configuration
├── eslint.config.mjs           # ESLint configuration
├── postcss.config.mjs          # PostCSS configuration
└── README.md                   # Project documentation

Theme Colors & Styling

Color Palette

The project uses Tailwind CSS utility classes with these primary colors:

Primary Colors

Blue (Dark Navy): bg-blue-950, text-blue-900
- Primary CTA buttons, hero sections
- Hex: #0c2d5c (approximate)
Orange/Amber: bg-orange-500, text-orange-600
- Accent color for highlights, badges, gradients
- Gradient animations: Orange → White → Orange
- Hex: #f97316 (approximate)
Purple & Pink: bg-purple-100, bg-pink-100, text-purple-500
- Gradient backgrounds, decorative elements
- Hero section gradients

Secondary Colors

White: bg-white, #ffffff
Gray Shades: text-gray-800, bg-gray-100, border-gray-100
Blue Variations: bg-blue-900, bg-blue-200, text-blue-200

Color System Structure

/* From globals.css - CSS Variables */
:root {
  --background: #ffffff;      /* Light mode background */
  --foreground: #171717;      /* Light mode text */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;    /* Dark mode background */
    --foreground: #ededed;    /* Dark mode text */
  }
}

Styling Approach

Utility-First: Tailwind CSS classes directly in JSX/TSX
Responsive Design: Mobile-first (sm:, md:, lg: breakpoints)
Dynamic Gradients: Framer Motion with CSS gradient animations
Backdrop Blur: backdrop-blur-sm, backdrop-blur-md for glass morphism effects
Shadows: Custom shadows on cards and sections
Rounded Corners: Consistent border radius (rounded-xl, rounded-full, rounded-lg)

Component Styling Pattern

/* Example from AppDownload.tsx */
<section className="bg-blue-950 py-24 overflow-hidden relative">
  {/* Decorative blurred circles */}
  <div className="absolute top-0 right-0 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl"></div>
  
  {/* Main content with max-width container */}
  <div className="max-w-7xl mx-auto px-6 relative z-10">
    {/* Responsive grid layout */}
    <div className="grid lg:grid-cols-2 gap-12 items-center">
      {/* Content here */}
    </div>
  </div>
</section>

Indexing Technique (SEO)

1. Sitemap Generation (sitemap.ts)

Automatic XML sitemap at /sitemap.xml:

- https://www.skillsnaplearning.com (priority: 1, weekly)
- /students (priority: 0.8, monthly)
- /parents (priority: 0.8, monthly)
- /privacy-policy (priority: 0.3, yearly)
- /terms-of-use (priority: 0.3, yearly)

2. Metadata Management (layout.tsx)

export const metadata: Metadata = {
  title: {
    default: "SkillSnap Learning | Online Classes for Class 6-10 | Academics + Coding",
    template: "%s | SkillSnap Learning"
  },
  description: "India's leading online learning platform...",
  keywords: [
    "online classes for class 6",
    "online tuition class 7",
    "online coaching class 8",
    "online classes class 9",
    "online tuition class 10",
    "coding classes for kids",
    "CBSE online classes",
    "ICSE online tuition",
    "math online classes",
    "science online tuition",
    "programming for students",
    "ed-tech India"
  ],
  authors: [{ name: "SkillSnap Learning Pvt Ltd" }]
}

3. Structured Data (JSON-LD)

From StructuredData.tsx:

Organization Schema:

{
  "@context": "https://schema.org",
  "@type": "EducationalOrganization",
  "name": "SkillSnap Learning",
  "url": "https://www.skillsnaplearning.com",
  "logo": "https://www.skillsnaplearning.com/skillsnaplogotransparent.png",
  "sameAs": [
    "https://www.facebook.com/profile.php?id=61586000617763",
    "https://www.instagram.com/skillsnaplearning",
    "https://www.linkedin.com/company/110972038",
    "https://www.youtube.com/channel/UCgdNjvZRmcMK5dgc0sv6Q-w"
  ]
}

Course Schema:

{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Class 6-10 Academic + Coding Program",
  "provider": { "@type": "Organization", "name": "SkillSnap Learning" },
  "educationalLevel": "Secondary Education"
}

4. Google Analytics Integration

Integrated via @next/third-parties/google in root layout
Tracks user interactions and page views

5. URL Structure

Root: / (Homepage)
Segments: /students, /parents
Legal: /privacy-policy, /terms-of-use
Auto-generated: /sitemap.xml, /robots.txt

Code Structure & Patterns

Component Architecture

1. Page Components (Client-Side)

'use client';  // Client Component directive

import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
import dynamic from 'next/dynamic';
import { [Icons] } from 'lucide-react';

export default function PageName() {
  return (
    <div className="min-h-screen bg-white font-poppins text-gray-800">
      {/* Navbar */}
      {/* Hero Section */}
      {/* Content Sections */}
      {/* Footer */}
    </div>
  );
}

2. Reusable Components Pattern

/* Example: FadeIn Animation Component */
const FadeIn = ({ children, delay = 0 }: { children: React.ReactNode, delay?: number }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6, delay }}
  >
    {children}
  </motion.div>
);

3. Data-Driven Components

/* curriculum.tsx - Large data structure with subjects, icons, colors, and details */
export const CURRICULUM_DATA: Record<string, any> = {
  "Class 6": [
    {
      subject: "Mathematics",
      tagline: "Building Strong Maths Foundations the Fun Way",
      icon: Calculator,
      color: "text-blue-700",
      bg: "bg-blue-100",
      summary: [...],
      details: [...]
    },
    // More subjects...
  ],
  "Class 7": [...],
  // More classes...
};

4. Dynamic Component Loading

/* From page.tsx - Code-splitting with Framer Motion loading state */
const LearningJourney = dynamic(() => import('@/components/LearningJourney'), {
  loading: () => (
    <div className="py-24 bg-white border-t border-gray-100">
      <div className="animate-pulse">
        {/* Skeleton loader */}
      </div>
    </div>
  ),
  ssr: false  // Client-side only
});

Layout Hierarchy

Root Layout (app/layout.tsx)

Metadata configuration
Font imports (Geist, Poppins, Montserrat)
Global stylesheets
Google Analytics
Children pages

Page-Specific Layouts

Students page layout
Parents page layout
Legal pages layout
Each with custom navbars and content

State Management

React Hooks: useState, useRef, useCallback, useEffect
Framer Motion: useMotionValue, useTransform for dynamic animations
No global state library (Redux, Zustand) - component-level state only

Animation Patterns

/* Reusable Framer Motion patterns */
<motion.div
  initial={{ opacity: 0, y: 20 }}      // Starting state
  whileInView={{ opacity: 1, y: 0 }}   // Trigger on view
  viewport={{ once: true }}            // Only animate once
  transition={{ duration: 0.6, delay }} // Timing
/>

/* Scroll-triggered animations */
animate={{ y: [0, -15, 0], rotate: [0, 5, 0] }}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}

API Integration Pattern

/* From lib/api.js - Form submission pattern */
import { submitContactForm } from '@/lib/api';

// Usage in page component:
const handleSubmit = async (data) => {
  await submitContactForm(data);
};

Image Optimization

<Image 
  src="/skillsnaplogotransparent.png" 
  alt="SkillSnap Logo" 
  width={300}
  height={150}
  className="h-[150px] w-auto object-contain"
  priority  // For above-fold images
/>

Key Design Principles

1. Performance

Dynamic imports for heavy components
Image optimization via Next.js
Code splitting with next/dynamic
CSS-in-JS with Tailwind for minimal bundle

2. Accessibility

Semantic HTML structure
ARIA labels on interactive elements
Keyboard navigation support
Color contrast compliance

3. Responsiveness

Mobile-first Tailwind classes
Grid layouts with lg: breakpoints
Flexible spacing with py, px utilities
Hidden elements on mobile (hidden md:flex)

4. SEO

Meta tags and descriptions
JSON-LD structured data
XML sitemap
Canonical URLs
Open Graph metadata (can be added)

5. User Experience

Smooth animations with Framer Motion
Loading states with skeleton screens
Fast feedback on interactions
Intuitive navigation

Standard Component Template

Webinar Pages:

/webinar - Free webinar registration
/webinar/success?id=xxx - Registration confirmation

For Creating New Pages Similar to Existing Ones

'use client';

import React, { useState, useCallback } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { [RelevantIcons] } from 'lucide-react';

// Reusable animation wrapper
const FadeIn = ({ children, delay = 0 }: { children: React.ReactNode, delay?: number }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    whileInView={{ opacity: 1, y: 0 }}
    viewport={{ once: true }}
    transition={{ duration: 0.6, delay }}
  >
    {children}
  </motion.div>
);

export default function PageName() {
  const [state, setState] = useState(false);

  return (
    <div className="min-h-screen bg-white font-poppins text-gray-800">
      {/* Fixed Navbar */}
      <nav className="fixed top-0 w-full bg-white/60 backdrop-blur-md z-50 border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          {/* Logo & Nav Links */}
        </div>
      </nav>

      {/* Hero Section with Gradient */}
      <section className="relative pt-32 pb-20 overflow-hidden bg-gradient-to-b from-purple-50 via-pink-50 to-white">
        <div className="absolute top-0 right-0 -mr-20 w-[500px] h-[500px] bg-purple-100 rounded-full blur-3xl opacity-40 pointer-events-none" />
        
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <FadeIn>
            {/* Main heading and content */}
          </FadeIn>
        </div>
      </section>

      {/* Content Sections */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <FadeIn>
            {/* Section content with Tailwind classes */}
          </FadeIn>
        </div>
      </section>

      {/* CTA Section (usually blue-950 with orange accents) */}
      <section className="bg-blue-950 py-24 text-white">
        {/* CTA content */}
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-16">
        {/* Footer content */}
      </footer>
    </div>
  );
}

Implementation Checklist for New Pages

Color Quick Reference for New Pages

Primary CTA:        bg-blue-950 text-white
Accent Highlight:   text-orange-600 / bg-orange-500
Section Divider:    border-gray-100
Gradient Hero:      from-purple-50 via-pink-50 to-white
Decorative Blur:    bg-[color]/10 rounded-full blur-3xl
Button Hover:       hover:scale-105 transition-transform
Text Color:         text-gray-800 (dark), text-gray-900 (darker)

Contact & Metadata

Organization: SkillSnap Learning Pvt Ltd
Phone: +91-9217374255
Email: info@skillsnaplearning.com
Location: New Delhi, India

Social Links:

Facebook: facebook.com/profile.php?id=61586000617763
Instagram: @skillsnaplearning
LinkedIn: linkedin.com/company/110972038
YouTube: youtube.com/channel/UCgdNjvZRmcMK5dgc0sv6Q-w

Last Updated: January 2026
Project Version: 0.1.0
Framework Version: Next.js 16.1.1

FilesExpand file tree

PROJECT_OVERVIEW.md

Latest commit

History