/udacity-capstone

Udacity Cloud Developer Nanodegree Capstone Project

Primary LanguageTypeScriptMIT LicenseMIT

Introduction

Time Tracking Application is the project i realized for passing Capstone Nanodegree Cloud Developer Project. This project is inspired by Nate Murray for realizing the client application. Please note that this package is still under active MIT License.

TTA Screenshot

Table of Contents

Requirements

Make sure your server meets the following requirements.

  • Node > 10.x
  • Yarn > 1.21.x
  • Firefox or Google Chrome Navigator
  • Aws cli v1
  • Aws account

Features

We have few features :

  • Create a timer
  • Update a timer
  • Start a timer
  • Stop a timer
  • Delete a timer
  • Upload an image for a timer
  • login on the application
  • logoout from the application
  • Reset a timer

Installation

Firstly, download the project using :

$ git clone https://github.com/kemsty2/udacity-capstone

Install all the dependecies of the client app :

$ cd Frontend
$ yarn install

This command will install all the required dependecies to run the react client application.

Usage

Run webpack live server

$ yarn start

To view the application, go to:

http://localhost:3000/

Documentation

Timer Item

The application is able to manage timer. A timer item contains the following field :

  • timerId (string) - a unique id for a timer
  • userId (string) - a id which represent the timer owner
  • title (string) - title of a Timer item (e.g. "Change a light bulb")
  • project (string) - project name of a Timer item (e.g. "Change a light bulb")
  • elapsed (number) - amount of time in millisecond the timer have been start an stop
  • runningSince (number) - amount of time the timer are running. This value is reset to 0 when the timer is stopped.
  • attachment (string) (optional) - a URL pointing to an image attached to a Timer item

LogIn into the application

First, before manage timer, the user should login to the platform. To log into the platform, click on Login Button, Auth0 is using as Authentication and Authorization service. TTA Screenshot

Click on Log In with Google TTA Screenshot

The only available option for login is :

  • Log in with Google Account

Create a new Timer

To create a new Timer, Click on + Button.

  1. Enter the title and project name of the timer
  2. Click on Create

TTA Screenshot

Update a Timer

To update a Timer, Click on Pencil Button.

  1. Edit the title or the project name of the timer
  2. Click on Update

TTA Screenshot

Delete a Timer

To delete a Timer, Click on Trash Button.

  1. A confirmation modal is open, confirm by clicking on Yes

TTA Screenshot

Start a Timer

To start a Timer, Click on Start Button.

  1. The Start button switch to become Stop Button
  2. The counter begin

TTA Screenshot

Stop a Timer

To stop a running Timer, Click on Stop Button.

  1. The Stop button switch to become Start Button
  2. The counter stop

TTA Screenshot

Upload an attachment to a Timer

To upload an attachment to a timer, click on the Upload Attachment Button.

  1. A modal is open, to choose the file you want to upload.
  2. Click on browse, choose your file
  3. Click on Upload
  4. Click on Ok after the alert reveal.

TTA Screenshot TTA Screenshot

Credits

License

MIT. Please see the license file for more information.