Metro Station Finder - WIP

🚇 Introduction

Finding the closest metro station in Dhaka was a real headache. Every time someone asked, "Where's the nearest metro station to where I'm going?" I had to dig through maps, trying to figure it out. It was a slow and annoying process because Google Maps still needed to show metro stations. That's when I thought of a better way. I created the Metro Station Finder, a simple app made with Next.js. It makes my life easier by quickly showing the closest metro station and how far it is just by entering a location. No more map headaches!

✨ Features

• Search functionality to input a location.
• Interactive map view to display user's location and nearest metro station.
• Distance calculation from the user's location to the nearest metro station.
• Fare calculation between two stations.

💻 Tech Stack

Hosted with GitHub Pages

Usage

Enter a location in the search bar and click the 'Search' button. The map will update to show your location and the nearest metro station, along with the distance to it.

Getting Started

Prerequisites

P.S. This is what I had installed while working on this.

Project Directory Structure

metro-station-finder/
├── src/
│   ├── components/
│   │   ├── CustomDropdown.tsx // Custom component for the dropdown on route fare.
│   │   ├── Layout.tsx // Header and footer component for the website.
│   │   ├── mapview.tsx // Component for displaying the map view.
│   │   ├── metroInfoCard.tsx // Component for displaying metro station info card.
│   │   ├── NavBar.tsx // Nav bar design for the website.
│   │   ├── Searchbar.tsx // Component for the search bar.
│
├── pages/
│   ├── _app.tsx // Main Next.js application component.
│   ├── index.tsx // Homepage of the application.
│   ├── route-fare.tsx // Route fare page layout.
│
├── services/
│   ├── fareCalculation.ts // Service for fetching route fare data.
│   ├── metroService.ts // Service for fetching metro station data.
│
├── styles/
│   ├── globals.css // Global CSS styles.
│
├── utils/
│   ├── constants.ts // Metro stations map location.
│   ├── loadGoogleMapScript.ts // Utility for loading Google Maps scripts.

Installation

1. Clone the repository:
   git clone https://github.com/tashfiqul-islam/metro-station-finder.git
2. Navigate to the project directory:
   cd metro-station-finder
3. Install dependencies:
   npm install
4. Set up the environment variables:
   Create a .env.local file in the root directory and add your Google Maps API key:
   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key

Running the Application

1. To start the development server, run:

npm run dev

2. Navigate to http://localhost:3000 to view the application.

👏 Credits

Contributing

Contributions to the Metro Station Finder are welcome. Please reach out to me if you've more ideas for this.

📜 License

Licensed under the MIT License.
Feel free to use and modify as you like.

This project was a learning journey, crafted with ❤️ by Tashfiq.
A stepping stone in my ongoing quest to become a Programming Ninja!

🌟 Follow me on GitHub — I promise, my future projects will only have slightly fewer bugs! 🐛