Timestamp

A full stack notes and productivity app focused on helping users maximize efficiency when learning new skills. Users get real-time feedback from progress statistics that show them how much their efforts are paying off.
Tech Used
Typescript
Next.js
Redux
PostgreSQL
Node.js
Sass
Jest
Enzyme
Vercel
Heroku
Figma
Affinity Designer
Affinity Photo
Source Code
APIFrontend

Capturing Progress in Time

Project Overview

Timestamp is a notes and productivity app with the core idea of giving users feedback on how much their efforts are accumulating to motivate their growth. Users have access to multiple statistics to give them instant feedback in the moment or to watch as their numbers grow over time.

Organizing Data

Timestamp was one more data heavy apps that I've designed for. Due to the nature of the app requirements, I knew that much of my design approach would be around creating strong list components that had multiple ways of filtering and sorting information. Pagination was another key requirement feature, due to possibility of the fast scaling data growth.

Taking Notes

Next up, I built a custom modal form component that lets users easily switch between adding a Project, Task, or Note to the app. This form can be accessed in multiple ways to present users with options in how they use the app. Users can open the modal by clicking on a button in the global toolbar menu or add an item inline on their current Project or Task list.

Documenting Time

The main data input of Timestamp is called a Note. Notes allow users to document what they work on each day in a flexible manner. Users can write only a few sentence fragments to jog their memory or create long-form notes with heavier formatting to organize their thoughts. Once a note is entered, it triggers automatic scripts that increment a users dashboard statistics.

Start to Finish

Users have the option of working on Projects and Tasks for as long as they choose or can decide to complete an item and move on to something new. Once a Project or Task is completed, the app filters it into a Completed list where it can easily be accessed or reactivated for if a user decides to work on it again in the future.

Searching for Something

Effective search features can help users feel more in control of their data. Timestamp gives users the ability to filter by Title, Description, Tag, or Date to help them refine their search capabilities. Results are displayed on cards that give quick snapshots of key details for easy skimming and filtering.

Hardwork Pays Off

Users can navigate to the Activity page to see multiple statistics related to their effort. Timestamp organizes user data and breaks down activity by year, month, and daily statistics. Users can swap between year stats to see how much their effort has grown over time.

Designing in Color

Setting up an app for multiple color modes can be challenging at times. Brand colors used for links and buttons might look great against a white background, but end up being too low contrast when it's inverted. Increasing the HSL lightness value of the main brand color by a few percentage points can keep colors accessible for key users without much optical difference on a darker background.

Interested in Working Together?

Let Me Know

Copyright 2020

Brandon Corey Web Development

Designed & Built in KCMO