Ephraim Atta-Duncan
Ephraim Atta-Duncan

Ephraim Atta-Duncan

✨ How I Built an App To Dare Me Every 100 Days

✨ How I Built an App To Dare Me Every 100 Days

Do anything in 100 Days

Ephraim Atta-Duncan's photo
Ephraim Atta-Duncan
·Aug 28, 2021·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Building a new habit can be a bit difficult. Learning something new can be a daunting task as you progress. Keep track of it can also be another problem that's why I built an app to dare you to do your tasks and keep track of it for the next 100 days.

Inspiration

I participated in #100DaysOfCode some months into my developer journey. I completed somedays, missed some, shared my progress on twitter but at the end I had nothing to show for it. I had to search through my tweets(mixed up with other unrelated tweets) one by one to get some, of the posts and progress I made. I decided to build an app, to track all my progress at one place and get all my progress at a go.

Features

  • 👾 Add progress on each day (prevents users from adding or modifying on unappointed days)
  • 🍭 Set a Daily and Final Goal (Dare to yourself at the end of 100 Days)
  • 🌱 Reset your progress and start again (If you want to)
  • 🥁 Share your progress on Twitter (Tweet about your daily progress to your followers)
  • 🔖 Export your progress as PDF (Very handy for future references)
  • 👤 Sign Up with your Email, Google or Github

Next Features

  • 🔥 Streak Counter
  • ⏳ Countdown Timer
  • 🔔 Daily Email Reminder
  • And many more...

Techstack

App Walkthrough

Check out the app here

The Application is really simple but very productive. On Sign Up, you are redirected to the dashboard where all the magic happens.

The dashboard is preloaded by a skeleton provided by Chakra UI followed by the loaded components.

skeleton.png Main Page main.png

The '100' buttons represent 100 Days and you are to fill then each day. Not a day before, not a day after. Exactly on the same day. You fill a form summarizing your task for the day and you elaborate a little further in the details text area.

form2.png

You are not allowed to add a progress until the appointed day.

disable.png

You can set your goal at the end of the 100 Days and you are allowed to edit them as the time progresses.

goal.png

You can tweet your progress only when you are done with your task for the day. The tweet button shows after you have saved your data tweet.png

The avatar when clicked shows a popover which has all the details for resetting all your progress, setting your goal, logging out and exporting as PDF file.

popover.png

Challenges

I had many challenges along the way especially the '100' buttons. I spent about five days trying every CSS position but I solved it.

Solution: After days of contemplating, almost giving up, I used CSS Flexbox to solve it.

Problem: Server Rendering of PDF delaying and sometimes failing. Solution Render the PDF on the client side instead using react-pdf

Problem: Save user data Solution Implemented a small API to save user preferences in a FaunaDB database thanks to Next.js API Routes and Vercel Serverless functions

Problem: Twitter Share Link Solution Create a custom function to encode objects into the url.

A Challenge for You

I want you to build momentum by completing a simple and easy task on as many consecutive days as you can. Score your day no matter what. Be honest. Give it your best effort. It’s worth the struggle in the end. I promise if you do something positive that helps yourself for 100 days, you will feel like you really can accomplish anything you set your mind to.

Github Repository

 
Share this