Colourful presentation
Development event archive website.
Mokkup
Summary
Mokkup, a mini-tool for your next image presentation or post. Glow up your images with pre-built gradients (or simply create your own), add a browser wrapper and quickly set its dimensions for your social media profile. A side-project inspired by carbon.
Stack
- React
- TypeScript
- Chakra UI
- Jest
Purpose
After my semester exams, I wanted to dive deeper into front-end testing and give Chakra UI a try. As I scrolled through various social media feeds, I came up with this carbon.sh inspired idea for sugar-coated Images.
Strategy
As it is categorized as a tool, I aimed from the start for a Single Page Application. I chose Create-React-App, as there was an existing template with Chakra UI and TypeScript. Chakra was an interesting pick since I stumbled across a plethora of posts supporting its ease of use and accessibility features. (It also has a cool name 🍃)
Spotlight
Throughout development's time, I discovered some scalable patterns as I was searching for the best practices. Scaling the image according to the user's screen size and then scaling (again) it to the desired resolution was probably the hardest part of the application, however a workaround was found! Finally, there's a taste of CI, as I set up a few hooks with husky, such as pre-commit test runs.
