This guide outlines the project structure and provides step-by-step instructions for setting up the Geometry Tutor application.
Sign in to like and favorite skills
.llmrules
Code Style and Structure
Here are some pieces of information you need to know about this project:
This guide outlines the project structure and provides step-by-step instructions for setting up the Geometry Tutor application.
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
# Create a new Next.js project with the app router npx create-next-app@latest geometry-tutor cd geometry-tutor
When prompted, select:
src/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
# 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// 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'), ], };
src/app/globals.csssrc/lib/types.tssrc/lib/constants.tssrc/store/user-progress-store.tsCreate all the page components:
Create all reusable components:
npm run dev
Visit
http://localhost:3000Follow the deployment guide to deploy your app to Vercel: