Geometry Tutor Setup Guide

Complete step-by-step instructions for building an interactive geometry education application with Next.js 15 App Router, TypeScript, Tailwind CSS, and Framer Motion.

What This Skill Does

Guides you through creating a fully-featured geometry tutor application with:

Modular lesson structure (pythagorean theorem, triangles, circles, etc.)

Interactive demonstrations with visual proofs

Quiz system with progress tracking

User progress management with Zustand

Responsive design with Tailwind CSS

Smooth animations with Framer Motion

Instructions

Step 1: Initialize Next.js Project

Create a new Next.js 15 project with TypeScript and App Router:

```bash

npx create-next-app@latest geometry-tutor

cd geometry-tutor

```

Select these options when prompted:

TypeScript: **Yes**

ESLint: **Yes**

Tailwind CSS: **Yes**

`src/` directory: **Yes**

App Router: **Yes**

Customize import alias: **Yes** (use `@/*`)

Step 2: Install Required Dependencies

Install animation, state management, and UI libraries:

```bash

npm install framer-motion zustand @radix-ui/react-dialog @radix-ui/react-progress @radix-ui/react-tabs

npm install -D @tailwindcss/typography

```

**Key libraries:**

`framer-motion` - Smooth animations for interactive components

`zustand` - Lightweight state management for user progress

`@radix-ui/*` - Accessible UI primitives

`@tailwindcss/typography` - Beautiful typography styles

Step 3: Create Directory Structure

Generate the complete folder structure:

```bash

mkdir -p src/app/$auth$/login src/app/$auth$/register \

src/app/$dashboard$/progress src/app/$dashboard$/settings \

src/app/$dashboard$/modules \

src/components/ui src/components/modules \

src/components/layout src/components/shared \

src/lib src/hooks src/store \

public/images

```

**Structure breakdown:**

`(auth)` - Route group for login/register (no auth layout wrapper)

`(dashboard)` - Route group for main app with shared dashboard layout

`modules/[moduleId]` - Dynamic routes for lesson content

`components/modules` - Interactive geometry demonstrations

`store` - Zustand state management

Step 4: Configure Tailwind CSS

Update `tailwind.config.js` with custom theme:

```js

/** @type {import('tailwindcss').Config} */

module.exports = {

content: [

'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',

'./src/components/**/*.{js,ts,jsx,tsx,mdx}',

'./src/app/**/*.{js,ts,jsx,tsx,mdx}',

darkMode: 'class',

theme: {

extend: {

colors: {

primary: {

50: '#f0f9ff',

100: '#e0f2fe',

500: '#3b82f6',

600: '#2563eb',

700: '#1d4ed8',

secondary: {

500: '#8b5cf6',

600: '#7c3aed',

fontFamily: {

sans: ['var(--font-geist-sans)', 'system-ui', 'sans-serif'],

plugins: [require('@tailwindcss/typography')],

};

```

Step 5: Define TypeScript Types

Create `src/lib/types.ts` with core data types:

```typescript

export interface Module {

id: string;

title: string;

description: string;

difficulty: 'beginner' | 'intermediate' | 'advanced';

estimatedTime: string;

topics: string[];

}

export interface UserProgress {

moduleId: string;

completedLessons: string[];

quizScores: Record<string, number>;

lastAccessed: Date;

}

export interface QuizQuestion {

id: string;

question: string;

options: string[];

correctAnswer: number;

explanation: string;

}

```

Step 6: Create Module Constants

Create `src/lib/constants.ts` with module data:

```typescript

import { Module } from './types';

export const MODULES: Module[] = [

{

id: 'pythagorean-theorem',

title: 'Pythagorean Theorem',

description: 'Learn about right triangles and the relationship between their sides',

difficulty: 'beginner',

estimatedTime: '30 min',

topics: ['Right triangles', 'a² + b² = c²', 'Applications'],

{

id: 'triangle-properties',

title: 'Triangle Properties',

description: 'Explore types of triangles and their unique properties',

difficulty: 'beginner',

estimatedTime: '25 min',

topics: ['Types', 'Angles', 'Congruence'],

// Add more modules as needed

];

```

Step 7: Set Up Zustand Store

Create `src/store/user-progress-store.ts` for progress tracking:

```typescript

import { create } from 'zustand';

import { persist } from 'zustand/middleware';

import { UserProgress } from '@/lib/types';

interface ProgressStore {

progress: Record<string, UserProgress>;

completeLesson: (moduleId: string, lessonId: string) => void;

saveQuizScore: (moduleId: string, quizId: string, score: number) => void;

}

export const useProgressStore = create<ProgressStore>()(

persist(

(set) => ({

progress: {},

completeLesson: (moduleId, lessonId) =>

set((state) => ({

progress: {

...state.progress,

[moduleId]: {

...state.progress[moduleId],

completedLessons: [

...(state.progress[moduleId]?.completedLessons || []),

lessonId,

lastAccessed: new Date(),

})),

saveQuizScore: (moduleId, quizId, score) =>

set((state) => ({

progress: {

...state.progress,

[moduleId]: {

...state.progress[moduleId],

quizScores: {

...state.progress[moduleId]?.quizScores,

[quizId]: score,

lastAccessed: new Date(),

})),

}),

{ name: 'geometry-tutor-progress' }

)

);

```

