React time tracking 
Time tracking app on React, try demo.
The app is inspired by toggl.com.
Tech stack
Web application based on React (clientside) and Firebase (serverside)
- Clientside UI libraries: material ui, flexboxgrid layout, formsy form validation, chartjs chart
- State management: redux, redux thunk, reselect
- Unit test: jest + enzyme
Features
Authentication
- Signup using email/password
Time entry
- Can add time entry
- Can track time spent on time entry and stop a time entry tracking
- Can list time entries
- Delete time entry
- Report
Tag
- Add tag to time entry
- CRUD tag
Demo
Try demo at https://vivid-trace.firebaseapp.com/ and storybook
Developer notes
Enzyme
Simulate onClick event in shallow (github)
const componentWrapper = shallow(<Component />)
componentWrapper.simulate('click', { preventDefault() {} })Simulate change event in material-ui's TextField (github)
const input = wrapper.find('input[name="text"]')
input.node.value = "newvalue"
input.simulate('change', input)Sass and create-react-app
Material UI 0.16.7
Click on button in a Table's Row without select that row (github)
Doesn't support responsive (github)
Storybook
Use storyshots to enable unit test. Need install story book addon packages and babel preset
Add .babelrc to project's root directory
{
"presets": ["babel-preset-es2015", "react-app"]
}Install packages
npm install storyshots @kadira/storybook-addons @kadira/storybook-channel --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react-app --save-devAdd src/__tests__/Storyshots.test.js:
import initStoryshots from 'storyshots'
initStoryshots()Explicitly add material ui component id so Jest snapshot test doesn't get failed because of auto generated id
Run npm test