Clonegram

Clonegram is an image sharing web app intended for anyone who wants to upload and share their personal photos for friends and family to enjoy. It’s main source of inspiration is the famous social network Instagram.

Project purpose and goal

This app was a personal undertaking with the purpose of expanding my knowledge in web development and exploring modern web technologies. A social media platform where users share photos provides a perfect challenge for building a web API server that communicates with a React.js client.

The main goal for this project was to create a functional image sharing platform with basic functionality. Every user should be able to create an account, upload photos, and interact with posts.

The initial design started with the database. I created an entity-relationship diagram with 5 entities: User, Post, Follow, Like and Comment. After creating the models, the API Express server would expose several endpoints that would trigger actions and send back a HTTP response. The main consumer of the API would be a React client that would facilitate interaction with the user of the app.

Spotlight

Clonegram has many features but the one that stands out the most is the user being able to upload photos. When a user decides to create a post, he must fill a form with a caption text field and a file input field. Afterwards, a HTTP POST request is sent to the API server where a middleware attached to the endpoint is validating that the correct file type has been sent (.jpeg or .png). The Multer library was an excellent choice for this task. At the end, a Post document with the user ID, caption and image path is created and stored in the database.

Throughout the development process I stumbled upon the issue of closing a modal when a user clicks outside of it. The solution to this problem is to add an event listener to the document node that listens to mouse click events. When a user clicks outside the modal, the handler checks if the target of the event is outside the modal. When the condition is met, the handler that closes the modal is called. For the purpose of reusability, this functionality was implemented as a hook for other components to use.

Lessons learned

This ambitious project taught me valuable lessons about the process of developing a modern web app:

• Coding with Docker makes development easier, faster and less repetitive. Separating the client, server and database of Clonegram in three containers saves a lot of time with debugging and configuring environments
• Using a static module bundler for the frontend like Webpack makes it easier to transform, include and optimize other assets in the project like HTML or CSS
• Using GitHub Actions is a great way to automate the CI/CD workflow right from GitHub