<<<<<<< Updated upstream
"Every shop owner deserves a beautiful website — no coding required."
Digital Atelier is a no-code website builder designed specifically for shop owners. It empowers boutiques, local stores, and fashion brands to create stunning, fully responsive storefronts without writing a single line of code — built with React + Tailwind on the frontend and Node.js + MongoDB on the backend.
- Overview
- Problem Statement
- Key Features
- Tech Stack
- System Architecture
- User Flows
- UI Screens
- Design System
- Folder Structure
- MVP Scope
- Phase 2 Roadmap
- Business Model
- KPIs
- Risks
- Project Deliverables
Digital Atelier solves a real-world gap — thousands of shop owners have great products but zero online presence. Hiring a developer is expensive, learning to code takes months, and existing platforms are either too complex or too limiting.
Digital Atelier gives shop owners a simple, guided flow to build and publish a professional website in minutes — no technical knowledge needed.
"Why can't shop owners create websites without coding knowledge?"
Shop Owners:
- Cannot afford to hire developers for a basic storefront
- Existing builders (WordPress, Wix) are confusing for non-technical users
- No platform is tailored specifically for small physical shop owners
Customers:
- Cannot discover local shops online
- Miss out on products from nearby boutiques and stores that have no digital presence
- Step-by-step guided setup — shop name, logo, theme, products
- Zero coding knowledge required
- Live preview before publishing
- Upload logo and banner
- Choose brand colors and typography
- Add tagline, description, and social links
- Add products with images, prices, and descriptions
- Organize into categories
- Mark items as available or out of stock
- Go live instantly with a shareable storefront link
- Auto-generated mobile-responsive pages
- Built-in contact form on every storefront
- Customers can directly message the shop owner
- Secure sign up / login for shop owners
- Dashboard to manage shop, products, and settings
- Proper meta titles and descriptions on every storefront
- Search engine friendly URLs
| Layer | Technology |
|---|---|
| Frontend | React.js + Tailwind CSS |
| Routing | React Router |
| State Management | React Context API |
| Backend | Node.js + Express |
| Database | MongoDB |
| Authentication | JWT (JSON Web Tokens) |
| Image Storage | Cloudinary / AWS S3 |
| Design | Figma |
| Version Control | Git + GitHub |
┌─────────────────────────────────────────────┐
│ Frontend │
│ React.js + Tailwind CSS │
└──────────────────┬──────────────────────────┘
│
┌──────────────────▼──────────────────────────┐
│ Backend API │
│ Node.js / Express │
└──────┬───────────────────────┬──────────────┘
│ │
┌──────▼──────┐ ┌────────▼────────┐
│ MongoDB │ │ Cloud Storage │
│ (main DB) │ │ Cloudinary/S3 │
└─────────────┘ └─────────────────┘
- Signs up on Digital Atelier
- Fills in shop details — name, logo, tagline, category
- Selects a website theme / template
- Adds products with images and prices
- Previews the storefront live
- Publishes with one click — gets a shareable link
- Receives or finds the shop's Digital Atelier link
- Browses the storefront — products, categories, details
- Sends an inquiry via the built-in contact form
- Gets a response directly from the shop owner
| # | Screen | Description |
|---|---|---|
| 1 | Landing / Home | Hero section, how it works, testimonials, CTA |
| 2 | Sign Up | Shop owner account creation |
| 3 | Login | Email/password authentication |
| 4 | Onboarding Step 1 | Shop name, category, tagline |
| 5 | Onboarding Step 2 | Logo upload, brand colors, description |
| 6 | Template Selection | Choose from pre-designed storefront themes |
| 7 | Product Add | Upload image, name, price, description |
| 8 | Product Listing (Owner) | Manage all products from dashboard |
| 9 | Live Preview | See the storefront before publishing |
| 10 | Dashboard | Overview of shop stats, products, settings |
| 11 | Published Storefront | Public-facing shop page for customers |
| 12 | Product Detail (Customer) | Full product view with inquiry option |
| 13 | Contact / Inquiry Form | Customer reaching out to the shop |
| 14 | Settings | Edit shop details, theme, and account info |
| 15 | 404 / Error Page | Friendly error state |
| Token | Value |
|---|---|
| Primary color | Deep charcoal — #1A1A2E |
| Accent color | Gold — #C9A84C |
| Background | Soft white — #F9F9F7 |
| Card radius | 12px |
| Font | Plus Jakarta Sans / DM Sans |
| Heading weight | 600–700 |
| Body weight | 400 |
Design philosophy: Elegant, minimal, and confident. Digital Atelier should feel like a luxury digital studio — premium but approachable. Clean white space, warm gold accents, and refined typography make every shop look professional.
=======
🎨 Digital Atelier
Empowering shop owners to build beautiful websites — no coding knowledge required.
💡 Problem Statement
"Why can't shop owners create websites without coding knowledge?"
Thousands of small shop owners — boutiques, local stores, fashion brands — have great products but no online presence. Hiring a developer is expensive. Learning to code takes months. Existing platforms are either too complex or too limited.
Digital Atelier solves this. It gives shop owners a simple, elegant platform to create and launch their own professional website — no code, no technical skills, no hassle.
📌 Project Overview
Digital Atelier is a no-code website builder designed specifically for shop owners. It lets non-technical users create stunning, fully responsive storefronts by simply filling in their details, choosing a style, and going live — all through an intuitive UI.
The project is built pixel-perfect from a Figma design, translating creative UI/UX decisions into a fully functional web application with a React + Tailwind frontend and a Node.js + MongoDB backend.
🎨 Figma Design
The entire UI is based on the following Figma design file:
🔗 View Figma Design
The Figma file includes:
Full page layouts (Desktop & Mobile)
Component designs (Navbar, Hero, Cards, Footer, etc.)
Color palette, typography, and spacing system
Interactive prototype flows
🎯 Features Overview
🏪 For Shop Owners
FeatureDescription🚀 No-Code BuilderCreate a full website without writing any code🎨 Custom BrandingAdd shop name, logo, colors, and tagline🛍️ Product ListingsUpload products with images, prices & descriptions👁️ Live PreviewSee your site in real time before publishing🌐 One-Click PublishGo live instantly with a shareable link📱 Mobile-ReadyEvery storefront is fully responsive by default📬 Contact FormLet customers reach out directly from your page
⚙️ Platform & Technical
FeatureDescription🔐 User AuthenticationSecure sign up / login with JWT🗂️ DashboardManage shop, products & website from one place🖼️ Template SelectionChoose from pre-designed themes🔍 SEO-FriendlyProper meta tags for search visibility🗄️ REST APINode.js + Express powering all backend operations☁️ Image UploadCloud-based product image management
📁 Folder Structure
>>>>>>> Stashed changes
digitalAtelier/
│
├── frontend/ # 🖥️ React + Tailwind CSS app
│ ├── public/ # Static files (favicon, index.html)
│ ├── src/
│ │ ├── assets/ # Images, fonts, videos
│ │ ├── components/ # Reusable React components
│ │ ├── pages/ # Page-level components (Home, About, etc.)
│ │ ├── hooks/ # Custom React hooks
│ │ ├── context/ # React Context / global state
│ │ ├── services/ # API call functions
│ │ └── utils/ # Helper functions
│ ├── tailwind.config.js # Tailwind configuration
│ └── package.json
│
├── backend/ # ⚙️ Server, APIs & database
│ ├── routes/ # API route definitions
│ ├── controllers/ # Business logic handlers
│ ├── models/ # Database schemas
│ ├── middleware/ # Auth & error handling
│ ├── config/ # DB & environment setup
│ └── utils/ # Helper functions
│
├── .gitignore
├── README.md
└── LICENSE
<<<<<<< Updated upstream
Phase 1 — Must have:
- Shop owner sign up and login
- Onboarding flow (shop details + branding)
- Template selection
- Product add / edit / delete
- Live preview and one-click publish
- Public storefront page
- Customer inquiry/contact form
Phase 1 — Out of scope:
- Payment gateway / e-commerce checkout
- Advanced analytics
- Multi-language support
- Mobile app
- Online payment integration (Razorpay / Stripe)
- Custom domain support for storefronts
- Analytics dashboard (views, inquiries, traffic)
- Mobile app for shop owners (React Native)
- AI-powered product description generator
- Multi-language storefront support
| Revenue Stream | Description |
|---|---|
| Freemium Plan | Free tier with limited products and default theme |
| Pro Subscription | Unlimited products, custom domain, premium themes |
| Transaction Fee | Small percentage on orders (Phase 2) |
| White Label | Custom-branded builder for agencies and enterprises |
- Number of storefronts published — target: grow month-on-month
- Time to publish first storefront — target: under 10 minutes
- Shop owner retention rate — target: maintain above 70%
- Customer inquiry conversion rate — target: increase over time
- Platform uptime — target: maintain above 99.5%
| Risk | Mitigation |
|---|---|
| Low adoption from non-tech users | Simple onboarding flow with guided steps and tooltips |
| Competition from Wix / Shopify | Hyper-focus on shop owners — simpler, faster, cheaper |
| Image storage costs | Optimize with compression + tiered storage plans |
| Data security for shop owners | JWT auth + encrypted storage + regular audits |
- Product Requirements Document (PRD)
- Figma UI Design (15 screens) 👉 View Figma Design
- System architecture diagram
- Folder structure & tech stack documentation
- Working demo (Phase 1)
Het — @Het510
🛠️ Tech Stack TechnologyUsageReact.jsComponent-based UI & routingTailwind CSSUtility-first responsive stylingJavaScript (ES6+)Logic & interactivityNode.js + ExpressBackend server & REST APIsMongoDBDatabase for users, shops & productsJWTSecure user authenticationFigmaUI/UX Design sourceGit & GitHubVersion control & collaboration
Stashed changes