OGBnB

Tinh Le
Tinh Le
Sep 8, 2018 · 10 min read

Day 1 — Wednesday, September 5

I’m starting a team project and writing this blog to document my progress, bugs, and successes along the way. For this project, my team is going to build a single-page web app that is similar to a website of our choice.

My team decided on Airbnb because it has a lot of interesting, dynamic elements. The next step was to decide what component of the website each team member would work on. This is what we decided on:

  • Arjun: reviews
  • James: booking widget
  • Myself: similar listings

My component would eventually look like the photo below.

Similar Listings Component from Airbnb

Day 2 — Thursday, September 6

For this project, my team is going to incorporate agile practices into our workflow. Here are some of the principles we are aiming to follow:

  • Development is centered around a series of sprints, and a team should set goals at the beginning of each sprint
  • Productivity should be organized with Trello, which is to prioritize tasks
  • Pull requests should come with unit tests

Each of us created an individual Trello board. Here is the first draft of my board. If you decide to visit the board, use the link provided in caption. Expect the board to have changed since the picture was posted.

The rest of the day was spent designing our app plan and deciding what database we would use for our service. I initially decided on mongoDB, but changed my mind after considering the shape of my data.


Day 3 — Friday, September 7

I began the day discussing database schemas with my team. I decided to use mySQL as my database I would be working with relational data. My data is relational because any single item in my primary table could be a similar listing for multiple other listings. Therefore, I need to make use of foreign keys, which are a feature of mySQL databases.

Diagram of my Schema

Day 4 — Monday, September 10

My goals for the day are:

  • set up my project environment
  • refine my schema and create my database
  • seed my database

My schema has changed since last time. Updated schema below:

Schema for Database

In the final version of my schema, I added a primary key consisting of 2 columns. I realized I would need 2 foreign keys inside my join table that would reference the primary key in my listings table. Then the primary key in my join table would consist of the 2 foreign keys I just made.

One benefit of my schema is that my I avoid storing repetitive data. The tradeoff is that my server will have to make two queries to my database in order to retrieve all the similar listings for a listing. I decided this tradeoff was worth it.

I managed to set up my project files, create my server, and finalize my database schema. I decided to leave seeding my database until tomorrow.

Day 5 — Tuesday, September 11

Today was spent seeding my database with fake data. Here are some of the challenges and learnings that came with this task.

Challenge: Updating the foreign keys in my child table upon insertion of values in my parent table. For some reason, the foreign keys were not being updated even after I added ‘ON UPDATE CASCADE’ in the foreign key constraint.

Action: I did more research into this and learned more about how foreign keys are updated.

Result: I learned that ‘ON UPDATE CASCADE’ will only change the values of the foreign keys when the primary key being referenced is updated, not when new values are inserted. I ended up inserting in values for the foreign keys myself, and took out ‘ON UDPATE CASCADE’ because I also realized I would not be updating my parent table anyway after seeding the database.

Below is a snapshot of my listings table. For each listing, this table contains a unique id, and relevant information for that listing.

Snapshot of my Listings Table

Below is a snapshot of what my join table looked like after seeding my database. The two values, similar listing id and listing id, are the foreign keys that make up the primary key of this table. Each listing is inserted 5 times, along with a random listing. This way, I will be able to retrieve 5 different photos for each listing in my parent table.

Snapshot of my Join Table

Day 6 — Wednesday, September 12

My goals for the day are:

  • setting up webpack and babel
  • setting up my server
  • create my react components for the front-end

I was able to set up webpack and babel in the morning, and spent the rest of the day setting up my server and creating my react components. One important discovery I made while setting up my server was that when using expressjs, you can add a colon to specify the pathname in a URL. Then, you can retrieve that pathname using window.location.pathname. I used this technique, in combination with express.static to make roomId into a variable and included this variable as part of my endpoint in order to serve up a static file.

However, I encountered an interesting bug. When I tried to go to http://localhost:3000/rooms/1, the following error message appeared:

Interesting Bug

I had never encountered this bug while setting up my server, but luckily my team member ran into this issue the other day and helped me debug. Here is a summary of the process:

Challenge: Serving up a static html for endpoints rooms/1 — rooms/100

Action: I typed in http://localhost:3000/rooms/1 and console logged req.params. The following appeared:

{ roomId: 1 }

