EcoCommute+ is an innovative web application designed to make urban transportation more sustainable, efficient, and accessible. The platform helps users integrate various transportation options (public transit, ride-sharing, bike-sharing), reduce carbon emissions, and decrease urban congestion.
In urban areas, there are several transportation-related challenges:
- Increasing traffic congestion and long commute times
- Air pollution and carbon emissions from transportation
- Lack of integration between different transport systems
- Limited access to public transit and shared mobility options
EcoCommute+ addresses these challenges by:
- Integrated Transport Options: Bringing all available transport options onto a single platform
- Real-time Mapping: Providing real-time navigation and transport information using Mappls API
- Ride-Sharing: Enabling users to share rides and reduce carbon footprint
- Gamification and Rewards: Incentivizing sustainable transport choices through a reward system
- Interactive Maps: Real-time mapping and navigation through integration with Mappls API
- Transport Option Search: Search and filtering for different transport modes (metro, bus, ride-share, bike-share)
- Ride-Sharing Platform: Allows users to offer or find rides
- Rewards System: Points and badges for using sustainable transport options
- Carbon Footprint Tracking: Allows users to see the environmental impact of their transport choices
- Frontend: Next.js, React, TypeScript, Tailwind CSS
- Mapping: Mappls API (India-focused mapping service)
- UI Components: shadcn/ui, Lucide React (icons)
- Animation: Framer Motion
- Styling: Tailwind CSS, CSS Modules
- Node.js (v18 or higher)
- npm or yarn
- Mappls API key (obtain from developer portal)
- Clone the repository:
git clone https://github.com/yourusername/eco-commute-plus.git
cd eco-commute-plus- Install dependencies:
npm install
# or
yarn install- Create a
.envfile and add your Mappls API key:
MAPPLS_API_KEY=your_api_key_here
MAPPLS_CLIENT_ID=your_client_id_here
MAPPLS_CLIENT_SECRET=your_client_secret_here
- Start the development server:
npm run dev
# or
yarn dev- Navigate to
http://localhost:3000in your browser
To create a production build:
npm run build
npm start
# or
yarn build
yarn startA reusable component for displaying interactive maps. It integrates with the Mappls API and provides various map functionalities.
<MapplsMap
center={[28.6139, 77.2090]} // Center point (Delhi)
zoom={12}
height="500px"
markers={transportHubs}
className="shadow-xl rounded-xl"
/>The main landing page that provides an overview of the application and shows key transport hubs.
Allows users to search and filter different transport options (metro, bus, train).
Allows users to offer or find rides, encouraging carpooling.
Gamification and incentive system that rewards users for using sustainable transport options.
To test the project:
npm test
# or
yarn testSome key challenges during the development of this project were:
-
Mappls API Integration: There were some technical challenges with integrating the Mappls API, especially with Next.js client-side rendering.
-
Real-time Data Management: Integrating and displaying real-time data for various transport options.
-
Performance Optimization: Optimizing performance with large amounts of map data and markers.
-
Responsive Design: Adapting map and UI components across different device sizes.
- User Authentication: Full user profiles and authentication system
- Payment Integration: In-app payments for ride-sharing
- AI-based Route Recommendations: Smart route suggestions based on user preferences
- IoT Integration: Integration with smart city sensors and data
- Mobile App: iOS and Android apps for native mobile experience
This project is licensed under the MIT License - see the LICENSE file for details.
- College Canvas
- Hariom Gupta- Lead Developer
- Mohammad Kaif - UI/UX Designer
- Tushar Yadav - Backend Developer
For more information, please contact:
- Email: collegecanvas2004@gmail.com
- Contact: 9667039413
- GitHub: https://github.com/CollegeCanvas
For a smarter, more sustainable future