The Project 🚩: job-image-generator.netlify.app

The GitHub Repo 👨‍💻: GitHub Source

What inspired me to create this project and what does it solve?

Making new images all the time for a requested job post can be tiring to do all the time after you have done this task a couple of dozen times using an image editor (in this case my teammate is using Figma to create it).

Here I am hoping to solve one of my teammate's issues by making him a job post image generator, so he can just fill in the data then download the image to upload to social media.

So in this case, I would choose the Productivity 🧠 topic as a way to help someone accomplish their goals more efficiently.

Other than that main reason, I've been learning Astro recently and want to test it for real-world application and this hackathon creates a perfect opportunity to test it out. it blows my mind how easy and flexible it can be.

How did I build it?

Learning Process 🏫

This project is built upon Astro and React. I've been using React and Next for the past couple of years to build websites - learning new frameworks is never been easy for me.

I have to read their documentation from one page to another page and it was not just one sit-down thing to do - it is an ongoing reading till I face another issue or I forgot about something - being a developer is continuously about reading the documentation first and test it out.

Building it is pretty much takes time as much as learning the tools to make the projects. Since I'm learning Fabric.js and Astro together on this project. Fabric.js is an HTML5 canvas framework to help out building this project.

In this project, Fabric.js is used to render the elements in the canvas which drag and drop functionalities come built-in. I was searching on what canvas framework to use for this project and comparing konva, react-canvas and fabric.js has led me to use fabric.js because it has the highest GitHub stars and it has typescript supports as well. The others are pretty good as well but konva is said slower than normal canvas and react-canvas is not maintained much anymore as I looked up their last commits was on last 2017.

Fabric.js documentation may not be the best out there but it does have many examples in vanilla js - I have to convert them in React way to test them out too but I don't have much problem with it.

Since this is my first time using many libraries that I have never used previously - I believe my code quality is not good and has much room for improvement. Nevertheless, I use linter and prettier to help format and lint my code better.

Website Styling and UI/UX 🎨

I am not a designer but just a developer enthusiast with the Frontend world.

Hence the UI/UX may not be the best but I will try my best to make it presentable with my own color choices and use SCSS and default styling like Water.css to help manage my styling with some best practices in mind from Astro documentation.

I do not want to use too many libraries for styling since it will not help much in the short term because it will get bloated without necessary.

I will just use the necessary styling first till it is a time where it is good time to move to another styling solution.

Keep it simple stupid (KISS) 💋 principle.

Building it 🏗

At first, building it really takes my time since I need to test out Fabric.js a lot for the functionalities that I need for this project - like Download Image, Changing Texts, Upload Image, Upload Background. Also, I need to test Astro to render my components.

After I did some prototypes with the main functionalities, I work towards an image template that we use to post a job. Styling elements in Canvas is the new feeling in itself - it's like normal styling in JS with object CSS but there is no like display flex or grid-like that - purely text styles and background styles.

Clipping the image uploaded also takes a weird turn on my first try since I just use the Image object from Fabric js but when I put the image on that object I cannot resize it XD. Research days and night for this issue - turns out the workaround is to use a Circle object and put Image as a Pattern object on that Circle so we can resize the pattern.

One more challenge comes in when I was trying to make a bullet list in the description - turns out canvas doesn't have a built-in HTML renderer to render a bullet list or li tag. I searched and searched the way to do this in the fabric.js Github issues, GitHub discussion, and stack overflow. Then I found a few people having the same issues with me and have worked some workaround for this it s clearly not the best solution but it works for me for now. The bullet points just stay outside the box and I cannot remove them for now.

Deployment to Netlify 🚀

The deployment was pretty easy with Netlify.

You can basically code your project in GitHub like normal. Then, I just log in to Netlify and start a new website.

Connect my GitHub account and select which repository to pick.

From then, just specify the build command and the built folder for deployment.

Then wait for the build to finish.

Conclusion or Reflection 🥳

Throughout creating this project, learning how to use many technologies, writing the article, and joining this Hackathon, I learned a lot about documenting my own learning progress, HTML5 canvas and fabric.js in particular, and how to work with Astro.

For future reference, fabric.js is pretty cool to use and it works well with many cases but it has some drawbacks on certain things as well. Astro is a great way to develop your static website since it can use render many popular frameworks inside it.