School Project • Web Development

EcoBike: Bike Rental Platform

My first Flask project featuring intelligent defect reporting system with Google Maps API validation, CRUD functions for managing data, and collaboration with team members

Timeline Apr - Aug 2024
Team Size 4 Members
My Role Defect Management & API Integration Developer
Status Completed
Flask Python Google Maps API Bootstrap WTForms

Problem

Bike Defect Management

Bike rental services face challenges with users reporting false or invalid defects, leading to wasted maintenance resources and operational inefficiencies. Without proper validation, admins struggle to prioritize genuine issues from spam reports.

Customer Service Burden

Users repeatedly contact customer service with common questions about rentals, pricing, and policies. Without a self-service knowledge base, support teams are overwhelmed with repetitive inquiries that could be automated.

What is EcoBike?

EcoBike is a Flask-based bike rental platform that connects users with eco-friendly transportation options through an intuitive web interface with Google Maps integration.

My contribution focused on building an intelligent defect reporting system with location validation and a comprehensive FAQ management system to reduce operational costs and improve user experience.

My Role

I developed the defect reporting and FAQ management systems for EcoBike's bike rental platform. My contributions focused on creating intelligent validation systems using Google Maps API, building admin tools for efficient defect management, and implementing a customer self-service FAQ system.

🚲

Defect Reporting System

Comprehensive form allowing users to report bike defects with validation for bike ID, date found, booking date, and location verification via Google Maps API

🗺️

Google Maps API Integration

First API implementation experience using Google Maps API to validate rental locations, ensuring users can only select verified bike pickup points

🔍

Admin Defect Dashboard

Advanced filtering system enabling admins to search defects by bike ID, report ID, status, defect type, and severity for efficient management

❓

FAQ Management System

Dynamic FAQ page with admin CRUD operations (create, read, update, delete) reducing customer service load and improving user experience

✅

Input Validation

Server-side validation preventing invalid submissions through bike ID verification, date range checks, and location coordinate validation

📦

Defect Archive System

Archive functionality for resolved defects maintaining data history while keeping active dashboard clean and performant

Features in Action

See how EcoBike's defect management and FAQ systems work in practice

Click image to enlarge

EcoBike Defect Reporting Form

Defect Reporting Form

Comprehensive form with input validation for bike ID, date found, booking date, defect type, severity, and location via Google Maps API

Google Maps API Integration

Google Maps API Integration

Interactive map allowing users to select verified rental locations with geocoding validation ensuring accurate location data

Admin Defect Dashboard

Admin Defect Dashboard

Central dashboard displaying all reported defects with status indicators, severity levels, and quick action buttons for efficient management

Advanced Defect Filtering

Advanced Filtering System

Multi-criteria filtering enabling admins to search by bike ID, report ID, status, defect type, and severity for quick defect location

Defect Archive System

Archive System

Resolved defects moved to archive maintaining complete data history while keeping active dashboard clean and performant

User FAQ Page

User FAQ Page

Customer-facing FAQ page providing self-service support reducing customer service workload and improving user experience

Create FAQ Interface

Create FAQ

Admin interface for adding new FAQs with question and answer fields, category selection, and priority settings

FAQ Management Dashboard

FAQ Management

Complete CRUD operations dashboard for managing FAQs with edit, delete, and reordering capabilities for content control

Implementation Process

01

Defect Reporting System Design

Designed comprehensive defect reporting form with WTForms validation preventing invalid submissions. Implemented multi-field validation including bike ID verification against database, date range validation (ensuring found date is within booking period), defect type categorization (mechanical, electrical, cosmetic), and severity levels (low, medium, high, critical).

02

Google Maps API Integration

Integrated Google Maps JavaScript API for the first time, enabling interactive map display for location selection. Implemented Geocoding API to validate user-submitted locations against verified bike rental pickup points. Learned API authentication, JavaScript integration, coordinate validation, and geocoding reverse lookup preventing users from selecting invalid locations.

03

Admin Dashboard with Advanced Filtering

Built defect management dashboard with multi-criteria filtering system enabling admins to efficiently locate specific reports. Implemented dynamic SQL queries with filter combinations by bike ID, report ID, status (pending, in-progress, resolved), defect type, and severity. Added sorting, pagination, and quick action buttons for status updates and archiving.

04

FAQ Management System

Developed complete CRUD (Create, Read, Update, Delete) operations for FAQ management reducing customer service load. Created admin interface for adding/editing FAQs with category organization and priority settings. Implemented user-facing FAQ page with search functionality and collapsible accordions for better UX. This self-service system empowers users to find answers independently.

05

Flask Framework Learning & OOP

First experience with Flask framework learning routing, Jinja2 templating, request/response handling, and form processing. Applied Object-Oriented Programming principles by creating Python classes for Defect and FAQ entities. Learned WTForms for validation, Flask-Login concepts (though not implemented), and Bootstrap framework for responsive UI design.

Technical Implementation

Defect Management System

Defect Reporting Form

Framework: WTForms for form rendering and server-side validation with custom validators.

Validation Fields: Bike ID (database lookup verification), Date Found (datetime validation), Booking Date (cross-field validation ensuring found date is within booking period), Defect Type (SelectField with predefined categories), Severity (RadioField: low/medium/high/critical), Location (Google Maps coordinate validation).

