Skip to content

harukafujii13/CafeHopping_App

Repository files navigation

☕️ Cafe Hopping

** ABOUT **

The Cafe Finder app is a full-stack application built for cafe enthusiasts to discover and engage with cafes in their vicinity or in specified areas. Whether you are looking to explore new cafes nearby or find the most-liked cafes in a particular area, this app has got you covered. It integrates essential features that enhance the user's experience and aids in making informed choices when selecting a cafe.

Features

  • Discover cafes nearby or in a specified area: Utilizing the Google Maps API, users can easily find cafes in their chosen areas, with detailed information about each establishment readily available.
  • Bookmark your favorite spots: Have a cafe you particularly love? Save it to your favorites for easy access later.
  • See the most-liked cafes: Leverage the like feature to explore cafes that are popular and highly rated by other users.
  • Review system: Read reviews from other users to help find the perfect spot for your next cafe visit.
  • Personalized experiences: Thanks to the integration of next-auth for user authentication, users can have personalized experiences, including the ability to save their favorite cafes and read reviews to make informed choices.

The aim of this project

The primary goal of creating the Cafe Finder app was to build a full-stack application utilizing the latest version of Next.js and integrating it with the Google Maps API. Moreover, this project served as a profound learning curve to understand and master the use of Prisma alongside the latest version of Next.js. It has been a journey of exploration and learning, further enhancing my skills in developing full-stack applications.

Some of the challenges I faced through this project

I needed to enable a customized experience where each user could have their favorite cafes bookmarked, "like" different cafes, and see personalized reviews. Creating a function to track these preferences using "Context" was quite challenging. Also, Using TypeScript for this project brought about an extra layer of complexity, especially when fetching data from the Google Maps API. Keeping track of data types across the entire app proved to be a challenging task.

The technologies I used for this app

  • Nextjs
  • next-auth
  • PostgreSQL
  • Prisma
  • TypeScript
  • Google Maps API
  • tailwind
  • Vercel

Test User