Coffeeroasters subscription site
Design comparison
Solution retrospective
I completed this project using Flask for the backend, with the frontend built using vanilla CSS, HTML, and JavaScript. I also developed a custom JavaScript script to parse the DOM and update it client-side, mimicking some React-like behavior, although it’s not a true React implementation. This approach avoids full page reloads and performs quite efficiently.
I used pure CSS for this project as an experiment to challenge myself, but I've since realized that Tailwind would have been much more enjoyable and efficient. Working solely with vanilla CSS proved to be more cumbersome than I anticipated. Additionally, managing state and interactions with just vanilla JS was somewhat frustrating. For my next project, I plan to use Flask along with Preact, TypeScript, and Tailwind to improve development efficiency and functionality.
Community feedback
- @Mohammad-Irfan-NoorzadaPosted about 2 months ago
Hello Karol,
I hope you're doing well. I recently came across your project, and I must say, I am really impressed by the quality and structure of your code. It’s truly inspiring to see how you’ve implemented the features so seamlessly.
If you don't mind me asking, I’d love to know how long it took you to complete this project. Also, how did you approach learning the concepts and techniques used here? Were there any resources or specific strategies that helped you along the way?
I’m currently working on improving my skills, and I would greatly appreciate any insights or advice you could share. Thank you for taking the time to read this, and I look forward to hearing from you.
0P@VillageR88Posted about 2 months agoHi @Mohammad-Irfan-Noorzada,
Thank you so much for your kind words! It really means a lot to hear that you found my project inspiring.
As for the time spent, I worked on this challenge for a few hours a day over several days. My focus was on following good coding practices and making improvements as I went along. Writing code regularly helps me spot areas that could be refined, and I try to make small adjustments with every project.
For this one, I experimented with Flask and worked with native CSS and HTML. It was also a chance for me to step back from my usual reliance on Tailwind and try a more minimalist approach, which turned out to be a refreshing learning experience.
If you’re working on building your skills, I’d recommend starting projects that feel just slightly outside your comfort zone and focusing on steady progress. Experimenting with different tools and techniques can teach you a lot along the way.
0@Mohammad-Irfan-NoorzadaPosted about 2 months ago@VillageR88 Thank you so much for sharing your process! It’s inspiring to see how you’ve incorporated regular practice into your workflow and focused on refining your skills with each project. The way you experimented with Flask and shifted away from Tailwind for a more minimalist approach is definitely something I’ll keep in mind as I work on my own projects.
I completely agree about stepping slightly outside of my comfort zone with new challenges. I’m really looking forward to experimenting with different tools and frameworks myself.
0 - @RedMwpPosted 5 months ago
This is amazing, I would like to know how you prepare before you start coding..
0P@VillageR88Posted 5 months ago@RedMwp Hi RedMwp, I’m really glad you found it okay! 😊
Before diving into a challenge, I usually do a quick study of the design to understand what needs to be done. If it’s similar to designs I’ve worked on before, I might reuse some of my templates. However, I don’t usually do extensive preparation; I prefer to jump in and figure things out as I go.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord