/time_tracker

Time tracker task as a technical task for a company that I applied to

Primary LanguageCSS

Time Tracker app

This is the app that I quickly coded for one company that I applied to for a job of Senior React developer.

How to run this project

  1. clone this repo with git
  2. install dependencies npm install
  3. run npm with npm start
  4. open localhost:3000

What is included in this project?

  1. Auth components with Firebase
  2. CRUD for timers with redux toolkit query
  3. Responsivness of the app and UI components with primerreact
  4. Start/stop timer with setInterval
  5. History page, Dashboard and 404 page with react router 6
  6. Typing with typescript
  7. Global state management with redux toolkit query
  8. Auth state management with context
  9. Reusable logic with custom react hooks
  10. Pagination for timers with paginator
  11. CSS utility classes with primeflex
  12. Theming with themeProvider
  13. Styled components to overwrite styles from prime react when needed.

What was the hardest part?

The hardest part was injecting up to date data into prime react table. I had to rely on redux to get the latest state of the counter. These subcomponents in UI table are oblivious to the state.

What was the easiest part?

I styled everything in 30 minutes so that was easy. But also CRUD methods with firebase. It is superb how firebase has all these helpers methods that we can just call as hooks.

What is missing from this project?

  1. Filtering is not quite finished, you can filter by any data field, but you can not set start end end date
    • I just did not have time to implement this even though it does not seem so difficult
  2. Styling is not pixel perfect, there are many subtle differences between the provided design and the result.
    • Same like with filtering, even though styling is even a lesser challenge. I have done pixel perfect design many times but just did not have time to focus on that now.