2

Cy-Eco Bike Rental Platform

A full-stack sustainable bike rental platform promoting eco-friendly urban transportation with real-time availability tracking, user authentication, and comprehensive fleet management capabilities.

GitHub

Cy-Eco: Sustainable Urban Mobility Platform

Eco-Friendly Transportation Through Technology

Project Overview

Cy-Eco is a full-stack bike rental platform designed to promote sustainable transportation in urban environments. The application connects users with available bicycles for short-term and long-term rentals, providing an affordable and environmentally conscious alternative to traditional transportation methods.

Developed as a collaborative project among a 4-person team, where I served as the lead developer responsible for both the complete backend (Node.js/Express) and entire frontend (Next.js) architecture. The platform demonstrates modern full-stack development practices, combining Next.js server-side rendering, Firebase backend services, and a comprehensive TypeScript-based architecture. The platform addresses urban mobility challenges by reducing carbon emissions, providing accessible transportation options, and streamlining bike rental management for both users and administrators.

The project showcases full-stack development capabilities, from designing complex data models and implementing real-time features to deploying multi-environment production infrastructure on Google Cloud Platform.

Key Features

User Authentication & Authorization

Multi-provider authentication system supporting Google, GitHub, and email/password logins through Firebase Authentication. The implementation includes server-side authentication using cookie-based sessions (Nookies), protected routes with automatic redirect handling, and FirebaseUI integration for seamless user experience. User profiles are automatically created in Firestore upon authentication through Firebase Cloud Functions.

Real-Time Bike Availability System

Dynamic bike listing interface displaying real-time availability status across the fleet. Users can browse all available bikes with comprehensive information including bike name, description, pricing (in tokens per hour), physical specifications (size in inches), and high-quality bike images. The system features advanced filtering capabilities with size-based filtering dropdowns, allowing users to quickly find bikes matching their requirements.

Interactive User Dashboard

Personalized dashboard providing users with a comprehensive view of their rental activity. The dashboard displays upcoming bookings with detailed information including bike details with images, rental start and return dates, duration in hours, and calculated costs. The interface implements responsive loading states and graceful empty state handling, ensuring smooth user experience across all scenarios.

Administrative Fleet Management

Comprehensive bike upload and management interface for administrators. The system supports adding new bikes with detailed specifications including:

  • Basic information (name, code, description)
  • Pricing configuration (tokens per hour)
  • Physical specifications (size, weight, number of gears)
  • Component details (frame type, fork, brake system, tire specifications)
  • Bike categorization (Mountain, Road, City, Electric)
  • Maintenance status tracking (Available, Booked, Repairing)
  • Image upload with instant preview functionality

The form includes robust validation and integrates with the repair workflow for comprehensive lifecycle management.

Token-Based Pricing System

Innovative pricing model using tokens instead of traditional currency, creating a flexible and scalable payment system. Rental costs are calculated based on hourly rates with transparent pricing display throughout the user journey.

Comprehensive Rental Management

Complete rental lifecycle tracking system managing the entire booking process from reservation to return. The system tracks customer and bike references through Firestore document relationships, rental periods with precise date/time handling, automated cost calculations, integrated review system for quality feedback, and status tracking throughout the rental lifecycle.

Integrated Maintenance Tracking

Sophisticated maintenance management linking bike repairs directly to the rental system. The platform maintains detailed repair status tracking, historical maintenance records, and automated availability updates, ensuring bikes are only available when in proper working condition.

Technology Stack

Frontend Architecture

  • Framework: Next.js 12.1.5 with Server-Side Rendering (SSR)
  • UI Library: React 17.0.2 with TypeScript 4.6.3
  • Styling: Tailwind CSS 3.0.24 with PostCSS processing and @tailwindcss/forms plugin
  • Component Library: Headless UI 1.5.0 for accessible primitives, Flowbite React 0.1.8
  • Icons: Heroicons 2.0.17 (modern React icon library)
  • State Management: React Hooks with context-based patterns
  • Loading States: React Spinners 0.13.8
  • SVG Processing: @svgr/webpack 6.2.1 for SVG-as-component workflow

