Skip to content

"Done (for now)" is a multi-'timer' web app with custom snooze and a one-at-a-time notification queue. This was my 3rd React project, and my first TypeScript project (which I added in August 2017).

License

Notifications You must be signed in to change notification settings

KDCinfo/done-for-now

Repository files navigation

Done (for now)

A React Web App

A React-based multi-'timer' web app with custom snooze and a one-at-a-time notification queue.

'Done (for now)' provides timer alerts (via a modal) with Snooze/Done/Disable options (and an adjustable snooze delay). It also provides a custom notification 'queue' which accounts for overlapping/simultaneous alerts.

I added TypeScript in August 2017. Also got localStorage mock-up typed to accommodate testing.

Application URLs

Tech Stack

Working on this project provided me a more in-depth look into

  • React (15.5.4)
  • TypeScript (2.4.2)
  • Local component state and props
  • Client-side localStorage
  • Basic Testing (Jest and Enzyme)

My API endpoint of personal choice is still Laravel (PHP), but I did everyting with client-side local storage on this project. (My professional choice is whatever the Back-End Engineers are comfortable and good with -- Front-End should have (little to) no dependence on a back-end tech stack.)

Notes and Considerations

Using Local Storage

  • Just FYI the maximum size of local storage is 4.75 - 5 MB (depending on browser).
  • This should pose no storage issues.
  • Storage functions are stored in ./utilities/functions.ts

KDC-info Project Sites

As of July 2017

Tags

[react] [reactjs] [typescript] [timer] [snooze] [modal] [jest] [localStorage]

Tribute

This project was originally bootstrapped with Create React App (unejected)

TypeScript was later following: Migrating app from react-scripts to react-scripts-ts

-- Answered at the bottom (by @trichards57)

  • Create a temporary project using create-react-app my-temp-app --scripts-version=react-script-ts

  • In your own project, remove react-scripts and install react-scripts-ts

  • Copy [tsconfig.json], [tsconfig.test.json], [tslint.json] from the temporary project src folder to your project's src folder.

  • In package.json, change all the references to react-scripts to react-scripts-ts in the scripts section.

    Reminder: import * as React from ‘react’ (forgetting this will put you on a wild goose chase.)

About

"Done (for now)" is a multi-'timer' web app with custom snooze and a one-at-a-time notification queue. This was my 3rd React project, and my first TypeScript project (which I added in August 2017).

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published