"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).
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.babelrc
.gitattributes
.gitignore
.travis.yml
LICENSE
README.md
package.json
tsconfig.json
tsconfig.test.json
tslint.json

README.md

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.)