AI-Makerspace · Project Blueprint

Full-stack educational platform · Meshy API + Arduino + AI Mentor

React Frontend Node.js Backend Meshy 3D API Claude AI Mentor Arduino Integration

Platform Architecture

Two separate React applications communicating via REST API

Frontend App · Port 3000

▸ React 18 + Vite + Tailwind CSS
▸ React Router v6 for navigation
▸ Three.js / @react-three/fiber for 3D model viewer
▸ Lucide Icons, Framer Motion animations
▸ Zustand for global state management
▸ SyntaxHighlighter for code blocks
▸ Floating AI Mentor panel (Claude API)

Backend App · Port 5000

▸ Node.js + Express.js REST API
▸ Meshy API integration (3D model gen)
▸ Anthropic Claude API (AI Mentor)
▸ PostgreSQL + Prisma ORM
▸ JWT authentication (student accounts)
▸ WebSocket for real-time sim updates
▸ File storage (model downloads, STL)

Core User Flow

🏠 Landing → 📦 Gallery (25 projects) → 📖 Project Hub → 🚀 Future Sim → 🤖 AI Mentor

Key Feature Modules

Each module maps to a route and a set of backend endpoints

Project Gallery

▸ 25-card responsive grid with 3D model previews (GLB/GLTF via Meshy)
▸ Filter by difficulty: Beginner / Intermediate / Advanced
▸ Filter by AI integration status, sensor type
▸ Search bar with tag chips
▸ Card hover → animated 3D model orbit

Project Learning Hub

▸ Cinematic video player (custom controls, chapters)
▸ Interactive wiring diagrams (SVG + Fritzing-style)
▸ Step-by-step assembly guide with image carousel
▸ Arduino code blocks with syntax highlight + copy
▸ Code animation: visualise servo sweeps, sensor reads

Future Simulator

▸ Dedicated /future-sim route, full-page immersive
▸ Two environments: Smart City + Space Colony
▸ Three.js scene renders student's project in context
▸ AI logic overlay: shows project's real-world data flow
▸ Real-time WebSocket updates for sensor sim values

AI Mentor

▸ Floating chat window (persistent across routes)
▸ Context-aware: knows which project student is viewing
▸ Can answer wiring errors, code bugs, assembly Q&A
▸ Renders inline code blocks in responses
▸ Powered by Claude via backend proxy (Anthropic API)

3D Model Viewer

▸ Auto-generated via Meshy text-to-3D API
▸ OrbitControls, auto-rotate, zoom
▸ Toggle: Wireframe / Solid / Textured views
▸ Download as GLB or STL (3D print ready)
▸ Animation playback for servos, arms, wheels

Student Dashboard

▸ Progress tracking per project (% complete)
▸ Badges & achievement system
▸ Saved code snippets and notes
▸ My 3D models (Meshy-generated, downloadable)
▸ Sim history from Future Simulator runs

25 Educational Projects

Each has a Meshy-generated 3D model, wiring guide, code, and Future Sim environment

Robotic Arm

AdvancedAI

Smart Farm

MediumAI

Weather Station

Beginner

AI Vision Car

AdvancedAI

Smart Traffic Light

MediumAI

Gesture Controller

MediumAI

Soil Monitor

Beginner

Bionic Hand

AdvancedAI

Line Follower

Beginner

Air Quality Hub

MediumAI

Smart Door Lock

MediumAI

Seismic Detector

Advanced

Water Purifier

Medium

Solar Tracker

AdvancedAI

Voice Robot

AdvancedAI

Obstacle Avoider

Beginner

Fire Alert Bot

Beginner

Drone Controller

AdvancedAI

Heart Rate Mon.

MediumAI

Aquarium Auto.

Medium

CNC Mini Plotter

Advanced

Face Tracker

AdvancedAI

Greenhouse Bot

MediumAI

Balance Bot

Advanced

Space Antenna

AdvancedAI

Each project card in the gallery will display: 3D preview · difficulty badge · AI integration chip · estimated build time · part count

Project File Structure

Monorepo with two separate React + Node apps

Frontend (React + Vite)

ai-makerspace-frontend/ ├── src/ │ ├── pages/ │ │ ├── Landing.jsx │ │ ├── Gallery.jsx │ │ ├── ProjectHub.jsx │ │ ├── FutureSim.jsx │ │ └── Dashboard.jsx │ ├── components/ │ │ ├── gallery/ │ │ │ ├── ProjectCard.jsx │ │ │ ├── FilterBar.jsx │ │ │ └── ModelPreview.jsx │ │ ├── hub/ │ │ │ ├── VideoPlayer.jsx │ │ │ ├── WiringDiagram.jsx │ │ │ ├── AssemblyGuide.jsx │ │ │ └── CodeBlock.jsx │ │ ├── sim/ │ │ │ ├── SimCanvas.jsx │ │ │ ├── SmartCityScene.jsx │ │ │ └── SpaceColonyScene.jsx │ │ ├── mentor/ │ │ │ ├── MentorWindow.jsx │ │ │ └── ChatBubble.jsx │ │ └── shared/ │ │ ├── Navbar.jsx │ │ └── ModelViewer3D.jsx │ ├── store/ │ │ └── useAppStore.js ← Zustand │ ├── hooks/ │ │ ├── useMeshy.js │ │ └── useMentor.js │ ├── api/ │ │ └── client.js ← axios instance │ └── App.jsx ├── tailwind.config.js └── vite.config.js

