FEM Pomodoro App
A Pomodoro-inspired timer that is a progressive web app, allowing offline use. It features customizable appearance options and provides notification alerts.
- Javascript
- Sass
- HTML
- Javascript
- Sass
- HTML
For this project, I went with HTML, Sass, and JavaScript. I chose these technologies to solidify my understanding of the core tools in web development before jumping into more complex frameworks. Now, you might wonder why I picked Sass over plain old CSS. Well, dealing with one massive CSS file can be a nightmare. Sass, on the other hand, keeps everything organized and tidy. If I need to tweak a style, I can do it without tearing my hair out searching through lines of code.
Project Insights
After wrapping up my CodeGuage course on JavaScript, I was itching to put my newfound skills to the test. Building a Pomodoro web app seemed like the perfect challenge. Not only could it help me stay productive, but its sleek design also made it an exciting project to dive into. My main goal was simple: to gain hands-on experience by building a high-quality, functional project that I could be proud of.
While coding the settings part of my Pomodoro app, I noticed my JavaScript file was ballooning to 587 lines! I knew I had to get organized. After scouring the internet, I realized there's no one right way to structure JavaScript code. I often look for the "correct" method, but in reality, there are many ways to approach a problem. I found the MVC architecture and decided to use it even though it’s not the most common choice for JavaScript. Sometimes, you have to go with what works for you, even if it’s unconventional.
Another challenge was understanding technical documentation. Implementing push notifications was tough because the language was so technical. This highlighted the need for me to get comfortable with these texts and technical terms to be more efficient in my work.
Other than that, most of my questions were basic, like how to implement a timer, make it accessible, or add a progress bar, but I found answers quickly thanks to the amazing online community. Overall, it was a fantastic learning experience that helped me improve my coding practices and problem-solving skills.
Oh boy! Where do I begin? This Frontend Mentor Challenge has provided me with some of the most valuable knowledge I have acquired so far, including Open Graph (OG), accessibility, search engine optimization (SEO), Block Element Modifier (BEM), MVC (Model View Controller) architecture, validations, closures, progressive web applications (PWA), and, most importantly, Node Package Manager (NPM). NPM has opened my mind to using libraries that are immensely helpful for my projects.
Initially, like my previous Frontend Mentor projects, I intended to write the code quickly without much consideration for quality. However, everything changed when I watched a video from one of my favorite C++ channels, The Cherno. In it, he emphasized that the time spent on a project does not guarantee its quality. If you only focus on coding without learning, the resulting code might not be of high quality. His words deeply resonated with me because I had been approaching these Frontend Mentor challenges merely to test my coding speed and project completion time.
This realization inspired me to step out of my comfort zone and delve deeper into research and learning. As a result, I dedicated more time to learning and improving my skills.
Other Projects
- MongoDB
- Express.js
- React
- Node.js
- Tailwind
- Zustand
Manage and track your tasks with my full-stack MERN web app. Switch between dark and light modes to suit your style. You can sign up to save your data or use it without an account, thanks to local storage. Enjoy intuitive drag-and-drop task management.
Explore
- Next.js
- Tailwind
- Zustand
This multi-page e-commerce website, built with Next.js, is fully responsive and uses local storage to retain cart items. It features a modern design and intuitive navigation for an enhanced shopping experience.
ExploreMessage Me
Got an idea you want to bring to life? Let's team up and make something amazing. Whether it's a web app, an online store, or a personal portfolio, I have the experience and passion to help you make it happen.