Stationary-X 📚

A modern React Native mobile application for ordering stationery items online with instant printing services and scheduled delivery options.

Features ✨

• OTP Authentication: Secure phone number verification
• Product Catalog: Browse various stationery items (pens, notebooks, files, etc.)
• Shopping Cart: Add, remove, and manage items
• Delivery Options: Immediate or scheduled delivery
• Time Scheduling: Select specific delivery times
• Product Details: View detailed product information
• Order Management: Cancel individual items or entire orders

Tech Stack 🛠️

• Framework: React Native with Expo
• Navigation: Expo Router
• Styling: NativeWind (Tailwind CSS for React Native)
• HTTP Client: Native Fetch API
• State Management: React Hooks
• Icons: Expo Vector Icons

Prerequisites 📋

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• Android Studio (for Android development)
• Xcode (for iOS development - macOS only)

Installation 🚀

1. Clone the repository

   git clone https://github.com/Ayush-AM/Stationary-X.git
   cd Stationary-X

2. Install dependencies

   npm install

3. Start the development server

   npx expo start

4. Run on device/emulator

   • Press a for Android emulator
   • Press i for iOS simulator
   • Scan QR code with Expo Go app on your phone

API Endpoints 🌐

The app integrates with the following API endpoints:

• Send OTP: POST https://stationaryx-bd.onrender.com/api/v1/send_otp
• Verify OTP: POST https://stationaryx-bd.onrender.com/api/v1/verify_otp

API Request Format

Send OTP:

{
  "phone": "+918830186796"
}

Verify OTP:

{
  "phone": "+918830186796",
  "code": "123456"
}

Project Structure 📁

Stationary-X/
├── app/
│   ├── (tabs)/
│   │   ├── index.tsx          # Main home screen with OTP auth
│   │   └── Cart.tsx           # Shopping cart functionality
│   └── _layout.tsx
├── assets/
│   ├── images/                # Product and UI images
│   └── icons/                 # App icons
├── constants/
│   ├── icons.ts              # Icon exports
│   └── images.ts             # Image exports
├── components/               # Reusable components
└── README.md

Key Features Implementation 🔧

Authentication Flow

1. Phone number input with +91 prefix
2. OTP generation and SMS delivery
3. OTP verification with JWT token response
4. Automatic navigation to main app

Shopping Cart

• Product listing with images and prices
• Individual item management
• Quantity adjustment
• Order cancellation (full order or individual items)
• Bottom slide-up modals for confirmations

Delivery Scheduling

• Immediate delivery option
• Custom time selection with hover-like effects
• Time picker with hours and minutes
• Delivery address management

Screens 📱

1. Intro Screen: Welcome screen with app introduction
2. Authentication: Phone number input and OTP verification
3. Home Screen: Product categories and featured items
4. Cart Screen: Shopping cart with delivery options
5. Product Details: Individual product information
6. Time Scheduler: Custom delivery time selection

Development Commands 💻

# Start development server
npm start

# Run on Android
npm run android

# Run on iOS
npm run ios

# Run on web
npm run web

# Reset project (clean start)
npm run reset-project

# Lint code
npm run lint

Contributing 🤝

1. Fork the repository
2. Create a 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

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Contact 📧

Ayush - GitHub

Project Link: https://github.com/Ayush-AM/Stationary-X

---

Made with ❤️ using React Native and Expo