Backend (Node.js + Express)

ai-makerspace-backend/ ├── src/ │ ├── routes/ │ │ ├── projects.js │ │ ├── meshy.js │ │ ├── mentor.js │ │ ├── simulator.js │ │ └── auth.js │ ├── controllers/ │ │ ├── projectController.js │ │ ├── meshyController.js │ │ ├── mentorController.js │ │ └── simController.js │ ├── services/ │ │ ├── meshyService.js ← API wrapper │ │ ├── claudeService.js ← Anthropic SDK │ │ └── simEngine.js ← WebSocket logic │ ├── prisma/ │ │ ├── schema.prisma │ │ └── migrations/ │ ├── middleware/ │ │ ├── auth.js │ │ └── rateLimit.js │ └── server.js ├── .env ← MESHY_API_KEY, ANTHROPIC_KEY └── package.json

Backend API Endpoints

REST API consumed by the frontend. Base URL: http://localhost:5000/api

Method	Endpoint	Description
GET	/projects	List all 25 projects with metadata
GET	/projects/:id	Full project detail (videos, wiring, code, steps)
GET	/projects/:id/model	Returns Meshy model URL (GLB/STL)
POST	/meshy/generate	Trigger Meshy text-to-3D generation for a project
GET	/meshy/status/:taskId	Poll Meshy task status (pending/succeeded/failed)
POST	/mentor/chat	Send message to AI Mentor (Claude), get reply
GET	/mentor/history/:sessionId	Retrieve chat history for session
POST	/simulator/start	Start a Future Sim session (Smart City / Space)
GET	/simulator/environments	List available sim environments
POST	/auth/register	Student signup
POST	/auth/login	JWT login
GET	/dashboard/progress	Student progress, badges, saved items

WebSocket: ws://localhost:5000/ws/simulator — streams real-time sensor simulation values to the Future Sim scene

Meshy API Integration Plan

3D models are generated via Meshy's text-to-3D endpoint and cached in backend storage

Generation Flow

1 Admin seeds each project with a text prompt (e.g. "Arduino robotic arm, 3D printed, futuristic")
2 Backend calls POST https://api.meshy.ai/openapi/v2/text-to-3d
3 Backend polls task status until "succeeded"
4 GLB model URL stored in DB, associated with project
5 Frontend loads model via Three.js GLTFLoader

API Endpoints Used

▸ Text to 3D — generate model from prompt
▸ Rigging & Animation — auto-rig robotic projects
▸ AI Texturing — add PBR textures to models
▸ Balance API — monitor credit usage
▸ Export: GLB (viewer) + STL (3D print download)

Environment Variables (backend .env)

# Meshy API MESHY_API_KEY=your_meshy_api_key MESHY_BASE_URL=https://api.meshy.ai # Anthropic (AI Mentor) ANTHROPIC_API_KEY=your_claude_api_key # Database DATABASE_URL=postgresql://user:pass@localhost/aimakerspace # Auth JWT_SECRET=your_jwt_secret

meshyService.js — Core Integration Pattern

// POST /openapi/v2/text-to-3d const createTask = async (prompt) => { return fetch(`${MESHY_BASE_URL}/openapi/v2/text-to-3d`, { method: 'POST', headers: { 'Authorization': `Bearer ${MESHY_API_KEY}` }, body: JSON.stringify({ mode: 'preview', prompt, art_style: 'realistic' }) }); }; // GET /openapi/v2/text-to-3d/:id — poll until succeeded const pollTask = async (taskId) => { /* ... */ };

Development Roadmap

Recommended build order: backend APIs first, then frontend pages

Phase 1 · Foundation (Week 1–2)

Set up monorepo, configure Vite + Tailwind on frontend, Express + Prisma on backend. Define DB schema for projects, users, sessions. Seed 25 project records.

Phase 2 · Meshy Pipeline (Week 2–3)

Implement meshyService.js. Generate 3D models for all 25 projects. Store GLB URLs in DB. Build ModelViewer3D component with Three.js.

Phase 3 · Gallery + Hub (Week 3–4)

Build Gallery page with filters. Build Project Hub with video player, WiringDiagram SVG, AssemblyGuide stepper, CodeBlock with Arduino syntax.

Phase 4 · Future Simulator (Week 4–5)

Build FutureSim page. Implement Smart City + Space Colony Three.js scenes. WebSocket connection for real-time sensor sim data from backend.

Phase 5 · AI Mentor (Week 5)

Implement floating MentorWindow. Backend /mentor/chat proxies to Claude API with project context injected into system prompt.

Phase 6 · Auth + Dashboard + Polish (Week 6)

JWT auth, student dashboard, progress tracking, badges, responsive testing on tablet/desktop, performance optimisation, deployment.

Tech Stack Summary

Frontend

React 18ViteTailwind CSSThree.js@react-three/fiberZustandFramer MotionLucide IconsReact Router v6

Backend

Node.jsExpress.jsPrisma ORMPostgreSQLSocket.ioJWTAxios

External APIs

Meshy AIAnthropic Claude

Pages / Routes

▸ / — Landing page (hero, stats, CTA)
▸ /gallery — 25 project grid
▸ /project/:id — Project Learning Hub
▸ /project/:id/sim — Future Simulator
▸ /dashboard — Student progress
▸ /login / /register — Auth pages