Logo

dev-resources.site

for different kinds of informations.

Boost Your Productivity with Momentum Builder: A Web App to Overcome Procrastination and Track Progress

Published at
1/15/2025
Categories
devchallenge
githubchallenge
webdev
ai
Author
terieyenike
Author
11 person written this
terieyenike
open
Boost Your Productivity with Momentum Builder: A Web App to Overcome Procrastination and Track Progress

This is a submission for the GitHub Copilot Challenge : New Beginnings

What I Built

The momentum builder app's concept uses the Pomodoro technique. This technique lets you engage in deep work and remain focused. At the end of your work, it alerts you to take a break. In addition, the application keeps track of your tasks, allows you to overcome procrastination, and provides a motivational quote.

Demo

The application is hosted on Vercel which is available via this public URL. Here is a screenshot of the demo app which uses local storage to persist the stored data.

momentum builder demo

Repo

Want to see the code? The project repository is in GitHub which contains the HTML, CSS, and JavaScript scripts. Try it out yourself.

GitHub logo Terieyenike / momentum_builder

Momentum Builder is a web application designed to help users overcome procrastination and provide motivational nudges. The app encourages consistency by tracking streaks and displaying progress reminders.

Momentum Builder

Momentum Builder is a web application designed to help users overcome procrastination and provide motivational nudges. The app encourages consistency by tracking streaks and displaying progress reminders.

momentum builder demo

Features

  • Add tasks
  • Set timers for tasks
  • Receive motivational quotes and progress reminders
  • Track and display streaks to encourage consistency
  • Display error messages when a timer is already running for another task
  • Automatically clear error messages and input fields after a few seconds

Getting Started

Prerequisites

To run this application, you need a web browser that supports HTML, CSS, and JavaScript.

Installation

  1. Clone the repository or download the source code.
  2. Open the index.html file in your web browser.

Usage

  1. Enter a task in the input field and click the "Add Task" button.
  2. For each task, you can add micro-tasks by entering a description and clicking the "Add Micro-Task" button.
  3. Set a timer for each task or micro-task by entering the number…

Copilot Experience

Since I have some experience using prompts to query the LLM capability to produce resulting code and developed a snake game with Python in the past, using the embedded model was not strange to me.

  • Prompts: My prompts centered around tweaking the responses for the code and I ensured it aligned with the end goal while checking the functionality of the app on the live server so it meets my expectation
  • Edits: GitHub Copilot did an awesome job suggesting possible solutions and making meaningful edits appropriately and timely. The model intelligence remembering previous input and generating code was a breeze. There is no doubt of its efficiency.
  • Chat: I found the chat feature to be a lifesaver for improving the codebase. Deleting the previous result and starting on a clean slate made it superb
  • Model switcher: I tried and switched between the models to experiment with different results.
  • Voice: This feature helped me to ask for the possible article title idea for this blog

GitHub Models

For context, the models gave me a quicker way to speed up my development process in creating the workflow from the header to the footer. The model handled the responsiveness, functionality, and the app's building blocks well enough.

Conclusion

The brainstorming capacity of GitHub Copilot helps you debug, explain parts of your code that you find tricky, and offer solutions to fix which makes it a great buddy assistant to rely on. I found this task of building the momentum builder app exciting as Copilot intelligently suggested and pointed out several ways to improve the codebase, and also not without the additional fixes by a human to make sure it meets the standard of a fully developed and deployable app.

webdev Article's
30 articles in total
Web development involves creating websites and web applications, combining coding, design, and user experience to build functional online platforms.
Favicon
7 Developer Tools That Will Boost Your Workflow in 2025
Favicon
Lessons from A Philosophy of Software Design
Favicon
Can I build & market a SaaS app to $100 in 1 month?
Favicon
Learning HTML is the best investment I ever did
Favicon
Creating a live HTML, CSS and JS displayer
Favicon
How to scrape Crunchbase using Python in 2024 (Easy Guide)
Favicon
🕒 What’s your most productive time of the day?
Favicon
Daily.dev's unethical software design
Favicon
Unique Symbols: How to Use Symbols for Type Safety
Favicon
Difference Between <b> and <strong> Tags in HTML
Favicon
How To Build Beautiful Terminal UIs (TUIs) in JavaScript 2: forms!
Favicon
[Boost]
Favicon
Cómo Iniciar y Crecer como Desarrollador Frontend en 2025
Favicon
Building bun-tastic: A Fast, High-Performance Static Site Server (OSS)
Favicon
Filling a 10 Million Image Grid with PHP for Internet History
Favicon
Chronicles of Supermarket website
Favicon
Easy development environments with Nix and Nix flakes!
Favicon
Boost Your Productivity with Momentum Builder: A Web App to Overcome Procrastination and Track Progress
Favicon
My React Journey: Project
Favicon
Что делает React Compiler?
Favicon
Day 04: Docker Compose: Managing multi-container applications
Favicon
Setup Shopify GraphQL Admin API Client in Hydrogen
Favicon
The Language Server Protocol - Building DBChat (Part 5)
Favicon
From Bootcamp to Senior Engineer: Growing, Learning, and Feeling Green
Favicon
How to Use JavaScript to Reduce HTML Code: A Simple Example
Favicon
📝✨ClearText
Favicon
Habit Tracker: A Web Application to Track Your Daily Habits
Favicon
Impostor syndrome website: Copilot 1-Day Build Challenge
Favicon
Easy Discount Calculation: Tax, Fees & Discount Percentage Explained
Favicon
Example of using Late Static Binding in PHP.

Featured ones: