Skip to content

GayatriParimiDev/Cafe_Finder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

☕ CafeFinder — Discover the Best Cafes Near You

🏡 Find your next favorite coffee spot, anywhere in India.


📌 Overview

CafeFinder is a fully responsive, interactive web application that helps users discover the best cafés near their current location or any searched city, using OpenStreetMap and Geoapify API — all completely free and API-key-based.

The project features a modern pastel UI, animated hero section, smooth scroll, and dynamic café cards with Google Maps direction links.


🌟 Key Features

  • 🔍 Search by location — Enter any city or area name to find cafés.
  • 📍 Use My Location — Instantly fetch nearby cafés using your device’s GPS.
  • 🗺️ Interactive Map — Powered by Leaflet.js and OpenStreetMap.
  • 🧭 Accurate Café Locations — Uses Geoapify API for verified café coordinates.
  • 🪄 Dynamic Café Cards — Displays each café’s name, address, and “Get Directions” button.
  • 💡 Pastel UI Design — A clean, aesthetic interface with elegant typography.
  • 🔝 Scroll to Top Button — Smooth navigation for improved user experience.
  • 📱 Fully Responsive — Works perfectly across desktops, tablets, and mobile devices.


🧭 Folder Structure

cafe-finder/
│
├── index.html
├── about.html
├── cafes.html
├── how-it-works.html
├── style.css
├── app.js
├── assets/
│    ├── hero.jpg
│    ├── cafe_img1.jpg
│    ├── cafe_img2.jpg
│    └── ...
└── README.md

🌍 Working Demo Screenshots

Section Screenshot
🏠 Home Page Home Page
🗺️ Map & Search Section Map
📍 Café Cards Café Cards
📖 About Page About Page
⚙️ How It Works How It Works

⚙️ API Used

  • Used for fetching accurate café coordinates, names, and formatted addresses.
  • Free tier supports up to 3000 requests/day — ideal for student or personal projects.


💡 Learnings

  • Working with Geo APIs and location-based data visualization
  • Understanding how to fetch and render live data dynamically
  • Implementing free map-based applications without Google billing
  • Designing aesthetic, consistent UI across multiple pages

📸 Technologies Used (Logo Preview)

Technology Logo
HTML5 HTML5
CSS3 CSS
JavaScript JS
Leaflet.js LEAFLET
OpenStreetMap OPENSTREETMAP
Geoapify API GEOAPIFY

🧠 Future Enhancements

  • Add filters for “Top Rated” or “Open Now” cafés
  • Integrate café photos & reviews (via Yelp or Foursquare APIs)
  • Add dark/light theme toggle
  • Enable “Save to Favorites” for logged-in users

🪪 License

This project is licensed under the MIT License. You’re free to use, modify, and share it — just provide proper attribution.


❤️ Author

Developed by Gayatri Parimi

“Because good conversations begin with great coffee.”

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors