Geometry Tutor Development Guide

Expert guide for building interactive geometry education applications using Next.js 15 App Router, TypeScript, Tailwind CSS, Framer Motion, and Zustand state management.

Project Overview

This skill helps you build educational geometry applications with:

Next.js 15 App Router with TypeScript

Tailwind CSS with custom design tokens

Framer Motion for interactive animations

Zustand for state management

Radix UI for accessible components

Progressive learning modules (lesson → demonstration → quiz → review)

Core Architecture

Directory Structure

```

geometry-tutor/

├── public/images/ # Static assets

├── src/

│ ├── app/

│ │ ├── (auth)/ # Auth routes (login, register)

│ │ ├── (dashboard)/ # Protected dashboard routes

│ │ │ ├── layout.tsx # Dashboard layout wrapper

│ │ │ ├── page.tsx # Dashboard home

│ │ │ ├── progress/ # Progress tracking

│ │ │ ├── settings/ # User settings

│ │ │ └── modules/[moduleId]/ # Dynamic module routes

│ │ │ ├── lesson/

│ │ │ ├── demonstration/

│ │ │ ├── quiz/

│ │ │ └── review/

│ │ ├── layout.tsx # Root layout

│ │ └── globals.css

│ ├── components/

│ │ ├── ui/ # Reusable UI primitives

│ │ ├── modules/ # Module-specific components

│ │ ├── layout/ # Layout components

│ │ └── shared/ # Shared utility components

│ ├── lib/

│ │ ├── constants.ts # Module data & config

│ │ ├── types.ts # TypeScript definitions

│ │ └── utils.ts # Utility functions

│ ├── hooks/

│ │ └── use-module-progress.ts

│ └── store/

│ └── user-progress-store.ts # Zustand state

```

Step-by-Step Implementation

1. Initialize Project

```bash

npx create-next-app@latest geometry-tutor --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"

cd geometry-tutor

```

2. Install Dependencies

```bash

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

npm install -D @tailwindcss/typography

```

3. Create Directory Structure

```bash

mkdir -p src/app/$auth$/{login,register} \

src/app/$dashboard$/{progress,settings,modules} \

src/components/{ui,modules,layout,shared} \

src/{lib,hooks,store} \

public/images

```

4. Configure Tailwind CSS

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

```js

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: { /* custom palette */ },

secondary: { /* custom palette */ },

animation: {

'fade-in': 'fadeIn 0.3s ease-in',

'slide-up': 'slideUp 0.4s ease-out',

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

};

```

5. Define Core Types

Create `src/lib/types.ts`:

```typescript

export interface Module {

id: string;

title: string;

description: string;

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

estimatedTime: string;

sections: Section[];

}

export interface Section {

type: 'lesson' | 'demonstration' | 'quiz' | 'review';

title: string;

completed: boolean;

}

export interface UserProgress {

moduleId: string;

completedSections: string[];

score?: number;

lastAccessed: Date;

}

```

6. Set Up Zustand Store

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

```typescript

import { create } from 'zustand';

import { persist } from 'zustand/middleware';

interface ProgressState {

progress: Record<string, UserProgress>;

updateProgress: (moduleId: string, section: string) => void;

getModuleProgress: (moduleId: string) => UserProgress | undefined;

}

export const useProgressStore = create<ProgressState>()(

persist(

(set, get) => ({

progress: {},

updateProgress: (moduleId, section) => {

set((state) => ({

progress: {

...state.progress,

[moduleId]: {

...state.progress[moduleId],

completedSections: [

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

section,

lastAccessed: new Date(),

}));

getModuleProgress: (moduleId) => get().progress[moduleId],

}),

{ name: 'geometry-tutor-progress' }

)

);

```

7. Create Module Constants

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

```typescript

export const MODULES: Module[] = [

{

id: 'pythagorean-theorem',

title: 'Pythagorean Theorem',

description: 'Master the fundamental relationship in right triangles',

difficulty: 'beginner',

estimatedTime: '30 min',

sections: [

{ type: 'lesson', title: 'Understanding the Theorem', completed: false },

{ type: 'demonstration', title: 'Interactive Proof', completed: false },

{ type: 'quiz', title: 'Test Your Knowledge', completed: false },

{ type: 'review', title: 'Summary & Practice', completed: false },

// Add more modules...

];

```

8. Build Interactive Demonstrations

Create `src/components/modules/pythagorean-demo.tsx` with Framer Motion:

```typescript

'use client';

import { motion } from 'framer-motion';

import { useState } from 'react';

export function PythagoreanDemo() {

const [a, setA] = useState(3);

const [b, setB] = useState(4);

const c = Math.sqrt(a * a + b * b);

return (

<motion.svg

width="400"

height="400"

viewBox="0 0 400 400"

className="mx-auto"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

{/* Animated triangle visualization */}

<motion.line

x1="50" y1="300" x2={50 + a * 40} y2="300"

stroke="currentColor"

strokeWidth="3"

initial={{ pathLength: 0 }}

animate={{ pathLength: 1 }}

transition={{ duration: 0.8 }}

{/* Add more SVG elements */}

</motion.svg>

<label>

Side A: <input type="range" min="1" max="10" value={a} onChange={(e) => setA(+e.target.value)} />

</label>

<label>

Side B: <input type="range" min="1" max="10" value={b} onChange={(e) => setB(+e.target.value)} />

</label>

</div>

{a}² + {b}² = {c.toFixed(2)}²

</div>

);

}

```

9. Create Quiz Component

Create `src/components/modules/quiz-component.tsx`:

```typescript

'use client';

import { useState } from 'react';

import { motion, AnimatePresence } from 'framer-motion';

interface Question {

id: string;

question: string;

options: string[];

correctAnswer: number;

explanation: string;

}

export function QuizComponent({ questions }: { questions: Question[] }) {

const [currentQuestion, setCurrentQuestion] = useState(0);

const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null);

const [showExplanation, setShowExplanation] = useState(false);

const handleAnswer = (index: number) => {

setSelectedAnswer(index);

setShowExplanation(true);

};

return (

<motion.div

key={currentQuestion}

initial={{ opacity: 0, x: 20 }}

animate={{ opacity: 1, x: 0 }}

exit={{ opacity: 0, x: -20 }}

className="space-y-6"

{questions[currentQuestion].question}

</h3>

{questions[currentQuestion].options.map((option, index) => (

<button

key={index}

onClick={() => handleAnswer(index)}

className={`w-full p-4 text-left rounded-lg border-2 transition ${

selectedAnswer === index

? index === questions[currentQuestion].correctAnswer

? 'border-green-500 bg-green-50'

: 'border-red-500 bg-red-50'

: 'border-gray-200 hover:border-gray-300'

}`}

disabled={showExplanation}

{option}

</button>

))}

</div>

{showExplanation && (

<motion.div

initial={{ opacity: 0, y: 10 }}

animate={{ opacity: 1, y: 0 }}

className="p-4 bg-blue-50 rounded-lg"

<p className="font-semibold">Explanation:</p>

<p>{questions[currentQuestion].explanation}</p>

</motion.div>

)}

</motion.div>

</AnimatePresence>

</div>

);

}

```

10. Implement Dashboard Layout

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

```typescript

import { Sidebar } from '@/components/layout/sidebar';

import { Header } from '@/components/layout/header';

export default function DashboardLayout({

children,

}: {

children: React.ReactNode;

}) {

return (

{children}

</main>

</div>

);

}

```

11. Create Module Page

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

```typescript

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

import { notFound } from 'next/navigation';

import Link from 'next/link';

export default function ModulePage({ params }: { params: { moduleId: string } }) {

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

if (!module) notFound();

return (

<div>

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

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

</div>

{module.sections.map((section, index) => (

<Link

key={index}

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

className="p-6 border rounded-lg hover:shadow-md transition"

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

<p className="text-sm text-gray-500 mt-1">{section.type}</p>

</Link>

))}

</div>

);

}

```

Best Practices

Component Organization

Keep components modular and single-purpose

Use client components (`'use client'`) only when needed (interactivity, hooks)

Colocate related components in feature directories

State Management

Use Zustand for global state (user progress, settings)

Use React's `useState` for local component state

Persist progress with Zustand's persist middleware

Animations

Use Framer Motion for all animations (consistency)

Apply `initial`, `animate`, `exit` props for page transitions

Use `AnimatePresence` for conditional rendering animations

Responsive Design

Mobile-first approach with Tailwind breakpoints

Test on various screen sizes (sm, md, lg, xl)

Use flexible grid layouts

Accessibility

Use Radix UI primitives for accessible components

Include ARIA labels on interactive elements

Ensure keyboard navigation works throughout

Progressive Enhancement

Ensure core functionality works without JavaScript

Enhance with interactivity layer-by-layer

Use semantic HTML as foundation

Development Workflow

1. **Run development server**: `npm run dev`

2. **Test on multiple devices**: Use browser dev tools + real devices

3. **Check TypeScript errors**: `npm run type-check`

4. **Lint code**: `npm run lint`

5. **Build for production**: `npm run build`

Deployment to Vercel

1. Push code to GitHub repository

2. Connect repository to Vercel

3. Configure environment variables (if any)

4. Deploy with automatic builds on push

Common Patterns

Adding a New Module

1. Add module definition to `src/lib/constants.ts`

2. Create module directory: `src/app/(dashboard)/modules/[new-module-id]/`

3. Add lesson/demonstration/quiz/review pages

4. Create module-specific components in `src/components/modules/`

Creating Interactive Visualizations

1. Use SVG for geometric shapes

2. Animate with Framer Motion's `motion.svg` and child elements

3. Add interactive controls (sliders, buttons) to manipulate parameters

4. Display real-time calculations based on user input

Building Quizzes

1. Define question data with correct answers and explanations

2. Use `QuizComponent` or create custom variant

3. Track answers in component state

4. Update global progress store on completion

5. Provide immediate feedback with animations

Constraints

Requires Node.js 18+ and npm 9+

Designed for modern browsers (ES2020+)

Assumes basic knowledge of React, TypeScript, and Next.js

Requires internet connection for deployment (Vercel)

Geometry Tutor Development Guide

Geometry Tutor Development Guide

Project Overview

Core Architecture

Directory Structure

Step-by-Step Implementation

1. Initialize Project

2. Install Dependencies

3. Create Directory Structure

4. Configure Tailwind CSS

5. Define Core Types

6. Set Up Zustand Store

7. Create Module Constants

8. Build Interactive Demonstrations

9. Create Quiz Component

10. Implement Dashboard Layout

11. Create Module Page

Best Practices

Component Organization

State Management

Animations

Responsive Design

Accessibility

Progressive Enhancement

Development Workflow

Deployment to Vercel

Common Patterns

Adding a New Module

Creating Interactive Visualizations

Building Quizzes

Constraints

Reviews (0)