Technologies Used

This project was built in React with TypeScript, and Node.js, and using the Unsplash Image API. Currently deployed here on Netlify. I recently remade the UI using Shadcn and Radix UI components.

Development Process & Motivation

When I was completing the [Scrimba Frontend Developer Career Path],(https://scrimba.com/learn/frontend) there was a section that included a cover image creator so you can add it to your LinkedIn page. I thought it was a cool idea and wanted to expand on it to make it more customizable and easier to use.

Challenges & Solutions

I knew the biggest challenge was going to be figuring out how to turn the modified cover image into a downloadable image, but I found out it only took a few lines of code in JavaScript to get it done. The project mostly works but there is an issue where the image's position isn't displayed correctly when downloaded.

I also noticed the styling and CSS changes as well, and learned that this is due to the browser rebuilding the dom into an image rather than just taking a direct screenshot, due to security reasons. I've tried many different libraries including html2canvas and still coming across this issue.

Future Plans & Improvements

A couple of ways to improve this is to have a preset list of popular images to select from, and more styling choices, fonts, etc. However, the most important is to get the image positioning figured out, then accurately copying the selected CSS.