🚗 Drophere | Carpooling Application Frontend

Drophere is a comprehensive carpooling solution aimed at enhancing convenience, affordability, and safety in shared transportation. This repository contains the frontend web application built with React using Superplate as the starter boilerplate. The full project also includes a Flutter-based mobile app and a backend developed in PHP with Firebase and MySQL.

---

🔍 Project Overview

For Project 01, our team developed Drophere, a platform that connects drivers and passengers for efficient carpooling. The web app serves as an intuitive interface for managing rides, tracking trips, and enhancing user collaboration.

🔑 Key Features

• 📱 Mobile-Friendly Interface
  Responsive design ensuring clean, intuitive user experiences across devices.

• 📍 Live Location Tracking
  Integration with Firebase Realtime Database enables real-time location sharing and trip visibility.

• 🗓️ Streamlined Trip Planning
  Schedule, manage, and view upcoming trips directly from the platform.

---

🛠️ Tech Stack

• React – Used for building the frontend user interface.
• Superplate – A powerful Next.js boilerplate used to scaffold the project quickly.
• Chakra UI – A modular and accessible component library for building clean UIs.
• Axios – Handles HTTP requests to communicate with the backend services.
• MobX / MobX State Tree – State managment
• Firebase Realtime Database – Enables real-time location tracking and live data sync.
• CSS Modules / styled-jsx – For styling components with scoped CSS and modular design.
• GitHub Actions – Automates CI/CD workflows, including building, testing, and deployment.

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• npm

Installation

Clone the repository and install dependencies:

git clone https://github.com/SayuruSandaru/drophere_frontend
cd drophere-frontend
npm install

Run in Development Mode

npm run dev

Build for Production

npm run build

Start Production Server

npm run start

---

📁 Folder Structure

/components       -> Reusable UI components
/pages            -> Application routes
/store            -> MobX State Tree models and stores
/styles           -> Global and modular styles
/utils            -> Utility functions
/public           -> Static assets

---

🙌 Acknowledgements

Special thanks to all the team members who contributed to Drophere, and to the creators of Superplate, Chakra UI, and Firebase for their amazing tools.

---

🌐 Related Repositories

• Drophere Mobile App (Flutter)
• Drophere Backend (PHP + MySQL)

---