Shopping App

A simple, standalone Expo shopping app built with TypeScript and Expo Router. This app demonstrates a complete e-commerce flow without authentication or backend integration.

Features

• Product Browsing: View a grid of products with images, prices, and details
• Product Details: See detailed information about each product including wholesale/retail pricing, margins, and popularity
• Shopping Cart: Add/remove products, adjust quantities, and view order summary
• Checkout Flow: Complete a simulated checkout process with order confirmation

Tech Stack

• React Native with Expo
• TypeScript for type safety
• Expo Router for file-based navigation
• React Context API for cart state management
• Expo Image for optimized image loading
• React Native Reanimated for smooth animations

Project Structure

shop/
├── app/                    # Expo Router screens
│   ├── _layout.tsx        # Root layout with navigation
│   ├── index.tsx          # Home/Product listing screen
│   ├── product/[id].tsx   # Product detail screen
│   ├── cart.tsx           # Shopping cart screen
│   └── checkout.tsx       # Checkout screen
├── components/            # Reusable UI components
│   ├── Button.tsx
│   ├── CartButton.tsx
│   ├── CartItemCard.tsx
│   ├── ProductCard.tsx
│   └── ProText.tsx
├── context/               # React Context providers
│   └── CartContext.tsx
├── data/                  # Dummy data and types
│   ├── products.ts
│   └── types.ts
├── theme/                 # Design system
│   ├── colors.ts
│   └── fonts.ts
└── utils/                 # Helper functions
    └── format.ts

Getting Started

Prerequisites

• Node.js (v20+)
• npm or yarn
• Expo CLI (optional, for easier development)

Installation

1. Navigate to the project directory:

   cd shop

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Run on your preferred platform:

   • iOS Simulator: Press i in the terminal
   • Android Emulator: Press a in the terminal
   • Web Browser: Press w in the terminal
   • Physical Device: Scan the QR code with Expo Go app

Features Detail

Product Listing

• Grid layout with 2 columns
• Product images with placeholder support
• Pricing information (wholesale)
• Popularity indicators
• Discount badges
• Tap any product to view details

Product Details

• Full-screen product images
• Wholesale and retail pricing comparison
• Detailed product information (case size, margin, stock)
• Quantity selector
• Add to cart functionality
• Direct access to cart from product page

Shopping Cart

• Grouped by brand for easy organization
• Quantity controls (increase/decrease)
• Remove individual items
• Clear entire cart option
• Real-time price calculations
• Tax calculation (8%)
• Order summary display

Checkout

• Store and contact information form
• Order review with breakdown
• Simulated order processing
• Success confirmation with order ID
• Email confirmation (simulated)
• Automatic cart clearing on success

Customization

Adding Products

Edit data/products.ts to add, remove, or modify products. Each product should follow the Product interface defined in data/types.ts.

Styling

• Colors: Modify theme/colors.ts
• Typography: Adjust font styles in theme/fonts.ts
• Component styles: Each component uses inline styles that can be customized

Tax Rate

Change the tax calculation in context/CartContext.tsx (currently set to 8%).

Notes

• No Backend: All data is static and stored locally
• No Authentication: No login or user management
• No Payment Processing: Checkout is simulated
• Demo Purpose: This is a demonstration app showcasing UI/UX patterns

Future Enhancements

Possible additions to extend this app:

• Search and filter functionality
• Product categories
• Wishlist/favorites
• Order history
• Real backend integration
• Payment gateway integration
• User authentication
• Product reviews and ratings

License

This is a demo project created for educational purposes.