React Native E-Commerce App

A complete e-commerce mobile application built with React Native, featuring user authentication, product management, shopping cart, and order management.

Features

User Features

• Authentication: Login/Register with role-based access (User/Admin)
• Product Browsing: View products with search and category filtering
• Product Details: Detailed product information with image gallery
• Shopping Cart: Add/remove items, quantity management
• Checkout: Order placement with shipping information
• Order History: Track order status and view past orders
• Profile Management: View and manage user profile

Admin Features

• Dashboard: Overview of orders, revenue, and product statistics
• Product Management: Add, edit, delete products with stock management
• Order Management: View and update order status
• Analytics: Revenue tracking and order insights

Technical Features

• Data Persistence: All data stored locally using AsyncStorage
• Offline Support: App works without internet connection
• Role-based Navigation: Different interfaces for users and admins
• Modern UI: Clean, responsive design with React Native Paper
• TypeScript: Full type safety throughout the application

Prerequisites

• Node.js (>= 16)
• React Native CLI
• Android Studio (for Android development)
• Xcode (for iOS development, macOS only)

Installation

1. Clone the repository

   git clone <repository-url>
   cd react-native-e-commerce

2. Install dependencies

   npm install

3. Install iOS dependencies (macOS only)

   cd ios && pod install && cd ..

4. Start Metro bundler

   npm start

5. Run the app

   # For Android
   npm run android
   
   # For iOS
   npm run ios

Default Accounts

The app comes with pre-configured demo accounts:

Admin Account

• Email: admin@example.com
• Password: admin123
• Role: Administrator

User Account

• Email: user@example.com
• Password: user123
• Role: Customer

Project Structure

src/
├── contexts/           # React Context providers
│   ├── AuthContext.tsx
│   └── CartContext.tsx
├── navigation/         # Navigation configuration
│   ├── AuthNavigator.tsx
│   └── AppNavigator.tsx
├── screens/           # Screen components
│   ├── auth/          # Authentication screens
│   ├── user/          # User screens
│   └── admin/         # Admin screens
├── services/          # Business logic and data services
│   ├── storage.ts
│   ├── productService.ts
│   └── orderService.ts
└── types/             # TypeScript type definitions
    └── index.ts

Key Technologies

• React Native: Mobile app framework
• TypeScript: Type safety and better development experience
• React Navigation: Navigation library
• React Native Paper: Material Design components
• AsyncStorage: Local data persistence
• React Context: State management

Data Storage

All data is stored locally using AsyncStorage:

• Users: User accounts and authentication data
• Products: Product catalog with images, prices, and stock
• Orders: Order history and status tracking
• Cart: Shopping cart items (per session)

Customization

Adding New Product Categories

1. Update the Product type in src/types/index.ts
2. Add categories in the product management screens
3. Update filtering logic in product screens

Modifying UI Theme

1. Update the theme in App.tsx
2. Customize colors in individual screen styles
3. Modify React Native Paper theme configuration

Adding New Order Statuses

1. Update the Order type in src/types/index.ts
2. Add new status options in order management screens
3. Update status color mapping functions

Development Notes

• The app initializes with default data on first launch
• All CRUD operations are performed locally
• Data persists between app restarts
• No backend server required for basic functionality

Troubleshooting

Common Issues

1. Metro bundler issues

   npx react-native start --reset-cache

2. iOS build issues

   cd ios && pod install && cd ..

3. Android build issues

   cd android && ./gradlew clean && cd ..

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.