🧱 Lego Blocks

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.

---

🚀 Tech Stack

• 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

---

📦 Installation

1. Clone the repo

   git clone https://github.com/NafisRayan/Lego-Blocks-Game.git
   cd Lego-Blocks-Game
   

2. Install dependencies

   npm install
   # or
   pnpm install
   

3. Run the dev server

   npm run dev
   # or
   pnpm dev
   

Open http://localhost:3000 to view the app.

---

🧰 Available Scripts

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

---

🗂 Project Structure

├── 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

---

✨ Features

🔧 3D Simulation

• Fully interactive 3D Lego environment
• Build and erase blocks in real-time
• Scene lighting & camera controls

🧩 UI Components

• Dialogs, dropdowns, tooltips
• Navigation, forms, accordions
• Visual components for mobile & desktop

🎨 Interactive Tools

• Color selector with history
• Dimension input controls
• Responsive toolbar
• Audio integration & file tools

🛠 Developer Experience

• Strong type safety with TypeScript
• ESLint for consistent code quality
• TailwindCSS for rapid UI building
• Hot module reloading

---

🛑 Requirements

• Node.js v18+
• npm or pnpm

---

📝 License

Private — All rights reserved.

---

🔖 Version

Current release: 0.1.0