DigiVaultMobile

Mobile client for DigiVault — a digital content marketplace where users can browse, purchase, and sell online courses. Built with React Native CLI and TypeScript.

Live Demo

Platform	Link	Notes
Android (Appetize.io)	▶ Run in browser	No install needed — runs in browser
iOS (Appetize.io)	▶ Run in browser	iPhone 14 Pro simulator

Login: test / test

---

Table of Contents

• Features
• Screenshots
• Tech Stack
• Prerequisites
• Installation & Setup
• Running the App
• Project Structure
• Environment Variables
• License

---

Features

• Browse and search courses by category
• Purchase courses and access them in My Vault
• Wishlist and cart management
• JWT-based authentication (login & registration)
• Seller dashboard — create, edit, and manage course listings
• In-app notifications
• Order history with order details
• User profile management (name, email, password, balance)
• Course reviews and ratings
• Course reporting

---

Screenshots

Browsing

Home                    Search                    Course details

Cart, Wishlist & Reviews

Cart                    Wishlist                    Reviews

Orders

Orders                    Order details

Account

Account              Account details              Editing

Seller

My courses                    New course

---

Tech Stack

Category	Library
Framework	React Native CLI 0.84
Language	TypeScript 5.8
Navigation	React Navigation 7 (Native Stack + Bottom Tabs)
Server state	TanStack React Query 5
Auth	JWT via AsyncStorage
Icons	react-native-vector-icons (AntDesign)
Environment	react-native-dotenv

---

Prerequisites

Make sure the following are installed on your machine:

• Node.js >= 22.11.0
• React Native CLI environment (Android Studio / Xcode)
• iOS only: CocoaPods (sudo gem install cocoapods)

---

Installation & Setup

1. Clone the repository

git clone https://github.com/your-org/DigiVaultMobile.git
cd DigiVaultMobile

2. Install dependencies

npm install

3. Configure environment variables

cp .env.example .env

Open .env and fill in your values:

API_BASE_URL_ANDROID=http://10.0.2.2:5052
API_BASE_URL_IOS=http://localhost:5052

Note: Use http://10.0.2.2:<port> for Android emulators and http://localhost:<port> for iOS simulators. 10.0.2.2 is the loopback alias that routes from the Android emulator to the host machine.

4. iOS only — install CocoaPods

cd ios && pod install && cd ..

---

Running the App

Start the Metro bundler:

npm start

Android

npm run android

iOS

npm run ios

After changing .env, always restart Metro with a cleared cache:

npm start -- --reset-cache

---

Project Structure

src/
├── api/            # HTTP request functions (one file per domain)
│   ├── config.ts       # Shared fetch wrapper & auth headers
│   ├── authApi.ts
│   ├── coursesApi.ts
│   └── ...
├── assets/         # Static assets (images, logo)
├── components/     # Reusable UI components
│   ├── CourseCard.tsx
│   ├── StarRating.tsx
│   ├── NotificationBell.tsx
│   └── ...
├── config/         # App-wide constants and theme
│   ├── constants.ts    # BASE_URL from environment
│   └── theme.ts        # Color palette
├── hooks/          # React Query hooks (data fetching & mutations)
│   ├── useCourses.ts
│   ├── useCart.ts
│   ├── useCurrentUser.ts
│   └── ...
├── navigation/     # Stack & tab navigator setup
│   └── AppNavigator.tsx
├── screens/        # One file per screen
│   ├── HomeScreen.tsx
│   ├── CourseDetailScreen.tsx
│   ├── CartScreen.tsx
│   └── ...
└── types/          # TypeScript interfaces and navigation types
    ├── course.ts
    ├── navigation.ts
    └── ...

---

Environment Variables

Variable	Description
API_BASE_URL_ANDROID	Backend URL for Android emulator
API_BASE_URL_IOS	Backend URL for iOS simulator

Android emulator — the emulator cannot reach localhost on the host machine directly. Use the special alias instead:

.env is listed in .gitignore and will never be committed. Use .env.example as the source of truth for required variables.

---

License

MIT