{ roomId: 'bundle.js }

I expected { roomId: 1}, but { roomId: ‘bundle.js’ } was unexpected. I then checked the network tab and saw this:

Interesting…

This told me that that express was trying to serve up my static index html file once the endpoint became rooms/bundle.js. This made sense once I looked at my server code again.

My teammate and I discussed the root issue for a while and I finally came to understand that my server was looking for my bundle.js file in client/dist/rooms.

Result: Because the directory ‘rooms’ doesn’t exist, I had to let my server know to jump out of ‘rooms’ and look for bundle.js inside client/dist.

<script type="text/javascript" src="../bundle.js"></script>


Day 7 — Thursday, September 13

My goals for the day are:

  • Rendering the basic components
  • Add basic css styling

The first challenge was deciding how I would display my photos as a carousel. I knew each listing would have to be its own react component.I made some sketches and mentally mapped out what my carousel would like look. This would be the rough structure for my carousel.

Structure of Carousel

My carousel consists of 5 components for now: 2 arrows and 3 slides. Each slide will eventually need access to an index in order to render a different listing when the user clicks on an arrow.

For now, I’m focusing on rendering my components without any functionality and adding basic styling.

Photo Carousel with Arrows

Here are some important things I learned today:

  • You can’t pass objects as props in react.
  • To render elements directly next to each other, you can specify that the elements have the css option — display: inline-block

Day 8 — Friday, September 14

My goals for the day are:

  • Adding functionality to the arrows
  • Adding more css styling
  • Completing the captions for each photo

I decided to use react styled components to add css to my components. I opted for this option over importing css stylesheets because my application is not too complex and doesn’t necessitate a css file for each component. I also thought styled components would make my code more readable than if I used css modules or inline styling.

There were no major roadblocks today and I enjoyed fiddling with css to make my carousel render properly. I liked my choice of css styling because my code looked clean. I expect to refactor things later, but this is what my code looks like currently.

React with React Styled-Components

Here is what my carousel looked like at the end of the day:

Almost done!

Day 9 — Monday, September 17

My goals for the day are:

  • Refining my css so that the components remain in place when the browser in minimized
  • Adding a heart icon on each listing image
  • Learning about how to set up a proxy server and how to develop a build process using grunt

Currently, my components line up vertically when I minimize the browser. This is because I’m using display: inline-block as the css property to position the components.

Display: inline-block

Here, I minimized the browser by pushing it in from the right. We can see that the listings are no longer displayed side by side.

Display: inline-flex

Here, we can see that the listings are displayed side by side even when the browser is minimized, thanks to display: inline-flex.

Next, I overlay the heart icon on each listing image using z-index. I give each image a z-index of 1 and the heart a z-index of 2, so the heart will appear on top of the image.

Finally, I spend the rest of the work day learning about how to set up a proxy server and developing a build process using grunt. I learn that grunt is a task runner that can automate repetitive tasks, such as prefixing and minifying files. Tomorrow, my focus will be developing a build process using grunt.


Day 10 — Tuesday, September 18

My goals for today are:

  • Developing a build process with grunt
  • Setting up my proxy server and rendering my component along with my teammates’ components

First, I researched how to use grunt and thought about how it could enhance my build process. For me, the main benefits of using grunt were:

  • Minifying my files
  • Syncing my files on amazon s3 with the files on my computer, using the plugin grunt-s3

I installed grunt and configured my gruntfile for my project folder. The documentation was straightforward and easy to understand. I also installed the grunt-s3 plugin to register a task that allowed me to easily upload any file from my computer to my s3 bucket.

Now I could focus on setting up my proxy server. My proxy server runs on a port of my choice and serves up my team’s components, which each run on a different port. This implies I would need my teammates’ servers and databases either running on my computer or deployed to the cloud. For now, we decided to run the servers and databases on our local machines.


Day 11 — Wednesday, September 19

My goals for today are:

  • Setting up my proxy server with my team
  • Styling my page so all the components are positioned properly

Currently, I understand that my proxy server is needed to serve up files from the cloud. I’m still learning about the other benefits of using a proxy server though. I decided to proceed with serving up my teammates’ components on my server and then filling up my gaps in understanding.

In order to do this, my team uploaded their files to the cloud so everyone could have access. I ran everyone’s servers and confirmed that the page was rendering properly. Success!

Page without CSS

I still had some work to do with styling so the rest of the day was spent working with css. Here’s what the page looked like at the end of the day.

Page with CSS

Each component was in the right place, but now my challenge is to get the booking box widget on the side to scroll with the page, but not scroll into other components. Currently, I’m providing the booking box a lower z-index than the other components so that it will scroll behind.


Day 12 — Thursday, September 20

My goals for today are:

  • Adjusting the css styling for the booking box
  • Actually proxying my calls to my proxy server after learning that the client should not be directly pinging each component’s server in order to retrieve data

To make the booking box scroll with the page, but also not scroll into other components, I used the CSS property position: sticky.

For my server, I used middleware to proxy requests to my proxy server, which then sends the request to the correct server. Doing so maintains server-side security; it prevents the client from knowing anything about each component’s server.


Day 13 — Friday, September 21

Today, we are going to deploy our servers. I decide to use AWS Elastic Beanstalk because the interface makes deployment straightforward and also because I want to take of advantage of the health monitoring feature in EB.

I spend the day learning about deployment, and connecting everyone’s deployed servers to my proxy server. At the end of the day, my team and I deployed our proxy servers! Stay tuned for a demo of our app.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade