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.
- 🔍 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.
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
| Section | Screenshot |
|---|---|
| 🏠 Home Page | ![]() |
| 🗺️ Map & Search Section | ![]() |
| 📍 Café Cards | ![]() |
| 📖 About Page | ![]() |
| ⚙️ How It Works | ![]() |
- Used for fetching accurate café coordinates, names, and formatted addresses.
- Free tier supports up to 3000 requests/day — ideal for student or personal projects.
- 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
| Technology | Logo |
|---|---|
| HTML5 | ![]() |
| CSS3 | ![]() |
| JavaScript | ![]() |
| Leaflet.js | ![]() |
| OpenStreetMap | ![]() |
| Geoapify API | ![]() |
- 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
This project is licensed under the MIT License. You’re free to use, modify, and share it — just provide proper attribution.
Developed by Gayatri Parimi
“Because good conversations begin with great coffee.”










