WebCeption

• 

  Dashboard

• 

  Landing Page

• 

  Figma Render

Inspiration

When I first started programming, I wanted to make websites, but getting from an idea to a finished page felt harder than it should have. I wanted something where I could just design visually, move things around, save my progress, and turn it into a real website.

WebCeption was inspired by that feeling. It is the kind of tool I wish I had when I was learning: a simple online studio for building websites without getting stuck on setup, file structure, or repetitive boilerplate.

## What it does

WebCeption is an online website builder. Users can create an account, save projects, open a dashboard, start from sample sites, design on a freeform canvas, and export their finished website as static files.

It includes cloud project saving, sample website starters, editable page elements, responsive canvas modes, password reset, email confirmation, and a dashboard where users can manage their sites.

## How we built it

We built WebCeption with React, TypeScript, and Vite for the frontend. Supabase handles authentication and cloud project storage, and Vercel hosts the deployed app.

The editor stores each website as structured project data. Every element has content, style, placement, animation, and responsive settings. The app renders that data on the canvas, lets users edit it visually, and then converts the project into static HTML, CSS, and JavaScript for export.

## Challenges we ran into

One big challenge was making the builder flexible without making it confusing. A freeform canvas needs dragging, resizing, layering, styling, templates, and selection controls, but the interface still has to feel simple.

Another challenge was the account and project flow. We had to handle sign up, email confirmation, login errors, forgot password, saved projects, sample projects, and cloud syncing in a way that felt smooth.

The dashboard design was also a challenge because it needed to feel like a real workspace, not just a basic list of projects.

## Accomplishments that we're proud of

We are proud that WebCeption works as a full product flow: users can sign up, create or open projects, design a website, save it online, and export it.

We are also proud of the redesigned dashboard, the sample site cards, the landing page, and the fact that projects are stored in the cloud instead of only living locally in the browser.

Most importantly, we are proud that the project solves the original problem: making it easier to start building websites.

## What we learned

We learned how much thought goes into building tools that feel simple. A website builder is not just the canvas. It also needs authentication, project storage, export logic, responsive design, error handling, and a clean user experience.

We also learned more about connecting React state to Supabase, deploying with Vercel, designing product dashboards, and turning structured editor data into real website output.

## What's next for WebCeption

Next, we want to add better templates, more realistic project previews, stronger mobile editing tools, and more design controls. We also want to improve the exported sites and make the sample projects more polished.

Long term, WebCeption could become a beginner-friendly website studio where anyone can quickly turn an idea into a real website.

Built With

• css
• github
• html
• javascript
• jszip
• react
• supabase
• supabase-auth
• supabase-database
• typescript
• vercel
• vite