A modern web-based 3D Lego simulation game built with Next.js 15, React 19, and Three.js. Create, modify, and explore virtual Lego structures using an elegant UI and immersive 3D environment.
-
Framework: Next.js
15.2.4 -
Language: TypeScript
-
3D Engine: Three.js via
@react-three/fiber&@react-three/drei -
Styling: TailwindCSS +
tailwindcss-animate -
UI Components:
- Radix UI primitives
- shadcn/ui components
- Custom-built elements
-
Forms & Validation:
- React Hook Form
- Zod
-
Theme Support: Dark & Light mode via
next-themes -
Data Storage: Vercel KV
-
Clone the repo
git clone https://github.com/NafisRayan/Lego-Blocks-Game.git cd Lego-Blocks-Game -
Install dependencies
npm install # or pnpm install -
Run the dev server
npm run dev # or pnpm dev
Open http://localhost:3000 to view the app.
| Script | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build production application |
npm run start |
Start production server |
npm run lint |
Run ESLint for code quality |
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout
│ └── page.tsx # Entry page
├── components/
│ ├── ui/ # Base UI components
│ ├── block/ # Block logic components
│ ├── scene/ # 3D scene management
│ ├── color-selector/ # Color selection system
│ └── blocks/ # Initial block prototypes
├── lib/
│ ├── actions/ # Server-side logic
│ └── utils/ # Utility functions
├── hooks/ # Custom React hooks
├── public/ # Static files
└── styles/ # Global styles
- Fully interactive 3D Lego environment
- Build and erase blocks in real-time
- Scene lighting & camera controls
- Dialogs, dropdowns, tooltips
- Navigation, forms, accordions
- Visual components for mobile & desktop
- Color selector with history
- Dimension input controls
- Responsive toolbar
- Audio integration & file tools
- Strong type safety with TypeScript
- ESLint for consistent code quality
- TailwindCSS for rapid UI building
- Hot module reloading
- Node.js v18+
- npm or pnpm
Private — All rights reserved.
Current release: 0.1.0