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!

Top comments (0)