🎨 Nujuum Arts - E-commerce Platform

Make Your Home Amazing with Art

A modern, responsive e-commerce website for canvas paintings and fine art, built with React, Next.js, TypeScript, and Framer M---

📞 Contact

Project Creator

Mowlid Haibe
Digital Empowerment Hub Founder & Lead Developer

• 📧 Email: malitmohamud@gmail.com
• 🌐 LinkedIn: Connect with me
• 🐙 GitHub: @mawlid1431

Project Information

• Project Start Date: September 25, 2025
• Current Version: 1.1.0
• Status: Active Development - Database Integrated
• Repository: Arts

---

📄 Supporton.

---

✨ Features

🛍️ Customer Experience

• Animated Homepage with smooth scrolling and art gallery showcase
• Product Catalog with filtering by Canvas/Fine Art paintings
• Shopping Cart with persistent local storage
• Checkout Process with customer information collection
• Dark/Light Mode toggle with smooth transitions
• WhatsApp Integration for customer inquiries
• Responsive Design across all devices

🔧 Admin Dashboard

• Secure Authentication with demo credentials
• Product Management - Add, edit, delete artworks
• Order Processing - View and manage customer orders
• Analytics Overview - Sales insights and metrics

🎯 Technical Highlights

• React 18 with TypeScript for type safety
• Next.js 15 for optimal performance
• Tailwind CSS v4 with custom design system
• Framer Motion for smooth animations
• ShadCN/UI component library
• Mobile-First responsive design

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm 8+ or yarn

Installation

# Clone the repository
git clone https://github.com/nujuumarts/nujuum-arts-ecommerce.git

# Navigate to project directory
cd nujuum-arts-ecommerce

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3000 to see the magic! ✨

Admin Access

• URL: /admin
• Credentials: Set in your .env.local file (see .env.example)
• Use the "Quick Login" button for demo access

---

📱 Screenshots

Homepage

Beautiful animated hero section with art gallery showcase and smooth scroll effects.

Shop Page

Clean product grid with filtering options and smooth hover animations.

Admin Dashboard

Comprehensive admin panel for managing products and orders.

---

🛠️ Tech Stack

Technology	Purpose	Version
React	UI Framework	18.3.1
Next.js	Full-stack Framework	15.0.3
TypeScript	Type Safety	5.6.3
Tailwind CSS	Styling	4.0.0-alpha
Framer Motion	Animations	11.11.17
Lucide React	Icons	Latest
ShadCN/UI	Component Library	Latest

---

📁 Project Structure

nujuum-arts-ecommerce/
├── 🎨 App.tsx                 # Main app component
├── 📁 components/
│   ├── 📁 admin/             # Admin dashboard
│   ├── 📁 pages/             # Page components
│   ├── 📁 ui/                # Reusable UI components
│   └── 📁 figma/             # Design integration
├── 📁 contexts/              # React contexts
├── 📁 hooks/                 # Custom hooks
├── 📁 lib/                   # Utilities & mock data
├── 📁 styles/                # Global styles
├── 📁 types/                 # TypeScript definitions
└── 📄 INSTALLATION.md        # Detailed setup guide

---

🎨 Design System

Color Palette

• Primary: #030213 (Deep Black)
• Background: #ffffff (Pure White)
• Accent: #e9ebef (Light Gray)
• Dark Mode: Automatically inverted colors

Typography

• Clean, modern font stack
• Responsive sizing
• Optimized line heights

Animations

• Smooth page transitions
• Hover effects on all interactive elements
• Scroll-triggered animations
• Loading states with skeletons

---

🔗 Key Features Deep Dive

🎯 Shopping Experience

• Product Discovery: Intuitive filtering and search
• Cart Management: Persistent across sessions
• Checkout Flow: Streamlined customer data collection
• Order Confirmation: Clear status updates

📊 Admin Capabilities

• Product CRUD: Full product lifecycle management
• Order Management: Process and track orders
• Dashboard Analytics: Sales insights and metrics
• User Authentication: Secure admin access

🎨 Animation System

• Page Transitions: Smooth navigation between routes
• Micro-interactions: Hover states and button feedback
• Scroll Animations: Elements animate into view
• Loading States: Skeleton screens and spinners

---

🚀 Performance Optimizations

• Code Splitting: Automatic with Next.js
• Image Optimization: Next.js Image component
• Bundle Analysis: Webpack bundle analyzer
• Caching: Static generation where possible
• Lazy Loading: Components load on demand

---

🔧 Development

Available Scripts

npm run dev        # Development server
npm run build      # Production build
npm run start      # Production server
npm run lint       # Code linting
npm run type-check # TypeScript checking

Environment Variables

NEXT_PUBLIC_SITE_NAME=Nujuum Arts
NEXT_PUBLIC_SITE_URL=https://nujuumarts.com
NEXT_PUBLIC_WHATSAPP_NUMBER=+1234567890

---

🌟 Contributing

We welcome contributions! Please see our contributing guidelines:

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

---

📄 License

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

---

📞 Support

• 📧 Email: support@nujuumarts.com
• 💬 WhatsApp: Available on website
• 🌐 Website: nujuumarts.com
• 📱 Social: Follow us for updates

---

🙏 Acknowledgments

• Unsplash for beautiful artwork images
• Lucide for the icon library
• ShadCN for the component system
• Tailwind CSS for the styling framework
• Framer for the animation library

---

Made with ❤️ for art lovers everywhere

🎨 Visit Nujuum Arts • 📧 Contact Us • ⭐ Star this repo