Fabrica Store Website
Fabrica Store is a modern, full-featured e-commerce platform built with cutting-edge web technologies. The project delivers a seamless shopping experience with an advanced admin dashboard, secure authentication system, and fully responsive user interface. The project demonstrates expertise in modern web development, performance optimization, and best practices.
Core Tech Stack
- Next.js
- React
- Firebase
- React Query
- Material-UI
Performance
- Server-Side Rendering (SSR) for initial page load
- Static Site Generation (SSG) where applicable
- Incremental Static Regeneration (ISR) for dynamic content
- Automatic Code Splitting by Next.js
- Image Optimization with next/image
Security
- Firebase Security Rules for database protection
- Environment Variables for API key protection
- Protected Routes with authentication checks
- Role-Based Access Control (Admin/Customer)
- Input Validation and sanitization
Key Features
Professional product display with multi-image gallery
Interactive product cards with hover effects
Multiple images support per product
Automatic image optimization via Next.js Image
Skeleton Loading for improved loading experience
Real-time product search from header
Category-based filtering
Query Parameters for search management
Auto-suggest with result highlighting
Responsive search working on all devices
Complete product details page
Interactive image gallery
Price, description, category, and ratings display
Server Component for performance and SEO
ISR (Incremental Static Regeneration) for automatic updates
Secure login/logout
New account creation
Session management
Protected Routes
User role management (Admin/Customer)
Real-time user status updates
Comprehensive admin dashboard
Real-time statistics (Products, Orders, Customers, Sales)
Top products display
Recent activities log
User management (activate/deactivate, change type)
Professional and responsive admin interface
Add new products
Update products
Delete products
Image upload to Cloudinary
Data storage in Firestore
Fully responsive design (Mobile, Tablet, Desktop)
Dark Mode / Light Mode
Skeleton Loading States
Smooth Animations & Transitions
Optimistic UI Updates
Error Handling & User Feedback
Server-Side Rendering (SSR)
Static Site Generation (SSG)
Incremental Static Regeneration (ISR)
Automatic Code Splitting
Image Optimization
Data Caching (React Query + localStorage)
Component Lazy Loading
Page Prefetching
Project Architecture
app/ ├── _components/ │ ├── Header/ # Header components (Logo, Search, Cart, Theme Toggle, Profile) │ ├── content/ # Product components (Card, Gallery, Details, List, Skeletons) │ ├── footer/ # Footer component │ └── registeration/ # Registration pages ├── lib/ # Business logic and APIs │ ├── authenticationApi.js # Complete auth system with Context │ ├── productsContextApis.js # Products state management │ └── prudectusFetching.js # Products data fetching ├── _utilties/ # Configuration files │ ├── firebaseConfig.js # Firebase setup │ └── cloudinaryUpload.js # Image upload utility ├── context/ # React Contexts │ └── ThemeContext.js # Dark/Light mode management ├── hooks/ # Custom React Hooks │ └── useTheme.js # Theme hook ├── products/ # Product pages │ ├── page.jsx # All products with search/filter │ └── [id]/ # Dynamic route for product details │ ├── page.jsx # Server Component for SEO │ └── loading.jsx # Loading state ├── Dashboard/ # Admin dashboard │ ├── page.jsx # Main dashboard with statistics │ └── adminUserMangement/ # User management ├── login/ # Authentication pages ├── page.js # Home page (Server Component) ├── layout.js # Root layout with providers ├── providers.js # React Query provider └── globals.css # Global styles and CSS variables
Engineering Strategies
- Server Components for faster data fetching, better SEO, and reduced client bundle size
- Client Components for interactive sections (Search, Cart, Authentication, Theme Toggle)
- Suspense Boundaries with Skeleton Loading for improved perceived performance
- Incremental Static Regeneration (ISR) with revalidate for automatic content updates
- Query Parameters for managing search and filtering without Context API overhead
- Automatic Prefetching for pages via next/link for instant navigation
- Data Caching with TanStack React Query (3-5 minute stale time) and localStorage
- State Management via React Context API (Auth, Products, Theme) and React Query
- Code Splitting and Lazy Loading for optimal bundle size and performance
- Image Optimization with Next.js Image component and Cloudinary CDN
- Firebase Integration for secure authentication and real-time database operations
- Role-Based Access Control (RBAC) with Admin/Customer roles and protected routes
- Responsive Design with Mobile-First approach and Material-UI breakpoints
- Dark Mode implementation with system preference detection and smooth transitions
- Error Handling and User Feedback with proper error boundaries
- Environment Variables for secure API key management
- Vercel Deployment with automatic CI/CD and edge network optimization
Visual Interface
