Code Monkey home page Code Monkey logo

simple-tracker's Introduction

Simple Tracker Build Status Image

Timer Screenshot

Simple time tracker app built on top of React and Redux. Leverages localStorage and service worker to allow timer to work offline and persist data when reloading page.

www.simpletracker.app

Usage Guide

https://www.simpletracker.app/#usage-guide

Run locally

Clone to local directory, then

$ cd path/to/repo
$ npm run start

# Visit http://localhost:3000 on a browser to use locally.

© Tanveer Karim

simple-tracker's People

Contributors

tanmancan avatar

Stargazers

Jonathan Jacob avatar Almas avatar Dragan Djuric avatar

Watchers

James Cloos avatar Dragan Djuric avatar

simple-tracker's Issues

Autocomplete on forms do not clear

Expected Behavior

Hide autocomplete dropdown when the form input is not focused.

Current Behavior

Autocomplete will show unless it is clicked on.

Fix mobile layouts

Expected Behavior

Users visiting on a phone or a tablet, should have an equal experience as desktop.

Current Behavior

Mobile does not offer a good experience, including awkward text wrapping, and broken layouts.

Sidenav does not close on mobile when a link is clicked

Expected Behavior

On mobile when side nav is toggled open, clicking on a navigation link should dismiss it..

Current Behavior

On mobile when side nav is toggled open, clicking on a navigation link, does not dismiss it.

Possible Solution

Dismiss side nav when navigation item is clicked
Don't dismiss when category visibility toggle is clicked

Add keyboard navigation on autocomplete form inputs

Expected Behavior

Use arrow and enter keys to select from list of autocomplete suggestions when typing in a timer title.

Current Behavior

Can only select suggestions using mouse.

Possible Solution

Arrow keys and tab keys to select suggestion on autocomplete.
Enter key to choose current selection.

Add tags from a timer

Add a tag to a timer from the timer edit screen. Currently drag and dropping tags do not work in mobile.

Incorrect timer creation timestamp

Expected Behavior

Timer creation timestamp should indicate the moment the timer was created

Current Behavior

All timers are showing the same identical timestamp. They all show the timestamp for the first timer that was created for the current day.

Possible Solution

Probably redux issue

Timer state doesn't change in title/favicon when timer stopped with sidenav

Expected Behavior

Title should change from Running to Stop.
Favicon color should change from green to red.

Current Behavior

Title says running when timer is stopped using Stop Timer link in side nav.
Favicon color stays green when timer stopped using Stop Timer link in side nav.

Possible Solution

Hook side nav controls to manual title/favicon state change within the timer component.
@todo make these into a global state to store within redux.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.