A platform that helps users discover and book exciting quest-room events in the Netherlands. With easy-to-use filters and detailed descriptions, users can find the perfect escape room adventure.
Overview
The goal for this project was to copy the functionality of a mobile app built with Flutter to Next.js.
Demo
Tech stack:
- Express.js
- React.js 18
- Typescript
- Next.js 14
- Tailwind CSS
Authentication:
- Magic links sent via e-mail
3rd party APIs:
- Google Maps API
- Places API
Internalization (localization):
- next-intl
Workflow
For this project, all the sorting, searching and filtering is happening on frontend. For that, a special hook called useFilteredRooms was created, that was hooked to React Query's useQuery result for caching purposes.
Challenges
Conversion of Dart code to Typescript
An interesting challenge was to convert a Dart code that handles authentication to Typescript. In the past I've built a few tiny Flutter apps for practice, so this was a great opportunity to remember some Dart. Thankfully, the client I've been working on is also a developer and he was kind enough to help with the conversion.
Updating Google Maps in real-time
As a seasoned web developer, I already had years of experience working various Google APIs. However, working on this project have definitely expanded my abilities with Google Maps. An interesting challenge was to make the maps represent the filtered results in real-time and create some custom handlers for the pins.
Reinstantiating Maps for responsiveness
After some testing, I came to conclusion that the best way to approach responsiveness was to keep two copies of the map: one for mobile, and one for desktop.
Conclusion
Overall, it was an interesting project to work on and I'm very happy with the results.
Thanks for reading this case study!
Want to see how I helped other businesses? Head back to the Homepage to find more case studies just like this one!
✌️