This is a modern mobile e-commerce product listing application built using React Native, Expo Router, and TypeScript. Features a sleek dark theme with red accents, persistent data storage, and a polished user experience.
- ✅ Product listing from FakeStore API with modern grid layout
- ✅ Dedicated product details screen with portrait orientation lock
- ✅ Persistent wishlist using AsyncStorage with context provider
- ✅ Full cart functionality with quantity controls and persistent storage
- ✅ Dynamic tab badges showing cart and wishlist item counts
- ✅ Advanced search with real-time filtering
- ✅ Swipe navigation between tabs with gesture recognition
- ✅ Dark theme with black background and red (#e50914) accent colors
- ✅ Modern bottom-sheet filter modal (category, rating, price sorting)
- ✅ Gradient hero section with integrated search bar
- ✅ Skeleton loading states for smooth user experience
- ✅ Reusable UI components (AppButton, ProductCard, FilterModal)
- ✅ Vertical content centering on product details screen
- ✅ Custom back button with proper navigation
- ✅ Intuitive swipe gestures with visual feedback and haptic response
- ✅ Tab position indicators and edge swipe boundaries
- ✅ First-time user tutorial for swipe navigation discovery
- ✅ File-based routing with Expo Router
- ✅ Context API for state management (Cart & Wishlist)
- ✅ TypeScript for type safety
- ✅ Screen orientation control
- ✅ AsyncStorage for data persistence
- ✅ Component-based architecture
- React Native - Mobile app framework
- Expo + Expo Router - Development platform and navigation
- TypeScript - Type-safe JavaScript
- AsyncStorage - Local data persistence
- Context API - State management
- expo-linear-gradient - Gradient backgrounds
- expo-screen-orientation - Orientation control
- @react-native-picker/picker - Filter dropdowns
- react-native-gesture-handler - Swipe gesture detection
- react-native-reanimated - Smooth animations
- expo-haptics - Tactile feedback for gestures
- FakeStore API - Product data source
- Node.js (v18 or higher)
- npm or yarn
- Expo CLI (
npm install -g @expo/cli) - iOS Simulator / Android Emulator or physical device
-
Clone the repository
git clone https://github.com/shiv989898/E-Commerce cd E-Commerce -
Install dependencies
npm install
-
Start the development server
npx expo start
-
Run on device/simulator
- Press
ifor iOS Simulator - Press
afor Android Emulator - Scan QR code with Expo Go app on physical device
- Press
- Data Source: FakeStore API
- Endpoints Used:
GET /products- Fetch all products with filtering supportGET /products/{id}- Fetch single product detailsGET /products/categories- Fetch categories for filter options
E-Commerce/
├── 📱 app/ # App routing and screens
│ ├── _layout.tsx # Root layout with navigation config
│ ├── +not-found.tsx # 404 error screen
│ ├── (tabs)/ # Tab navigation group
│ │ ├── _layout.tsx # Tab layout with providers and badges
│ │ ├── index.tsx # Home screen with product grid
│ │ ├── Cart.tsx # Shopping cart screen
│ │ ├── wishlist.tsx # Wishlist screen
│ │ └── explore.tsx # Explore/discovery screen
│ └── details/
│ └── [id].tsx # Dynamic product details screen
├── 🎨 components/ # Reusable UI components
│ ├── ProductCard.tsx # Product grid item component
│ ├── ProductDetails.tsx # Product detail view component
│ ├── ui/ # Modern UI components
│ │ ├── AppButton.tsx # Reusable button with variants
│ │ └── FilterModal.tsx # Bottom-sheet filter modal
│ └── Themed*.tsx # Theme-aware components
├── 🎯 context/ # State management
│ ├── CartContext.tsx # Persistent cart state with AsyncStorage
│ └── WishlistContext.tsx # Persistent wishlist state with AsyncStorage
├── 🎨 constants/
│ └── Colors.ts # Dark theme color tokens
├── 🔧 hooks/ # Custom React hooks
└── 📦 assets/ # Static assets (images, fonts)
- Gesture-Based Navigation: Swipe left/right anywhere on screen to navigate between tabs
- Tab Order: Home → Wishlist → Cart → Explore (bidirectional)
- Smart Thresholds: 25% screen width swipe or high velocity triggers navigation
- Visual Feedback: Edge indicators, color tints, and position dots
- Haptic Response: Tactile feedback on successful navigation
- First-Time Tutorial: Animated guide for new users (shown once)
- Smooth Animations: Spring-based transitions with proper damping
- Consistent black (#000000) background across all screens
- Red (#e50914) accent color for interactive elements
- Centralized color system in
constants/Colors.ts
- Wishlist: AsyncStorage with Context API for persistent favorites
- Cart: AsyncStorage with quantity management and persistent shopping cart
- State Sync: Real-time synchronization between storage and UI
- FilterModal: Bottom-sheet style modal with category, rating, and price sorting
- AppButton: Reusable button component with primary/secondary variants
- ProductCard: Optimized grid layout with wishlist toggle and add-to-cart
- Dynamic Badges: Tab navigation with real-time cart and wishlist counts
- File-based routing with Expo Router for clean navigation
- Portrait orientation lock on product details screen
- Vertical content centering for optimal viewing
- Custom back navigation with proper screen transitions
- TypeScript: Full type safety throughout the application
- Context API: Global state management without external libraries
- AsyncStorage: Persistent data storage for cart and wishlist
- Component Architecture: Modular, reusable UI components
- Performance: Optimized rendering with proper state management
- Error Handling: Graceful error states and loading indicators
Shiv Goyal
📧 shivgoyal9988@gmail.com
🔗 GitHub Profile