XAgo

• 6 min read

Mobile application designed, developed, and deployed in seven days. Keep track of when was the last time you did something

XAgo cover picture

What is XAgo?

XAgo is a simple app that lets you keep track of how long ago you did something.

I previously used a similar app developed by Tobias Reich called Last Time. The app has unfortunately been removed from the App Store recently.

The Coding Challenge

I've given myself a total of one week to develop the whole app from the ground up and, in the end, publish it on the App Store and the Google Play store.

tl;dr;

It was fun, and I succeeded! Keep reading if you want to learn more about how the process looked like.

Although there was a time limit, I didn't want to cut corners on features. Below is a checklist of everything the app needs to do/support.

Checklist

The app has to:

  • allow users to create event trackers (later widgets)
  • allow users to edit widgets after they're created
  • allow users to customize widgets (change color/icon)
  • work well on phone screens
  • work well on tablet screens
  • have an overview of all the times event was repeated
  • have support for dark mode
  • have proper internationalization (later i18n)
🏁 So let's begin 🏁

Technology

I have very little experience with native app development. As a college freshman, I got into Android development, but haven't touched it since. I fiddled with Swift for iOS recently, but not enough that I would feel comfortable creating this app in a week.

I have been playing a lot with React and React Native for the last year or so. I really like React Native, and I wanted to get better at it. More specifically, I wanted to learn to properly support light/dark themes, and I wanted to build one whole project in TypeScript.

To be able to write faster, I will use Expo. I used their blank typescript template to get started.

Sketches

Even though I wanted to stop and spend weeks designing this application, the point of the challenge is to challenge myself as a developer, not as a designer. Moreover, the idea was cooking inside of my brain for years, and I already had a somewhat clear picture of how it should work. What was important was to understand how the layout would work, and how to signify the most important interactions. When I had the general idea of the screens, I went on to setting up the project. I needed to do that if I wanted to finish the project in a week.

Sketches of the app I made before starting

The week of development

Monday

This day was mostly project setup. In the end, the app had support for:

  • Inputting the name of the widget
  • Choosing colors for the widget

Tuesday

On the second day, I worked more on layout and was messing around with saving dates. At the end of day two the app supported:

  • Choosing the date to start tracking from
  • Choosing an icon for the widget

I remember that on Tuesday the app already looked like a good proof of concept. I wanted to just stop and say "that's it, I could finish it whenever I want". However, when I looked at the checklist again I realized I only supported the first few checkpoints.

Wednesday

I didn't have much time to work on the app on Wednesday. At the end of the day, the app had support for dark mode and for editing widgets. I also refactored navigation a bit and added a widget detail screen.

Thursday

Thursday was all about themes. At the end of day four the app supported:

  • Switching between different light and dark themes
  • Manually setting preferred UI style (dark/light/system)

Friday

On the fifth day, I mostly worked on the settings. I began working on the i18n support and added a few more themes. I also added some haptic feedback for key interactions.

Saturday

On Saturday, I finally had time to do some polishing and to add a widget detail screen. I also gave up on using any third-party calendar pickers as they were either too slow or simply wouldn't work (potential idea for another side project 😉).

Sunday

Sunday was the day of final touches. At the end of the last day I:

  • Designed an icon
  • Designed the splash screen
  • Designed App Store and Google Play Store screenshots
  • Added simple onboarding screens
  • Finalized i18n

Final App

Finally, I submitted the app to both stores. I also created a simple landing page.
In the end I also posted on Product hunt and got into the top 10 for that day.
Home screen in light mode
Add widget screen
Edit widget screen
Widget detail screen
Settings screen

Let's look at the checklist again to see if I passed the coding challenge!

✅ allows users to create widgets
✅ allows users to edit widgets after their creation
✅ allows users to customize widgets (change color/icon)
✅ works well on phone screens - scales well on small devices (iPhone SE 1st generation) and huge devices (iPhone 12 Pro Max)
✅ works well on tablet screens - supports iPad in full screen, split-screen, and Slide Over mode
✅ has an overview of all the times event was repeated
✅ has support for dark mode - also added additional themes
✅ has proper i18n - supports English (US/UK), Spanish, Swedish, Finnish, and, of course, Croatian

Conclusion

I am not going to say that it was easy. There were times when I definitely wanted to give up. However, I knew that the app would be something I will want to use. Whenever I felt like quitting, I took a break. Those breaks only made me think about the app more and reminded me how much I love creating stuff.

There is a very relatable comic that describes how most side projects end up.

comic about side projects
source: CommitStrip

I am happy to say that this project is now complete, and I can move on to the next thing without a guilty conscience from not finishing the last project.

Download Links

If you have any suggestions or bug reports, feel free to post in the comments below or contact me at hi@frangrgic.com.
You can also buy me a coffee here.

EdiTable

8 min read

Save, modify, and extend recipes to suit your needs. An iPad app that adjusts recipes to the needs of its users.

EdiTable

Snappy Icons

3 min read

A collection of more than 360 open source vector icons. The pack is currently available as an npm package for React Native.

Snappy Icons

VersInDesign

6 min read

An interactive timeline tool used for versioning of InDesign projects.

VersInDesign
Go back home