Scrofa Image Converter

User interface of the app.

Inspiration

I wanted to do a small project as a continuous effort to improve and master my programming skills, so I figured I want to build an image converter. This additional inspiration stems from different file coverters that I used in the past.

What it does

You first upload an image to the frontend, then you select the formats given to you, and you click the Convert button. After clicking it, a new button will appear, which will enable you to download your image. Upon clicking this button, your image is downloaded onto your local machine. In the download process, the backend deletes the converted file after download, so to save memory on the server side. From here, you can either convert another image or exit the app, as conveyed by another button that replaces the download button. If you desire the former option, you can click on the button, and the Convert button will return to the UI.

How we built it

This project is developed with React for the frontend, and Flask for the backend. For network calls from the frontend, Axios was used, and CSS styling is applied with Tailwind. Both ends have their respective GitHub repositories, and are hosted separately on Render. Regarding the list of GitHub repository links, the first link is for the frontend, the second for the backend.

Challenges we ran into

There are several challenges:

Installing and running Flask was a challenge, because of several configurations.
Aligning the section containing the UI for the app to the center of the screen was challenging, because it requires several Tailwind CSS that I had never heard of nor used before.
Programming the logic for showing different buttons in one section in the UI.
Developing the Flask endpoints and fixing errors involving CORS.
Ensuring useRef was applied properly.