Trash Detail is a multi-role, real-time waste management and problem tracking mobile application built with React Native and Expo. It bridges communication gaps between field waste collection personnel, customers, and administrative management teams by enabling instant photo-documented issue reporting and live support tracking.
| 🔐 Login & Authentication | 📸 Guided Problem Capture | 👤 User Profile | 🎉 Problem Submitted |
|---|---|---|---|
 |
 |
 |
 |
| Secure Authentication Email/Password & Role routing |
Step 1/4: Camera Capture Instant photo evidence logging |
User Profile Management Role details & account info |
Instant Confirmation Unique ID generation (e.g. P2) |
- 4-Step Wizard: Streamlined reporting workflow (
Capture Photo➔Problem Details➔Select Customer➔Overview). - In-App Camera & Gallery: Native camera capture powered by
expo-camerawith built-in image compression and manipulation (expo-image-manipulator). - Cloudinary Integration: Automated image uploading to Cloudinary for reliable remote storage and URL distribution.
- Categorization: Report issues such as blocked bins, parked cars blocking dumpsters, locked gates, overflowing waste, or road construction.
- 👷 Employees: Document field collection obstacles, track report progress, and receive live notifications on problem resolution.
- 🏘️ Customers: View logged issues affecting their premises, track progress, and communicate directly with support teams.
- 🛡️ Admins & Super Admins: Operational dashboard to view, review, forward, or cancel reported problems, manage user permissions, and invite new members.
- Socket.io Integration: Low-latency, bidirectional WebSocket connection for live messaging.
- Dedicated Chat Threads: Separate communication channels for problem resolution and customer support requests.
- Rich Status Alerts: Real-time read receipts, unread message badges, and instant toast notifications via
@baronha/ting.
- JWT & Role-Based Navigation: Protected routes auto-filtered by user role using Expo Router layouts (
(auth),(employee),(customer),(admin)). - Password Recovery & OTP: Password reset flow with verification code support.
| Domain | Technology / Library |
|---|---|
| Framework | React Native 0.81.5 with Expo SDK 54 |
| Routing | Expo Router v6 (File-based routing & role groups) |
| Language | TypeScript 5.9 |
| Styling | NativeWind v4 & TailwindCSS v3 |
| State Management | Redux Toolkit & RTK Query (@reduxjs/toolkit) |
| Persistence | @react-native-async-storage/async-storage |
| Real-Time Communication | Socket.io Client v4 |
| Media & Native Hardware | expo-camera, expo-image-picker, expo-image-manipulator, expo-location |
| Notifications & Toasts | @baronha/ting & expo-haptics |
trash-detail/
├── app/ # Expo Router file-based pages & route groups
│ ├── (admin)/ # Admin portal routes & tab navigation
│ ├── (auth)/ # Authentication screens (login, register, forgot/reset password)
│ ├── (customer)/ # Customer portal routes & tab navigation
│ ├── (employee)/ # Employee portal routes (problem creation wizard & tabs)
│ ├── shared/ # Shared screen components (e.g. Notifications)
│ ├── _layout.tsx # Root layout & Redux / Navigation providers
│ └── index.tsx # App entry redirect handler
├── assets/ # Media & design assets
│ ├── images/ # App icons, splash screens, & vector graphics
│ └── screenshots/ # Documentation & README screenshots
│ ├── 1.webp # Login screen
│ ├── 2.webp # Camera capture step
│ ├── 3.webp # User profile
│ └── 4.webp # Submission confirmation
├── components/ # Reusable React components split by domain
│ ├── admin/ # Admin-specific components
│ ├── auth/ # Authentication forms & inputs
│ ├── customer/ # Customer views & cards
│ ├── employee/ # Problem reporting steps & employee UI
│ └── shared/ # Shared UI elements (headers, buttons, modals)
├── constants/ # Color tokens, roles, step definitions, state constants
├── hooks/ # Custom React hooks (Redux typed hooks, socket listeners)
├── scripts/ # Build & automation scripts (e.g. Android AAB signer)
├── store/ # Redux store configuration & RTK Query API slices
│ ├── slices/ # API slices (auth, admin, employee, customer, chat, notification)
│ └── store.ts # Main store configuration
├── types/ # TypeScript declarations (API schemas, components, models)
└── utils/ # Helper utilities (time formatting, Cloudinary uploader)
Ensure you have the following installed on your machine:
- Node.js:
v18.xor higher - npm / yarn / pnpm / bun
- Expo Go app on your mobile device (or Android Studio / Xcode for emulators)
-
Clone the repository:
git clone https://github.com/xyryc/trash-detail.git cd trash-detail -
Install dependencies:
npm install
-
Configure Environment Variables: Create a
.envfile in the root directory based on.env.example:EXPO_PUBLIC_API_URL=https://your-api-endpoint.com/api EXPO_PUBLIC_SOCKET_URL=https://your-api-endpoint.com EXPO_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name EXPO_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_upload_preset # Android Signing Credentials (Optional for local development) ANDROID_KEYSTORE_FILE=upload-keystore.jks ANDROID_KEY_ALIAS=upload ANDROID_KEYSTORE_PASSWORD=your_keystore_password ANDROID_KEY_PASSWORD=your_key_password
Start the Expo bundler:
npm start
# or
npx expo startFrom the terminal menu, you can press:
ato open in Android Emulatorito open in iOS Simulatorwto open in Web Browser- Scan the QR code with Expo Go on your physical device
| Target Platform | Command | Description |
|---|---|---|
| Android | npm run android |
Runs app on connected Android device/emulator |
| iOS | npm run ios |
Runs app on iOS simulator |
| Web | npm run web |
Launches local web development server |
| Linter | npm run lint |
Runs Expo ESLint checks |
This project includes an automated script (scripts/build-android-aab-signed.mjs) to generate signed Android App Bundles (.aab) ready for Google Play Store upload.
-
Ensure environment variables are configured:
export ANDROID_KEYSTORE_FILE="upload-keystore.jks" export ANDROID_KEYSTORE_PASSWORD="your_keystore_password" export ANDROID_KEY_ALIAS="upload" export ANDROID_KEY_PASSWORD="your_key_password"
-
Execute the build script:
npm run android:aab
The generated signed bundle will be available at:
android/app/build/outputs/bundle/release/app-release.aab -
Verification Utilities:
- Check keystore details:
keytool -list -v -keystore upload-keystore.jks -alias "$ANDROID_KEY_ALIAS" - Verify AAB Signature:
jarsigner -verify -verbose -certs android/app/build/outputs/bundle/release/app-release.aab
- Generate Gradle Signing Report:
npm run android:signingReport
- Check keystore details:
| Command | Action |
|---|---|
npm start |
Starts the Expo Metro bundler |
npm run android |
Compiles & launches native Android dev build |
npm run ios |
Compiles & launches native iOS dev build |
npm run web |
Launches Expo web dev server |
npm run lint |
Runs ESLint analysis |
npm run android:aab |
Builds a signed Android App Bundle (.aab) |
npm run android:signingReport |
Outputs Gradle signing certificate details |
npm run reset-project |
Resets project to a blank starter template |
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git checkout -b feature/AmazingFeature). - Open a Pull Request.
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license. See the LICENSE file for details.