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
typed to accommodate testing.
- GitHub Pages (Demo)
- CodePen Version
- Process Flowchart -- This flowchart outline depicts the entire Done (for now) process flow. It was done at about 80% project completion, was finalized post-mortem (primarily as a future app maintenance resource), and took about 2 full days to complete. [https://www.draw.io](@drawio rocks!)
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
KDC-info Project Sites
As of July 2017
- Done For Now (React) An online Timer with Snooze (
- Native Date Input Component (React) An HTML5 native Date input field with non-native fallback support as outlined in the MDN documentation (
- Track Your Cash (React) An online checking register (
React/Redux/React Router 4/Web Storage/ES2016(ES7))
- Guess Right (Vue) A fun little word-guessing game (
- Pick-a-Meal (Laravel) Can't decide where or what to eat? (
- Keep Track (Laravel) An online personal inventory manager (
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
tslint.json] from the temporary project src folder to your project's src folder.
package.json, change all the references to
import * as React from ‘react’(forgetting this will put you on a wild goose chase.)