CampusPool

About the Project and Inspiration Every single day, university students carpool to campus to save on fuel and reduce transit friction. However, managing the logistics always turns into an awkward problem: tracking who paid, arguing over mobile wallet transfer fees, and leaving drivers, who provide the vehicle, maintenance, and driving effort, frequently uncompensated.

CampusPool Pro was built to completely eliminate that daily friction. The primary goal was to create a zero-friction, transparent expense-splitting platform that calculates exact fuel consumption based on distance and vehicle efficiency, factors in custom driver compensation, and distributes mobile wallet transfer fees fairly so every commuter pays their exact share.

How the Project Was Built CampusPool Pro is engineered for absolute speed, reliability, and ease of use, utilizing a modern, high-performance vanilla web stack:

Frontend and Layout: Built with semantic HTML5 markup, featuring a responsive top navigation bar, a centered hero section, a three-column feature showcase, and a dedicated full-width interactive calculator container.

Styling and Aesthetics: Styled with a custom dark-themed radial gradient, glassmorphism card blur effects, vibrant cyan and blue accents using Plus Jakarta Sans typography, and fluid CSS media queries to ensure a seamless experience across desktop monitors and mobile screens.

Core Logic: Powered by clean JavaScript handling route parameters, mathematical conversion models, and dynamic document object model rendering.

Deployment and Version Control: Version-controlled using Git and hosted live via GitHub Pages, providing judges and users with instant, one-click access to a fully functioning production app.

Mathematical Model and Expense Calculation Engine Fuel Consumption Computation: The total fuel volume consumed during a trip is determined by dividing the aggregate distance traveled by the vehicle's fuel efficiency rating.

Total Fuel Cost Calculation: The total monetary cost of the fuel is calculated by multiplying the total fuel volume consumed by the prevailing market price per liter.

Grand Total Trip Expense Aggregation: The comprehensive expense of the journey aggregates the fuel expenditure, custom driver compensation for vehicle maintenance and time, and mobile wallet transaction charges.

Cost Distribution Per Passenger: The final financial obligation is distributed evenly among the passengers, excluding the driver from individual passenger split calculations to ensure an equitable division.

Challenges Faced Accurate Driver Accounting and Fair Splitting: Ensuring the driver's vehicle depreciation, maintenance, and time are properly compensated without complicating the user interface required designing a dynamic state machine that automatically factors in the driver alongside the passengers.

Responsive Centered Layout Architecture: Transitioning from a crowded layout to a spacious, centered vertical storytelling flow required meticulous CSS grid restructuring and flexbox alignment to maintain a pristine application aesthetic across all screen sizes.

Cache Management on Deployment: Ensuring fast updates propagate seamlessly across live environments without browser-caching old CSS assets required precise version-tagging and robust continuous integration and deployment handling through GitHub Pages.

Lessons Learned Building CampusPool Pro highlighted the immense value of user-centric user interface and user experience design in solving everyday real-world problems. Practical expertise was deepened in modern CSS layouts using Flexbox and Grid, state synchronization in vanilla JavaScript, mathematical modeling for real-world utility applications, and rapid deployment pipelines using GitHub Pages. Most importantly, the process demonstrated how to take a local prototype and transform it into a polished, high-performance web application ready for real commuters.

Built With

• css
• css-grid
• fintech
• flexbox
• git
• github
• glassmorphism
• html
• javascript
• mobile-friendly
• responsive-design
• ui/ux-design
• vanilla-js
• web-app