Step 8: Create Dashboard Layout

Create `src/app/(dashboard)/layout.tsx`:

```typescript

import Link from 'next/link';

export default function DashboardLayout({

children,

}: {

children: React.ReactNode;

}) {

return (

Geometry Tutor

</Link>

Progress

</Link>

Settings

</Link>

</div>

</nav>

{children}

</main>

</div>

);

}

```

Step 9: Create Dashboard Homepage

Create `src/app/(dashboard)/page.tsx`:

```typescript

import { MODULES } from '@/lib/constants';

import Link from 'next/link';

export default function DashboardPage() {

return (

<div>

<h1 className="text-3xl font-bold mb-8">Your Geometry Modules</h1>

{MODULES.map((module) => (

<Link

key={module.id}

href={`/modules/${module.id}`}

className="bg-white rounded-lg shadow hover:shadow-lg transition p-6"

<h3 className="text-xl font-semibold mb-2">{module.title}</h3>

<p className="text-gray-600 mb-4">{module.description}</p>

{module.difficulty}

</span>

{module.estimatedTime}

</span>

</div>

</Link>

))}

</div>

);

}

```

Step 10: Create Module Detail Page

Create `src/app/(dashboard)/modules/[moduleId]/page.tsx`:

```typescript

import { MODULES } from '@/lib/constants';

import Link from 'next/link';

import { notFound } from 'next/navigation';

export default async function ModulePage({

params,

}: {

params: Promise<{ moduleId: string }>;

}) {

const { moduleId } = await params;

const module = MODULES.find((m) => m.id === moduleId);

if (!module) {

notFound();

}

return (

<div>

<h1 className="text-3xl font-bold mb-4">{module.title}</h1>

<p className="text-gray-600 mb-8">{module.description}</p>

<Link

href={`/modules/${moduleId}/lesson`}

className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"

<h3 className="text-xl font-semibold mb-2">📖 Lesson</h3>

<p className="text-gray-600">Read the theory and concepts</p>

</Link>

<Link

href={`/modules/${moduleId}/demonstration`}

className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"

<h3 className="text-xl font-semibold mb-2">🎨 Demonstration</h3>

<p className="text-gray-600">Interactive visual proof</p>

</Link>

<Link

href={`/modules/${moduleId}/quiz`}

className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"

<p className="text-gray-600">Test your knowledge</p>

</Link>

<Link

href={`/modules/${moduleId}/review`}

className="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"

<h3 className="text-xl font-semibold mb-2">📝 Review</h3>

<p className="text-gray-600">Summary and key takeaways</p>

</Link>

</div>

);

}

```

Step 11: Run Development Server

Start the development server:

```bash

npm run dev

```

Open `http://localhost:3000` in your browser.

Step 12: Deploy to Vercel

Deploy your app:

1. Push code to GitHub

2. Import repository on Vercel

3. Deploy with default settings (auto-detected Next.js)

Best Practices

**Component Organization:**

Keep interactive demos in `components/modules`

Use `components/ui` for reusable UI elements

Separate layout components from page components

**State Management:**

Use Zustand for global progress tracking

Use React `useState` for component-local state

Persist progress with `zustand/middleware/persist`

**Animations:**

Use Framer Motion for all animations

Apply consistent timing functions

Animate on user interaction (hover, click)

**Responsive Design:**

Test on mobile, tablet, desktop

Use Tailwind responsive utilities (`sm:`, `md:`, `lg:`)

Ensure touch-friendly interactive elements

**Progressive Enhancement:**

Ensure core functionality works without JavaScript

Add animations as enhancement layer

Use semantic HTML for accessibility

Common Issues

**Issue:** Tailwind classes not applying

**Solution:** Ensure content paths in `tailwind.config.js` include all component directories

**Issue:** Zustand persist not working

**Solution:** Check that localStorage is available (not in SSR context)

**Issue:** Dynamic routes returning 404

**Solution:** Verify module IDs match exactly between constants and URL params

Next Steps

Add authentication with NextAuth.js

Implement more geometry modules (circles, polygons, transformations)

Create interactive SVG-based demonstrations

Add spaced repetition quiz system

Integrate progress analytics dashboard

Geometry Tutor Setup Guide

Geometry Tutor Setup Guide

What This Skill Does

Instructions

Step 1: Initialize Next.js Project

Step 2: Install Required Dependencies

Step 3: Create Directory Structure

Step 4: Configure Tailwind CSS

Step 5: Define TypeScript Types

Step 6: Create Module Constants

Step 7: Set Up Zustand Store

Step 8: Create Dashboard Layout

Step 9: Create Dashboard Homepage

Step 10: Create Module Detail Page

Step 11: Run Development Server

Step 12: Deploy to Vercel

Best Practices

Common Issues

Next Steps

Reviews (0)