Yadori - Find Your Next Home with Maps and Honest Reviews

No more guesswork in finding a home. Yadori is a new housing review SNS, combining honest resident reviews with an intuitive map interface to help you find your ideal place to live.

Comment

About Yadori - Find Your Next Home with Maps and Honest Reviews

Inspiration

The Japanese real estate industry suffers from a significant information asymmetry, leaving potential renters and buyers with an incomplete picture. We were inspired to solve this lack of transparency. We believe that the most valuable information for anyone seeking a new home comes from the real, lived-in experiences of past residents—details you'll never find in a promotional listing. Our goal is to empower people to make confident housing decisions by creating a platform built on the honest reviews of those who have been there before.

What it does

Yadori is a social review platform for housing. It allows users to:

  • Post and Read Reviews: Share and browse detailed reviews about apartments and houses, including pros, cons, ratings for specific aspects like soundproofing, and photo uploads.
  • Engage with the Community: "Like" helpful reviews and engage in discussions through a commenting system.
  • Utilize an Intuitive Map Interface: Our core feature allows users to select their address from an interactive map when posting a review, streamlining the process with auto-filled address information (reverse geocoding).
  • Experience a Modern UI: The app features a sleek, "Spotify-inspired" dark theme, providing a comfortable and intuitive user experience.
  • Use in Multiple Languages: The platform is fully internationalized, supporting both Japanese and English users.

How we built it

Yadori is built on a modern Jamstack architecture to ensure a fast, scalable, and secure user experience.

  • Frontend: We used a powerful combination of Vite, React 18, and TypeScript. The user interface was crafted from scratch using Tailwind CSS.
  • Backend (BaaS): We leveraged Supabase as our all-in-one backend solution, which handles our PostgreSQL database, user authentication, and file storage.
  • APIs & Services: The interactive map and geocoding functionalities are powered by the Mapbox API. The entire application is hosted and deployed via Netlify.

Our development process was iterative, starting with foundational features like authentication and review posting, then moving on to a complete UI/UX overhaul, and finally implementing advanced features like the map interface and internationalization.

Challenges we ran into

  • Complex Map Functionality: Integrating the Mapbox API to create an intuitive address selection modal was our biggest challenge. It involved combining geocoding (search) and reverse geocoding (pin drop) and handling complex asynchronous states and error cases to create a seamless user experience.
  • Building a Design System: Instead of using a pre-built component library, we challenged ourselves to create a custom "Spotify-style" design system with Tailwind CSS from the ground up. Ensuring visual consistency, especially with a dark theme, required meticulous planning and execution.
  • Full Internationalization (i18n): Making the app fully bilingual involved more than just translating static text. We had to handle dynamic content, date/time formats, and form validation messages, which required a robust implementation using react-i18next.

Accomplishments that we're proud of

We are incredibly proud of creating a feature-rich, product-level application that directly addresses a real-world problem. Specifically:

  • The Map Interface: We successfully built a highly intuitive map modal that we believe significantly lowers the barrier to posting a detailed review.
  • A Polished User Experience: We created a beautiful and consistent dark-theme UI that rivals professional applications, offering users a comfortable and enjoyable experience.
  • A Truly Bilingual Platform: By implementing full internationalization from the start, we've made Yadori accessible to a much broader audience.

What we learned

This project was a tremendous learning experience. We gained deep, practical knowledge of building modern web applications with a Jamstack architecture. We learned how to leverage a BaaS like Supabase to accelerate development and focus on frontend quality. Furthermore, we acquired valuable skills in integrating complex third-party APIs like Mapbox, implementing a full i18n solution, and the principles of building a scalable design system with Tailwind CSS.

What's next for Yadori - Find Your Next Home with Maps and Honest Reviews

We have a clear roadmap for making Yadori even more helpful for our users. Our next steps include:

  • Real-time Notifications: Alert users when someone comments on or likes their review.
  • Map-based Browse: Allow users to browse and discover reviews directly on a map interface.
  • Advanced Location-based Search: Implement search filters like "show reviews within 1km of this station."
  • User Follow System: Let users follow their favorite reviewers to see their new posts.
  • Social Sharing: Make it easy for users to share helpful reviews on other social media platforms.

Built With

  • lucide
  • mapbox-geocoding-api
  • mapbox-gl-js
  • netlify
  • postgresql
  • react-18
  • react-i18next
  • react-router-dom
  • react-router-dom-styling:-tailwind-css-backend-(baas):-supabase-database:-postgresql-(via-supabase)-cloud-services:-supabase-(auth
  • storage
  • supabase
  • tailwind-css
  • typescript
  • vite
Share this project:

Updates