Backend Infrastructure

  • Backend as a Service: Firebase 8.10.1 (client SDK) and Firebase Admin 11.7.0 (server SDK)
  • Serverless Functions: Firebase Cloud Functions 3.24.1 (Node.js 16)
  • Database: Cloud Firestore (NoSQL) with collections for users, bikes, and rentals
  • API Integration: Custom RESTful API at api.cyeco.africa with TypeScript API wrapper
  • Authentication: Firebase Authentication with React Firebase Hooks 3.0.5 and React FirebaseUI 5.0.2
  • Session Management: Nookies 2.5.2 for SSR-compatible cookie handling

Development & Deployment

  • Build System: Next.js with custom webpack configuration
  • Code Quality: ESLint 8.13.0 with TypeScript support
  • Deployment Platform: Google Cloud Platform (App Engine) and Firebase Hosting
  • Development Server: Next.js dev server (port 8080)
  • Multi-Environment: Separate development and production API endpoints

Data Architecture

TypeScript-based type-safe data models including comprehensive IBike interface with 25+ properties covering specifications, pricing, components, and status; IRental interface managing booking lifecycle and relationships; and IUser interface for profile management and authentication state.

Technical Implementation Highlights

Server-Side Rendering with Authentication

Implemented Next.js getServerSideProps for server-side authentication verification, ensuring protected routes render only for authenticated users. The system uses cookie-based session management compatible with SSR, automatic redirects to login for unauthorized access, and type-safe authentication context throughout the application.

Type-Safe API Integration

Developed a custom API wrapper (CyecoAPI.tsx) providing type-safe communication between frontend and backend. The implementation includes automatic Firebase Authentication token injection, multi-environment configuration (development/production), comprehensive error handling with user-friendly messages, and fully typed request/response interfaces for compile-time safety.

Comprehensive Data Modeling

Designed extensive TypeScript interfaces representing complex domain models. The IBike interface encompasses basic information (name, code, description, status), pricing and image data, physical specifications (size, weight, gears, weight capacity), detailed component specifications (frame, fork, brakes, tires, drivetrain, seat), type categorization and status tracking, and maintenance metadata (purchase date, repair status).

Real-Time Data Synchronization

Leveraged Firestore's real-time capabilities for instant UI updates when bike availability changes, rental status modifications occur, or new bookings are created. The system maintains document references for efficient relationship management and implements optimistic updates for responsive user experience.

Form Handling with Image Upload

Built sophisticated form components with client-side validation, real-time image preview before upload, unique filename generation to prevent conflicts, multi-field form state management, and error handling with user feedback.

Multi-Environment Architecture

Configured development and production environments with environment-specific API endpoints, separate Firebase projects for isolation, and deployment scripts for each environment (beta and production). The infrastructure uses Google Cloud App Engine configuration via app.yaml and Firebase project aliases through .firebaserc.

My Role & Contributions

As the lead developer in a 4-person team, I was responsible for architecting and implementing both the complete backend and entire frontend of the Cy-Eco platform:

Complete Backend Architecture (Node.js/Express)

Built the entire backend infrastructure from the ground up, including:

  • RESTful API Development: Designed and implemented the complete API at api.cyeco.africa using Node.js and Express, handling all bike management, rental operations, and user interactions
  • Database Design: Architected the Firestore NoSQL database schema with optimized collections for users, bikes, and rentals, including document relationships and indexing strategies
  • Firebase Integration: Configured Firebase Authentication, Cloud Functions, and Firestore with custom security rules and server-side validation
  • API Architecture: Implemented authentication middleware, error handling, request validation, and response formatting for consistent API behavior
  • Cloud Functions: Developed serverless functions for automated user profile creation, rental lifecycle management, and maintenance workflow triggers
  • Multi-Environment Setup: Configured development and production environments with separate Firebase projects, API endpoints, and deployment pipelines

Complete Frontend Architecture (Next.js)

Built the entire frontend application independently, including:

  • Application Structure: Architected the complete Next.js application with page-based routing, server-side rendering for protected routes, and optimized build configuration
  • UI/UX Implementation: Designed and implemented all user interfaces using React, TypeScript, and Tailwind CSS, including responsive layouts for desktop and mobile
  • Component Library: Built comprehensive reusable component system including navigation, forms, dropdowns, lists, authentication flows, and loading states
  • State Management: Implemented React Hooks patterns and context-based state management for global application state
  • Authentication Flow: Integrated Firebase Authentication with FirebaseUI, server-side session management using Nookies, and protected route handling
  • Type-Safe Architecture: Created comprehensive TypeScript interfaces and types covering all data models, API responses, and component props
  • Feature Implementation:
    • User dashboard with rental history and upcoming bookings
    • Real-time bike listings with advanced filtering
    • Administrative bike upload interface with image handling and validation
    • Booking management system with date/time handling and cost calculations
  • API Integration: Built custom API wrapper providing type-safe communication with the backend, automatic token injection, and error handling
  • Performance Optimization: Implemented image optimization, code splitting, lazy loading, and server-side rendering for optimal performance

Additional Contributions

  • DevOps & Deployment: Configured Google Cloud Platform deployment, Docker containerization, Firebase Hosting, and SSL certificate management
  • Testing & Quality: Implemented comprehensive error handling, input validation, and user feedback mechanisms throughout the stack
  • Documentation: Created API documentation, code comments, and deployment procedures for team collaboration

Skills Demonstrated

Full-Stack Development

End-to-end feature implementation from database schema design through backend API to frontend UI. Integration of diverse technologies (React, TypeScript, Firebase, Cloud Functions, Google Cloud Platform) into cohesive architecture. Server-side rendering with authentication and protected routes.

Modern Frontend Practices

Component-based architecture with React and TypeScript. Utility-first CSS with Tailwind for rapid UI development. Form handling with validation and file uploads. Responsive design for cross-device compatibility. Accessible UI components using Headless UI primitives.

Backend & Cloud Services

Firebase ecosystem integration (Authentication, Firestore, Cloud Functions, Hosting). RESTful API design and consumption. NoSQL database modeling with document relationships. Serverless function development for automated workflows. Multi-environment deployment strategies.

Software Engineering

Type-safe development with TypeScript strict mode. Modular architecture promoting code reuse and maintainability. Error handling and user feedback patterns. Version control and collaborative development workflows. Production deployment with monitoring and optimization.

Project Deployment & Status

Target Market & Value Proposition

Cy-Eco was strategically launched in Kilifi, Kenya, a coastal town serving as a gateway for both local and international tourism. The platform addressed the mobility needs of a diverse user base including:

  • University Students: Seeking affordable, flexible transportation for campus commutes and recreational activities
  • Kenyan Tourists: Domestic travelers exploring Kilifi's coastal attractions and natural landscapes
  • International Tourists: Foreign visitors looking for authentic, eco-friendly ways to experience the region
  • Fitness Enthusiasts: Individuals prioritizing exercise and outdoor activities
  • Environmentally Conscious Users: Those committed to reducing carbon footprints and supporting sustainable transportation
  • Nature Engagement: Visitors seeking immersive experiences with Kilifi's beaches, forests, and scenic routes

The pricing model was designed for accessibility, with hourly rental rates ranging from KES 70 to KES 200 (approximately $0.50-$1.50 USD), making bike rentals significantly more affordable than traditional taxi services while providing a healthier, more engaging travel experience.

Commercial Launch & Operations

The platform successfully transitioned from development to commercial operations, achieving several key milestones:

  • Full Production Deployment: Platform went live with complete backend infrastructure, real-time availability tracking, and automated booking system
  • Client Acquisition: Onboarded approximately 20 active clients who regularly utilized the service for various transportation needs
  • Operational Validation: Demonstrated market demand for affordable, eco-friendly transportation in the tourism and student demographics
  • Technical Stability: Platform performed reliably under production workloads with minimal downtime

Operational Challenges & Project Suspension

Despite technical success and positive market reception, the project was temporarily suspended due to operational and resource constraints:

Capital Limitations: As recent university graduates entering the professional workforce, the team faced significant funding constraints. The physical infrastructure required for bike rental operations—including secure storage facilities, maintenance equipment, and working capital for fleet expansion—exceeded available resources during the early-career phase.

Geographic Dispersion: Team members transitioned into full-time professional roles involving frequent travel and geographic relocation, making it challenging to maintain consistent on-site presence in Kilifi. The business model required dedicated personnel for day-to-day operations, customer service, and immediate issue resolution.

Physical Presence Requirements: Unlike purely digital platforms, bike rental necessitates physical infrastructure including a customer-facing shop location for bike pickup/return, on-site staff for customer assistance and basic troubleshooting, and secure storage facilities to prevent theft and weather damage. These requirements proved cost-prohibitive without dedicated full-time management.

Maintenance Complexity: Regular bike maintenance emerged as a significant operational challenge, requiring specialized mechanical knowledge for repairs, inventory management for replacement parts, and rapid response to mechanical failures during active rentals. Without a dedicated maintenance technician, service quality became difficult to sustain.

Future Plans & Potential Relaunch

The team remains committed to Cy-Eco's mission and is exploring pathways for future relaunch with enhanced capabilities:

  • Secured Funding: Seeking investment or partnership opportunities to establish proper physical infrastructure and operational capital
  • E-Bike Integration: Expanding the fleet to include electric bicycles, reducing physical exertion barriers and extending viable trip distances, particularly appealing for tourists exploring coastal areas
  • Scalable Operations Model: Developing partnerships with local businesses for distributed pickup/drop-off locations, reducing centralized infrastructure costs
  • Professional Management: Hiring dedicated operations staff or partnering with established bike shops for maintenance and customer service
  • Technology Evolution: Leveraging lessons learned to enhance the platform with features like GPS tracking, theft prevention systems, and predictive maintenance scheduling

The suspension represents a strategic pause rather than project termination, with the platform's codebase, infrastructure configuration, and operational learnings preserved for future deployment when resource availability aligns with operational requirements.

Project Impact

Cy-Eco demonstrates the viability of web-based platforms for sustainable urban transportation. The project showcases:

  • Environmental Impact: Promoting eco-friendly transportation alternatives reducing carbon emissions
  • Accessibility: Providing affordable mobility solutions for diverse urban populations
  • Operational Efficiency: Streamlining rental operations through automated availability tracking and maintenance management
  • Scalability: Architecture supporting growth from local deployment to city-wide scale

Technical Learnings

Full-Stack Integration Complexity

Gained experience integrating frontend React applications with Firebase backend services, managing authentication flows across client and server contexts, handling real-time data synchronization, and deploying to cloud infrastructure with containerization.

TypeScript for Large Applications

Developed expertise in using TypeScript for maintaining type safety across large codebases with multiple developers, designing interfaces for complex domain models, leveraging IDE support for refactoring and autocomplete, and catching errors at compile-time rather than runtime.

Team Collaboration

Worked effectively in a 4-person team environment, coordinating on shared data models and API contracts, conducting code reviews and pair programming, managing git workflows with feature branches and pull requests, and balancing individual contributions with team objectives.

Production Deployment & DevOps

Hands-on experience with Google Cloud Platform deployment configurations, Firebase Hosting setup and SSL management, multi-environment deployment strategies, Docker containerization for consistent environments, and monitoring and debugging production applications.

Cy-Eco represents a successful collaboration demonstrating how modern web technologies can address real-world urban challenges while promoting environmental sustainability. The project showcases full-stack development capabilities, from complex data modeling to production deployment on cloud infrastructure.