Timer Manager | React, Redux, Firebase

Simple time tracking application for managing tasks you spent on one or multiple projects.

Demo

Deployed on Netlify (front-end))

Built using

Front-end

• ReactJS - Frontend framework
• Redux - State management library
• Redux Thunk - Middleware which allows action creators to return a function
• React Router - Library for general routing & navigation
• Material-UI w/ lots of CSS customisations - UI library
• Framer Motion - Open-source motion library for React

Features

• Authentication (login/register w/ email & password)
• CRUD projects
• CRUD tasks, with timer and comment
• Dashboard with your projects
• Filter dashboard projects
• Error management with descriptive messages
• Loading spinners for fetching processes
• Proper responsive UI for all screens
• Page transition animations

Screenshots

Desktop/Tablet

Mobile

Usage

Env variable:

Create a .env.local file in client directory and add the following:

REACT_APP_APIKEY= *Get from Firebase*
REACT_APP_AUTHDOMAIN= *Get from Firebase*
REACT_APP_PROJECTID= *Get from Firebase*
REACT_APP_STORAGEBUCKET= *Get from Firebase*
REACT_APP_MESSAGINGSENDERID= *Get from Firebase*
REACT_APP_APPID= *Get from Firebase*

Client:

Run client development server:

npm install
npm start