Craigslist Clone

Website GitHub

The Idea

A few weeks before I moved out of Mexico City, I built a website for listing everything I was going to sell. I modeled the website after Craigslist and wanted to see if I could come close to mimicing it's basic design. Simple but functional was the result I was going for.

Tech Stack

Coding & Challenges

After coding CRUD actions, I worked on the item show page, first building out the basic layout and integrating Bootstrap’s carousel for photos. I then tackled each javascript dependent component one by one.

The first component was the modal for displaying large photos of the item. It’s made of an inner and an exterior modal so that when the user clicks on the outer modal (taking up the entire viewport), the modal closes. The modal itself is a carousel too.

Making the thumbnails and the active image of the carousel in sync with each other required the use of many counters, classes, and event listeners. The tricky bit was allowing the user to be able to interact with both the carousel left/right arrows and hovering/clicking the thumbnails without the two actions conflicting with each other. That is to say if a user hovers over a thumbnail, that photo then becomes the active photo of the carousel. Subsequently, the user could use the arrows and the photo order would be maintained. To display the active image's number, the image count is passed to the javascript file via a data attribute within the ruby code. There probably is a better way to code this but with just vanilla javascript, I was pretty content everything worked.

On the homepage where all items are displayed in a grid, I used Flexbox with flex-wrap for the layout and gave each item its own carousel. I created a javascript function that would keep track of every carousel's active image number and overlaid it on its carousel. In the future I would like to add in swiping for the carousel photos for a better mobile experience. The bootstrap carousel has a swiping feature that can be turned on, but it only works after a user has hit one of the arrows. I didn’t like this as it could confuse the user so I turned it off. Next time, I will try to build a carousel on my own.