Hi! I’m Alex Cannon, Software Engineer and author of this blog. Let me tell you about a project I built called Bearbnb.
> Background
Bearbnb was my team’s project for Chingu Voyage 3 (chingu website). It is a clone of Airbnb. I worked on a lot of the front-end development for this site.
> Scope
Our MVP included most features of Airbnb. As a user you can host events, join events, search, edit your profile, etc. We used the MERN stack (MongoDB, Express, ReactJS, NodeJS).
> Challenges
Git
This was my first team project, so one of the first things I learned was version control! I had tinkered with git before, but I didn’t fully understand it until I started work on this project.
I realized I was doing something wrong when my teammates were very confused about a branch I pushed! After some reading that my project manager suggested, I learned a lot of what I needed to know to be effective with git.
Calendar Component
We chose the MERN stack for our project, which meant I was using ReactJS. I had worked with ReactJS on many smaller projects but this was the first time I had used it on a full-fledged website.
The main issue I had with the calendar component is that I needed a way to tell how many days were in a month in a given year (we included leap-years) and style it effectively.
After some research, I created a function that returned the number of days in a given month in a given year to solve this. I also used the “+” and or “-” css operator to target sibling days in the calendar (for highlighting) to solve that issue.
Booking Component
The booking component is displayed on events. This allows users to book days to stay at an Airbnb. I had trouble with this one mainly because I did not understand what props were passed down to that component. I needed to get data from the root component like the rating for the given event, the name, what days were available, etc.
Because I did not know how to do this at the moment (I had been working with ReactJS on one file, not across files!) I finished what I could and consulted with our project manager. She let me know how to get this done and I had a much easier time after some consultation!
> Close
Thank you for reading! If you like project posts like this, let me know and I can create more of them.
I’m out!