Coffee Connoisseur - Okazakee WS

The Story

Coffee Connoisseur was developed as part of a NextJS course project, focusing on building a practical web application with real-world API integrations. The app helps users discover coffee shops in their area, with Palermo set as the default location for demonstration purposes.

What Makes It Special

The project demonstrates the practical implementation of modern web development concepts. It combines static and dynamic data handling, using pre-loaded coffee shop information for Palermo while also offering location-based search capabilities. The upvoting system showcases basic data persistence and state management through Airtable integration. ☕

The Technical Craft

Core Features

📍 Location-Aware: Find coffee spots near you or explore Palermo's finest
⭐ Community Ratings: Upvote your favorite spots
🔄 Hybrid Data Serving: Static for speed, dynamic for freshness
🗃️ Smart Caching: Airtable-powered data persistence

The Secret Sauce

Built this beast using:

Next.js for lightning-fast page loads and SEO
Foursquare API for reliable venue data
Unsplash API for mouth-watering coffee shop images
Airtable for flexible data storage and caching

Challenges & Solutions

The Data Sync Dance 🔄

Challenge: Keeping frontend votes in sync with backend storage
Solution: Implemented a robust state management system with Airtable integration
Result: Seamless upvoting experience with reliable data persistence

The Performance Puzzle 🧩

Challenge: Balancing fast initial loads with fresh data
Solution: Hybrid rendering approach - static for speed, dynamic for updates
Result: Lightning-fast browsing with real-time location features

Impact & Learning

💡 Mastered Next.js core concepts
🔨 Built a real-world application with API integration
🎯 Implemented hybrid rendering patterns

What's Next?

Add user reviews and comments
Implement custom user lists
Expand default city coverage

Getting Started

Clone the repo and dive in:

Code

Copied!

git clone https://github.com/Okazakee/ZTM-coffee-connoisseur.git
npm install
npm run dev