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!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay