All solutions

I learned how to implement RESTful API with vanilla Javascript. Well, I must admit, it was more enjoyable using React to build a component. However, it's still valuable to learn how to write vanilla JavaScript through this RESTful API challenge.

Well, It's fun. And can't wait next challenge.

Before tackling this challenge, I intentionally opted for an easier one to take a breather and keep my momentum going. So, this time around, I made a bold decision to dive into the guru level challenge.

I decided to elevate my skills by embarking on the Kanban task management web app, aiming to demonstrate my frontend expertise. However, this undertaking extended over 25 days, nearly a month, ultimately nurturing immense gratitude for this transformative experience.

At the outset, my goal was to become better acquainted with Next.js' latest feature - the APP Router. Moreover, through this challenge, I acquired a understanding of employing dynamic routers, which I want to build a blog by my own. That's really useful experience for me.

Furthermore, navigating JSON data, an area relatively unexplored for me. The exercise of fetching data within the context of frontend development enriched my proficiency.

In the end, it's not truly an end. Upon completing this challenge, I've found myself pondering about my next steps. But as I reflect on this, I realize that there's so much more I can delve into and learn. Perhaps diving into React Three Fiber or exploring other avenues. Anticipation for what the future holds is building up within me.

This challenge is truly inspiring to me. The styles, colors, and spacing, everything is absolutely perfect, which fuels my passion for becoming a frontend developer. I love creating beautiful things and bringing them to life.

Taking on this challenge is also a great opportunity for me to explore map development, an area where I have little experience.

I'd like to share a useful pure CSS animation page which I figure out how to write my own button. CSS Animation Button

And another great gradient tool. [CSS Gradient] https://cssgradient.io/

After completing this challenge, I realized how fascinating it is to create custom CSS animations from scratch. Additionally, I discovered that importing and implementing a map is not as difficult as I initially thought, but customizing the map styles presents another challenge.

I would like to refine the map styles later. And it's time to take on the Boss level.

I really appreciate the Pomodoro timer concept, and the appealing UI design is another reason why I chose this project. Additionally, I wanted to enhance my knowledge of CSS animation, making it the third reason take this challenge.

This is my second time use the Chakra UI, and I wanted to become more acquainted with framer-motion. That's why I built the "status bar" myself. However, I encountered several challenges with framer-motion, particularly because some instructions were not documented officially.

Luckily, I stumbled upon some amazing examples in the following link. If you're interested in framer-motion and want to delve deeper, this resource provides the best instructions available: https://blog.maximeheckel.com/posts/framer-motion-layout-animations/

For the next step, I made slight changes to the "Settings" page to ensure a consistent visual design throughout the entire interface. It was a lot of fun trying my hand at UI design. I drew inspiration from the concepts outlined in this article: https://www.halo-lab.com/blog/dark-ui-design-11-tips-for-dark-mode-design

And, the last challenge, is I was a little busy when I took this challenge. quite hard to concentrate on it. But still feel so satisfied when I finish this project. I look forward to making further improvements to this Pomodoro timer in the future.

It's quite a challenge! Spent the entire day searching for a solution and finally cracked it. Also, got the opportunity to learn about the new, for me, React Hook useContext. It's like a global useState, allowing for seamless state management across components.

And SVG is a another obstacle. I haven't thought it would be a challenge. It took some time and experimentation to figure it out. I change SVG to React Component and minified it. By the way, don't forget get rid of fill attribute inside SVG files.

After completing all the features in this challenge, I'm motivated to refactor the code. I'll focus on modifying the index.js file to handle data fetching and simplifying each component's responsibilities to improve code clarity. And..., I plan to do skeleton animations during data fetching. It will look nice and more user-friendly.

In my next challenge, I aim to tackle more complex APIs and create a more user-friendly interface. Excited for the journey ahead!

Second challenge from Frontend Mentor! Using tailwind-css to build the website and exploring Figma for the first time.

Grid and flex systems in CSS posed some hurdles, but I tackled them head-on to create the main design.

Fixing spacing and font styles was a pain, especially when specs were unclear. Real-life problems require human discussion.

After finishing this challenge, I feel more confident in my skills. Thanks to the amazing Frontend Mentor team! Can't wait for the next challenge!

I did't use Figma for this project. Instead, I've measured everything using #photopea, a tool that takes me back to the good old days