Geometry Tutor - Project Structure and Setup Guide
This guide outlines the project structure and provides step-by-step instructions for setting up the Geometry Tutor application.
Project Structure
geometry-tutor/
├── public/
│ └── images/ # Static images
├── src/
│ ├── app/
│ │ ├── (auth)/
│ │ │ ├── login/
│ │ │ └── register/
│ │ ├── (dashboard)/
│ │ │ ├── layout.tsx
│ │ │ ├── page.tsx # Dashboard/Home page
│ │ │ ├── progress/
│ │ │ │ └── page.tsx # Progress tracker
│ │ │ ├── settings/
│ │ │ │ └── page.tsx # Settings page
│ │ │ └── modules/
│ │ │ └── [moduleId]/
│ │ │ ├── page.tsx
│ │ │ ├── lesson/
│ │ │ │ └── page.tsx
│ │ │ ├── demonstration/
│ │ │ │ └── page.tsx
│ │ │ ├── quiz/
│ │ │ │ └── page.tsx
│ │ │ └── review/
│ │ │ └── page.tsx
│ │ ├── layout.tsx # Root layout
│ │ └── globals.css # Global styles
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ ├── modules/ # Module-specific components
│ │ │ ├── pythagorean-demo.tsx
│ │ │ ├── quiz-component.tsx
│ │ │ └── ...
│ │ ├── layout/ # Layout components
│ │ └── shared/ # Shared components
│ ├── lib/
│ │ ├── constants.ts # App constants
│ │ ├── types.ts # TypeScript types
│ │ └── utils.ts # Utility functions
│ ├── hooks/
│ │ └── use-module-progress.ts # Custom hooks
│ └── store/
│ └── user-progress-store.ts # Zustand store
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── tsconfig.json
Setup Instructions
1. Create Project
# Create a new Next.js project with the app router
npx create-next-app@latest geometry-tutor
cd geometry-tutor
When prompted, select:
- Would you like to use TypeScript? → Yes
- Would you like to use ESLint? → Yes
- Would you like to use Tailwind CSS? → Yes
- Would you like to use
src/ directory? → Yes
- Would you like to use App Router? → Yes
- Would you like to customize the default import alias (@/)? → Yes (use @/)
2. Install Dependencies
npm install framer-motion zustand @radix-ui/react-dialog @radix-ui/react-progress @radix-ui/react-tabs
# Install dev dependencies
npm install -D @tailwindcss/typography
3. Create Project Structure
# Create the main directory structure
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
Replace the generated tailwind.config.js with our custom configuration:
// tailwind.config.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: {
// Configuration from tailwind-config.js
},
},
plugins: [
require('@tailwindcss/typography'),
],
};
5. Create Core Files
- Global CSS - Replace
src/app/globals.css with our custom CSS
- Types - Create
src/lib/types.ts with our type definitions
- Constants - Create
src/lib/constants.ts with module data
- Store - Create
src/store/user-progress-store.ts for state management
6. Implement Pages and Components
-
Create all the page components:
- Dashboard page
- Module pages (lesson, demonstration, quiz, review)
- Progress page
- Settings page
-
Create all reusable components:
- Quiz component
- Pythagorean Theorem demo
- Layout components
7. Run Development Server
npm run dev
Visit http://localhost:3000 to see your app in action.
8. Deploy to Vercel
Follow the deployment guide to deploy your app to Vercel:
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy
Tips for Development
- Component Organization: Keep components modular and focused on specific functionality
- State Management: Use Zustand for global state and React's useState for local state
- Animations: Use Framer Motion for all animations to maintain consistency
- Responsive Design: Test on various screen sizes to ensure mobile compatibility
- Progressive Enhancement: Make the app work without JavaScript first, then enhance