DEV Community

Cover image for Digital Ocean Hackathon App: Console.Clear
IkraP
IkraP

Posted on

Digital Ocean Hackathon App: Console.Clear

What I built

Console.Clear is a simple application that encourages you to take a 10-minute break. In the current chaos of the world, we often neglect how a simple break can help us refocus our energy and encourages us to invest in our own wellbeing.

With console.clear, you can take a timed 10-minute break and let go of your thoughts, focus on your breathing, and allow your mind to wonder.

Category Submission:

Program for the People

App Link

https://consoleclear-w4wer.ondigitalocean.app/

Screenshots

Desktop Version:
Screenshot of consoleclear home page
Screenshot of consoleclear timer page
Mobile Version:
Screenshot for consoleclear for mobile

Description

The idea for console.clear came from browsing MDN one day and coming across this syntax! I hastily purchased the domain name and started gathering ideas, becoming very excited about starting a new project. The eventual goal for this side project is for it to become a source of information on mental wellbeing, allow users to relax through a guided meditation on the app, and take a break. As you can see from the current state of the app, I only managed to get as far as encouraging people to take a break!

The project was started a week ago, with the illustrations taking up half of the week and leaving roughly 3 days to code the entire app! Exactly like a hackathon!

Link to Source Code

Link to source code on Github

Permissive License

Commons Clause

Background

Mental health is becoming increasingly important in the current chaos of the world. I really wanted to create this app to help encourage people to focus on their internal well being.

How I built it

The app is built using GatsbyJs as have recently built my own portfolio with it - www.chemtocode.co.uk
I used styled-components for the styling and GSAP for the animations. I love making illustrations so for console.clear, I used Affinity Designer and Figma for the design of the website.
Fun Fact: I taught myself GSAP and Styled components for this project!
All hosted on Digital Oceans App Platform!

Additional Resources/Info

  • The idea for the design was something that I found on Instagram from the incredible team at (https://www.instagram.com/beio.ru/). I loved the idea of having a break timer so I asked permission before designing console.clear!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay