FurniCraft

Modern Furniture E-Commerce Experience Built with React + Vite

---

Live Demo

Production URL: furni-craft-4jd13fny3-elfajomes-projects.vercel.app

Deployed with Vercel for fast global delivery.

---

Preview

Real project visual from the app assets:

---

Why FurniCraft?

FurniCraft is a stylish furniture storefront focused on clean UI, smooth browsing, and modern e-commerce interactions.
It includes product listing, details, wishlist, cart flow, comparison, checkout, and account pages in one cohesive React app architecture.

---

Features

• Elegant homepage with hero, featured products, and inspiration sections
• Shop page with product browsing and details page per item
• Cart management with quantity-aware state
• Wishlist system with real-time counter badges
• Product comparison page for side-by-side decision support
• Checkout and account flows ready for backend integration
• Fully componentized layout with reusable UI parts
• Responsive design patterns for desktop and mobile
• Centralized API/service layer and clean Redux data flow

---

Tech Stack

• Frontend: React 19, React DOM
• Build Tool: Vite 7
• Routing: React Router DOM 7
• State Management: Redux Toolkit + React Redux
• Styling: Tailwind CSS 4
• Icons: React Icons
• Linting: ESLint 9

---

Architecture & Design Patterns

• Component-Based Architecture: Reusable UI and layout components for maintainability
• Container/Presentation Separation: Pages orchestrate logic, UI components focus on display
• Redux Slice Pattern: Domain-based slices (auth, products, cart, wishlist)
• Service Layer Pattern: API calls isolated in src/services for scalability and clean page code
• Central Store + Predictable State Flow: Single source of truth with controlled updates
• Route-Driven Modular Structure: Clear page-level routing with React Router
• Singleton Pattern: Central API client instance is created once in src/api/client.js via getApiClient() and reused everywhere through exported api
• Facade Pattern: Unified app-facing gateway in src/services/index.js via servicesFacade that exposes grouped methods (products, auth, cart, wishlist) while hiding lower-level service details

How Singleton and Facade are used in this codebase

• Singleton (src/api/client.js): apiClientSingleton caches one immutable HTTP client object (Object.freeze(createApiClient())), ensuring consistent request behavior and one source for headers/error handling
• Facade (src/services/index.js): servicesFacade provides a clean interface consumed by feature layers, so pages/slices avoid direct coupling to internal service files and can evolve with minimal refactoring

---

Project Structure

FurniCraft/
├── src/
│   ├── api/              # API client setup
│   ├── components/       # Layout, common, sections, UI components
│   ├── config/           # Environment and app-level config
│   ├── pages/            # Route pages (Home, Shop, Cart, Checkout, etc.)
│   ├── services/         # Service layer for products, auth, cart, wishlist
│   ├── store/            # Redux store + slices
│   ├── utils/            # Utility helpers
│   ├── App.jsx           # Route definitions
│   └── main.jsx          # App bootstrap
├── index.html
├── package.json
└── vite.config.js

---

Getting Started

1) Clone the repository

git clone https://github.com/elfajome/FurniCraft.git
cd FurniCraft

2) Install dependencies

npm install

3) Start development server

npm run dev

4) Build for production

npm run build

5) Preview production build

npm run preview

---

Available Scripts

• npm run dev - Start Vite development server
• npm run build - Build production bundle
• npm run preview - Preview production build locally
• npm run lint - Run ESLint checks
• npm run test - Run unit/integration tests once
• npm run test:watch - Run tests in watch mode
• npm run test:perf - Run performance-focused tests for Redux cart operations

---

Testing Strategy

• Unit tests: validate utility and service behavior (example: formatting and storage safety)
• Integration tests: validate Redux slice behavior end-to-end through actions and selectors
• Performance tests: stress-test cart state operations with larger datasets to detect regressions early

Run performance tests

npm run test:perf

Current performance suite targets cart reducer hotspots:

• bulk item insertion
• bulk quantity updates
• bulk item removals

---

Roadmap

• Add real backend integration and authentication persistence
• Add order history in account section
• Add unit/integration tests
• Deploy and link live demo

---

Contributing

Contributions, ideas, and suggestions are welcome.

1. Fork the project
2. Create your 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

---

Author

Ibrahim Farouk
GitHub: @elfajome

---

License

This project is currently unlicensed.