Skip to content

Repository files navigation

Project Tittle and Description

Fuel Station Finder is a location-based service that helps users find fuel stations near them. The app displays relevant details, such as station names, addresses, and current fuel prices, on an interactive map. Station owners can also update their station information and fuel prices via the platform.

Installation step

clone the repository: //clone repository chage the directory FSF folder: cd FSF install these packages: npm install react-leaflet, npm install notistack, npm install react-router-dom, npm install leaflet react-leaflet leaflet-routing-machine run the program with command npm run dev

Features of the system

User Authentication & Authorization: Secure login and registration for users and fuel stations. Fuel Station Display: Shows fuel station names, addresses, and prices. Interactive Map: Uses Leaflet JS to provide a map with markers representing fuel stations. Firebase Backend: Handles data storage and real-time updates for prices and station locations. Real-time Updates: Stations can update fuel prices, and the system reflects these changes immediately.

Usage

Open the application in your local server using the development URL from npm run dev. Create an Account: Sign up as a regular user or a fuel station. View Stations: If there are fuel stations near your location, click on a station marker to view detailed information and routes to the station. Station Dashboard: After logging in as a fuel station, navigate to the "Gas Bar" section to view all registered stations. Station Management: Fuel stations can manage their details by navigating to the fuel station sign-in page at /Stationsignin and update fuel prices.

Technologies used

React: A JavaScript library for building the user interface. Firebase: Backend services for authentication, real-time database (Firestore), and hosting. Nominatim API (OpenStreetMap): For fetching geolocation data and addresses. Leaflet JS: Provides interactive maps with marker placement. Tailwind CSS: Utility-first CSS framework for styling.

Contribution

Fork the repository. Create a new branch (git checkout -b feature/YourFeature). Commit your changes (git commit -m 'Add feature'). Push to the branch (git push origin feature/YourFeature). Open a pull request.

Contact

For any questions, feedback, or suggestions, feel free to contact:

Zakariya Abbas Email: zakariyaabbas20@gmail.com

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages