A powerful Full stack website builder inspired by Bolt.new - Create professional websites visually without code
Built is a comprehensive website builder that allows users to create professional websites through an intuitive visual interface. Similar to Webflow or Bolt.new, but built entirely from scratch with modern web technologies.
Key Capabilities:
- Visual drag-and-drop website editor
- Real-time preview and editing
- Component-based architecture
- Responsive design system
- User project management
- Export functionality for generated websites
- Drag-and-Drop Interface - Intuitive visual builder for creating layouts without code
- Live Preview System - Real-time rendering as you design and edit
- Component Library - Pre-built UI components (headers, forms, galleries, cards, etc.)
- Visual Property Panel - Click any element to modify colors, typography, spacing, and styles
- Responsive Breakpoints - Design for desktop, tablet, and mobile with visual controls
- Layer Management - Organize and manage website elements with precision
- Real-Time Database - Convex backend for instant data synchronization across sessions
- User Authentication - Complete auth system with user profiles and project management
- Project Persistence - Save, load, and manage multiple website projects
- File Management - Handle image uploads and media assets
- Export System - Generate clean, production-ready HTML/CSS code
- SEO Optimization - Meta tags, structured data, and search engine friendly output
- Performance Optimized - Code splitting, lazy loading, and optimized bundle sizes
- Mobile-First Design - Responsive layouts that work across all screen sizes
- Accessibility - WCAG-compliant components with proper semantic markup
- Dark/Light Themes - Built-in theme switching capability
| Technology | Purpose | Implementation Details |
|---|---|---|
| Next.js 14 | React Framework | App Router, Server Components, Image Optimization, Streaming |
| TypeScript | Type Safety | Strict typing throughout, Interface-driven development |
| Tailwind CSS | Styling System | Utility-first CSS, Responsive design, Custom design tokens |
| shadcn/ui | Component Library | Accessible, customizable UI components with consistent design |
| Technology | Purpose | Key Features |
|---|---|---|
| Convex | Real-time Database | WebSocket synchronization, Serverless functions, Schema validation |
| Authentication | User Management | Secure auth flows, Session handling, Protected routes |
| File Storage | Media Handling | Cloud-based asset storage and optimization |
- ESLint & Prettier - Code quality and consistent formatting
- GitHub Actions - Automated CI/CD pipeline
- Vercel Deployment - Production hosting with automatic deployments
Built/
├── app/ # Next.js 14 App Router
│ ├── globals.css # Global styles and CSS variables
│ ├── layout.tsx # Root layout with providers
│ └── (routes)/ # Application pages
├── components/ # React component library
│ ├── ui/ # shadcn/ui base components
│ ├── editor/ # Website builder interface
│ ├── layout/ # Layout components
│ └── custom/ # Project-specific components
├── context/ # React Context for state management
├── convex/ # Convex backend configuration
│ ├── schema.ts # Database schemas and types
│ └── functions/ # Server functions and APIs
├── lib/ # Utility functions and helpers
├── data/ # Static configurations and constants
└── public/ # Static assets and media
# Clone and setup the project
git clone https://github.com/Amresh-01/Built.git
cd Built
npm install
# Configure environment variables
cp .env.example .env.local
# Add your Convex configuration
# Initialize Convex backend
npx convex dev
# Start development server
npm run devVisit http://localhost:3000 to see the application.
- Advanced State Management - Complex UI state for drag-and-drop with precise positioning
- Real-Time Synchronization - WebSocket-based live collaboration and data sync
- Component Architecture - Modular, reusable component system with dynamic rendering
- Performance Optimization - Efficient rendering with React optimization patterns
- Type-Safe Development - Comprehensive TypeScript integration throughout the stack
- Component-Driven Design - Systematic approach using shadcn/ui design system
- Server-Side Rendering - Next.js 14 App Router with React Server Components
- Database Design - Efficient schema modeling for complex nested component structures
- Scalable Architecture - Code organized for maintainability and feature expansion
- User Experience Focus - Intuitive interface that abstracts technical complexity
- Security Best Practices - Secure authentication and data handling
- Deployment Ready - Configured for production deployment with proper optimizations
We're working on improvements—please check back soon!
This project demonstrates advanced full-stack development skills using the modern React ecosystem and showcases the ability to build complex, production-ready applications with intuitive user experiences.