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
- This provisioning code is designed to run on Manjaro Linux.
.llmrules
Code Style and Structure
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: