Spatial Code

Inspiration

We are inspired by making AI the place where anyone with zero code knowledge can build a web application without stressing out and seeking an expert to write the command.

What it does

SPATIALCODE uses Google’s Gemini 3 AI to connect visual design with full-stack application development. The application mainly takes advantage of Gemini 3’s ability to generate code and understand images. Users can upload sketches or screenshots along with a short description. Gemini 3 examines the visual aspects of the interface, such as layouts, components, colors, and structure. It then interprets the intended function based on the description. The AI creates a complete codebase that includes frontend files (React + Tailwind CSS), backend files (FastAPI + SQLAlchemy), and deployment configuration scripts. Gemini 3’s skill in understanding both images and natural language is key to SPATIALCODE’s process.

How we built it

SPATIALCODE was built by seamlessly integrating modern frontend and backend technologies to leverage the power of Google's gemini-3-flash-preview model. The architecture features a React (Vite) frontend styled with Tailwind CSS to provide a sleek, dark-mode glassmorphism interface for users to upload design concepts. This frontend communicates with a FastAPI backend, which acts as the intelligent orchestration layer. When an image is uploaded, the backend securely processes it and constructs a specialized prompt for the Gemini API, instructing it to analyze the visual input and return a structured JSON response containing full-stack code (FastAPI models, routes, and React components). This response is then parsed and rendered back to the user in a syntax-highlighted code editor, effectively closing the loop from visual idea to functional boilerplate in seconds.

Challenges we ran into

We faced a problew while we were building preview section, firstly we wanted the app to show a sample UI for the user on the preview section, but it required another compiler to do that and we left it to only show the command for running the code.

Accomplishments that we're proud of

Our system can understand images along with the description given it generate a full stack website code in an organized format not only that, but it also give a command for running the code which is really greate for novice and it also give the code analysis for what it has done.

What we learned

We learned that using the existing AI we can build really big thing that can be a solution for real world problem.

What's next for Spatial Code

We will make the app to show the preview (the running website) for the user and we will give the user an option to open and run it in different coding platforms and compilers like vs code.

Built With

• axios
• gemini-3-flash-preview
• google-generative-ai-sdk
• lucide-react
• pydantic
• python-(fastapi)
• react-(vite)
• tailwind-css
• uvicorn