🎨 CraftStoreBuilder

A premium no-code platform for artisans to build beautiful online stores and showcase their handmade crafts

✨ Features

🏪 Store Management

• No-Code Store Builder - Drag-and-drop interface for creating beautiful stores
• Multiple Store Themes - Modern, Rustic, Elegant, Minimalist, and Vintage themes
• Custom Branding - Personalize your store with custom images and descriptions
• Store Analytics - Track views, likes, shares, and performance metrics

📦 Product Management

• Product Catalog - Add unlimited products with rich descriptions
• Image Gallery - High-quality product images with predefined options
• Inventory Tracking - Monitor stock levels and availability
• Category Organization - Organize products by categories and tags
• SKU Management - Automatic SKU generation and tracking

📊 Analytics & Insights

• Real-time Analytics - Track store performance and visitor behavior
• Traffic Sources - Monitor where your visitors come from
• Device Analytics - Understand your audience's device preferences
• Product Performance - See which products are most popular
• Export Data - Download analytics reports in JSON format

🎨 Premium Design

• Ultra-Premium UI - Wix-inspired design with attention to detail
• Responsive Design - Perfect on desktop, tablet, and mobile devices
• Smooth Animations - Engaging micro-interactions and transitions
• Modern Typography - Clean, readable fonts with proper hierarchy
• Color System - Consistent lime green, black, and white theme

🔐 User Management

• Secure Authentication - Email/password login with form validation
• User Profiles - Manage personal and business information
• Subscription Plans - Starter, Professional, and Enterprise tiers
• Settings Management - Update profile, password, and preferences

🌐 Store Pages

• Public Store Pages - Beautiful, shareable store fronts
• Product Showcase - Grid and list view options
• Search & Filter - Find products by name, category, or tags
• Social Sharing - Share stores on Facebook, Twitter, and more
• Direct Links - SEO-friendly URLs for each store

🚀 Live Demo

Experience CraftStoreBuilder in action: https://craftstorebuilder.netlify.app

Demo Accounts

You can create your own account or explore the platform with sample data that's automatically generated.

🛠️ Tech Stack

• Frontend Framework: React 18.3.1 with TypeScript
• Styling: Tailwind CSS 3.4.1 with custom animations
• Routing: React Router DOM 7.6.3
• Icons: Lucide React 0.344.0
• Build Tool: Vite 5.4.2
• Deployment: Netlify
• Data Storage: LocalStorage (for demo purposes)

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── modals/          # Modal components
│   ├── Features.tsx     # Features showcase
│   ├── Footer.tsx       # Site footer
│   ├── Header.tsx       # Navigation header
│   ├── Hero.tsx         # Landing page hero
│   ├── Pricing.tsx      # Pricing plans
│   ├── ProtectedRoute.tsx # Route protection
│   └── Showcase.tsx     # Store showcase
├── contexts/            # React contexts
│   └── AuthContext.tsx  # Authentication context
├── pages/               # Page components
│   ├── Dashboard.tsx    # User dashboard
│   ├── Home.tsx         # Landing page
│   ├── Login.tsx        # Login page
│   ├── Settings.tsx     # User settings
│   ├── Signup.tsx       # Registration page
│   ├── StoreAnalytics.tsx # Store analytics
│   └── StorePage.tsx    # Public store page
├── types/               # TypeScript type definitions
│   └── index.ts         # Main types
├── App.tsx              # Main app component
├── main.tsx             # App entry point
└── index.css            # Global styles

🎯 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/mobeen-asghar/CraftStoreBuilder.git
   cd CraftStoreBuilder

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🎨 Design System

Colors

• Primary: Lime Green (#84cc16)
• Secondary: Black (#000000)
• Background: White (#ffffff)
• Accent: Gray shades for text and borders

Typography

• Headings: Bold, clear hierarchy
• Body: 150% line height for readability
• UI Elements: Medium weight for buttons and labels

Components

• Buttons: Circular/rounded design
• Cards: Rounded corners with subtle shadows
• Modals: Backdrop blur with smooth animations
• Forms: Rounded inputs with focus states

📱 Responsive Design

CraftStoreBuilder is fully responsive and optimized for:

• Desktop: 1024px and above
• Tablet: 768px - 1023px
• Mobile: 320px - 767px

All components adapt seamlessly across different screen sizes with touch-friendly interactions on mobile devices.

🔧 Key Features Implementation

Store Creation

Users can create multiple stores with different themes and specialties. Each store has its own analytics and product catalog.

Product Management

Comprehensive product management with image galleries, inventory tracking, and category organization.

Analytics Dashboard

Real-time analytics showing views, likes, shares, traffic sources, and device types with exportable data.

Public Store Pages

Beautiful, shareable store pages with product showcases, search functionality, and social sharing capabilities.

🚀 Deployment

The project is configured for easy deployment on Netlify:

1. Build the project

   npm run build

2. Deploy to Netlify

   • Connect your GitHub repository to Netlify
   • Set build command: npm run build
   • Set publish directory: dist

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use Tailwind CSS for styling
• Maintain responsive design principles
• Add proper error handling
• Write clear, descriptive commit messages

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• React Team - For the amazing React framework
• Tailwind CSS - For the utility-first CSS framework
• Lucide - For the beautiful icon library
• Pexels - For the high-quality stock images
• Netlify - For seamless deployment

📞 Support

If you have any questions or need help:

• 📧 Email: [email protected]
• 💬 GitHub Issues: Create an issue

---

Made with ❤️ for artisans worldwide