Security: CSRF token protection, server-side validation preventing malicious input, SQL injection prevention through parameterized queries.

Admin Defect Dashboard

Database Queries: Dynamic SQLAlchemy queries with multiple filter combinations building WHERE clauses based on admin filter selections.

Filtering Logic: Multi-criteria filtering by bike_id, report_id, status, defect_type, severity using AND operators for combined filters.

Features: Sortable columns, pagination (20 reports per page), status update buttons (pending → in-progress → resolved), archive functionality moving resolved defects to separate table.

UI: Bootstrap table with color-coded severity badges (green: low, yellow: medium, orange: high, red: critical), responsive design, quick action buttons.

Archive System

Purpose: Maintain complete defect history while keeping active dashboard performant and clutter-free.

Implementation: Separate archive table with database migration moving resolved defects after 30 days or manual admin trigger.

Benefits: Improved dashboard loading speed, historical data preservation, compliance with record-keeping requirements.

Google Maps API Integration

Maps JavaScript API

Purpose: Display interactive map allowing users to visually select bike rental location instead of manual address entry.

Implementation: Embedded map with custom markers for verified bike stations, click listeners capturing latitude/longitude coordinates.

Learning: First API integration experience learning API key authentication, JavaScript SDK integration, asynchronous callback handling, and map event listeners.

API Integration Challenges

Challenges Overcome: Learning API documentation, debugging JavaScript-Python data passing, handling API rate limits, managing API key security, implementing fallback for API failures.

Skills Gained: Reading technical documentation, RESTful API concepts, asynchronous request handling, error handling and user feedback, environment variable management for API keys.

FAQ Management System

CRUD Operations

Create: Admin form with question/answer fields, category dropdown (General, Billing, Rental, Technical), priority selection affecting display order.

Read: User-facing FAQ page with collapsible Bootstrap accordions, category filtering, search functionality using JavaScript filter on FAQ titles.

Update: Edit interface pre-populating form with existing FAQ data, version history tracking showing last modified timestamp and admin user.

Delete: Soft delete with confirmation modal, archived FAQs moved to deleted_faqs table maintaining data integrity for analytics.

User Experience Design

Search Functionality: Client-side JavaScript live search filtering FAQs as user types without page reload.

Category Organization: FAQs grouped by category (General, Billing, Rental, Technical) with expandable sections.

Mobile Responsive: Bootstrap responsive design with touch-friendly accordions, mobile-optimized font sizes, collapsible categories.

Impact: Reduced customer service tickets by 30% (hypothetical metric) through self-service support system.

Flask Framework & Architecture

Flask Fundamentals

Routing: Created routes for defect reporting (/report-defect), admin dashboard (/admin/defects), FAQ management (/admin/faq), user FAQ page (/faq).

Request Handling: GET requests for displaying forms and data, POST requests for form submissions, handling form data with request.form, JSON responses for AJAX calls.

Templating: Jinja2 template inheritance with base.html, template variables passing data from routes, conditional rendering, loop iteration for defect lists and FAQ displays.

Object-Oriented Programming

Classes Created: Defect class (attributes: bike_id, date_found, defect_type, severity, location, status), FAQ class (question, answer, category, priority).

Methods: validate() method on Defect class checking business logic, archive() method moving resolved defects, FAQ search() method filtering by keyword.

Learning: First experience with OOP concepts including encapsulation (private attributes), inheritance (extending base model class), methods vs functions.

Database & Frontend

SQLite: Relational database with tables for defects, bikes, faqs, users. Foreign key relationships linking defects to bikes, one-to-many relationships.

Bootstrap: Responsive grid system, form components (input groups, select dropdowns, radio buttons), navigation navbar, table styling with striped rows.

WTForms: Form classes defining field types, built-in validators (DataRequired, Email, Length), custom validators (bike_id_exists, date_in_range).

Key Learning Outcomes

💡

The Challenge

As my first Flask project, everything was new - from understanding web framework architecture to integrating external APIs. Building production-ready features like the defect reporting system with Google Maps validation required learning Flask routing, form validation, database operations, and API integration simultaneously. The biggest challenge was experimenting with API implementation for the first time without prior experience.

🛠️

Skills Developed

  • Flask framework fundamentals (routing, templates, request handling)
  • Google Maps API integration (Maps JavaScript API, Geocoding API)
  • WTForms validation with custom validators
  • Object-Oriented Programming principles (classes, methods, encapsulation)
  • SQLite database operations and SQLAlchemy ORM
  • Bootstrap responsive design and UI components
  • CRUD operations implementation
  • API documentation reading and debugging
📈

Growth & Impact

EcoBike was my introduction to full-stack development and API integration. I learned to read technical documentation independently, debug integration issues by analyzing browser console and network requests, and structure code with OOP principles. The defect management system taught me practical input validation preventing bad data from entering the system. The FAQ management system demonstrated how self-service features reduce operational costs. This project proved I could learn complex technologies independently and built my confidence to tackle authentication systems in Elderlink and advanced data processing in DBNYP.

First
Flask Project
3
API Integrations
100%
Responsive Design
OOP
Architecture Pattern

View Project

View Source Code

Explore the complete Flask application on GitHub
← Back to All Projects