S-A-bnb

What I made 💁‍♂️

I made a fictional web application like the vacation rental online marketplace Airbnb. You can log in and rent venues paying by credit card on Stripe TEST MODE and also post comments about venues which you have rented before. This is a my second project with React and Redux.

What I used 🔷

1. React/Create React App

I used Create React App to build user interfaces in this web application.

2. Redux

I used Redux to toggle the modal window and store reservation data, Redux-Persist to keep the user logged in, and Redux-Promise and Redux-Saga to deal with asynchromous functions.

3. Materialize, Sass

I used Materialize and Sass to design this production.

4. Firebase

I used Firebase for handling the purchase history of users, comments about venues from users, and the recruitment contact form.

5.Stripe

I used Stripe. This way users can reserve venues by credit card on Stripe TEST MODE. The purchase data will be sent to Firebase.

About this production 🥳

I used an API which was created by Robert Bunch. You can see details about this API here. I used this API to handle sign up, log in, log out, password change and to fetch data such as City-, Activity- and Venue data and a Search page.
As I used his data I noticed some data being weird; Especially the Venues data..
After I learn how to make my own API, I want to use my own API for this project instead. So this production will be updated.

I used Redux-Saga to store Cities, Activities, Venues data after fetching these data from the API in client side. So once this web application fetches the data, it will be stored so that it does not have to fetch data again while on the website. Then I used react-slick to display the data .

I made Modal component. I used Redux to toggle the modal window and store reservation data. Then user can sign up or sign in here. *For now only with email and passsword.

User can go to check out page from each venue page. User can chose the number of people who will stay and how many days the user wants to stay. Also user can not make a reservation on the wrong day.

After user make a reservation in Check out page, users can see the payment success page which shows detail of reservation informaion, then can see their purchase history in the account page. Also, if the reservation was done in the past, users can post comments about the venue.

I also made Recruit page, so If a user wants to apply for this company, the user can apply for this company in Recruit page.

What I learned ✅

I was able to deepen my knowledge about React, Redux and Firebase more. And I used react-slick and sweet-alert for the first time. It was good to know that.

Finally 😎

If you visit my website and enjoy it, I am happy.