How I created Bazaario, a real-time worldwide marketplace
Hey guys 👋 It's been a while! Today I'll be talking about how I created Bazaario, a real-time worldwide marketplace. It is a fairly simple web application that is obviously not ready for production, but it is jam-packed with functionality that a lot of real-world applications use today.
Bazaario offers the following:
- Finding listings near you based on Geolocation
- Adjusting the distance to increase/decrease kilometer radius
- Create listings with the option to upload up to 3 images
- & much more!
React
To start off, I created a React application using hooks for state management. I broke down my application into several logical components that made sense to me. Hooks made it really easy to manage state and passing props from one component to another was seamless. Instead of creating the UI from scratch, I decided to use a React component library called Mantine. Mantine is awesome and I totally recommend you guys to check it out for future projects. As for interacting with Firebase, I created one designated file with all the methods that interact with Firebase. These methods were for CRUD operations on listings, authentication, uploading images, and more.
Firebase
Firebase has amazing documentation. It is mind-blowing how easy it is to set up authentication. After wiring up my React registration and login forms to Firebase, I had created CRUD methods for the listings which were also very easy to set up. I also had to think about how I could use geolocation with firebase documents, and how to filter listings based on distance from my location. That's when I discovered Geofirestore.
Geofirestore
Geofirestore is a library that extends the Firestore library. Each listing created will have geolocation coordinates attached to it. Also, when querying for listings, there is an option for passing radius which was exactly what I was looking for. On the main page, I created a slider with a range of 0 to 13,000 kilometers. When dragged, it makes a query to Firestore with the distance and responds with listings within that radius.
Well, there you have it guys. That's how I created Bazaario. If you would like to take a look at the code, check it out here.
Stay tuned for more projects!