Time Clock Management System (Yii2 REST API + Angular 2 + Docker)

Source Repo: https://github.com/chrisleekr/time-clock-management-system-yii2-rest-api-angular2-docker

This is a personal project for learning Angular 2. The project contains two applications, one for REST API backend, and the another for Angular 2 frontend.

The project involves:

• Yii2 for providing RESTful API including user login/logout, managing global settings/team/staff, showing period based reports, recording any activities done by users, and lastly time clock in/out
• User authentication based on randomly generated access token for stateless REST API through HTTP Bearer Tokens
• Angular 2 with CoreUI template, featured by Angular 2 Color Picker Directive, moment.js pipes, Angular2 date range picker, SweetAlert2, Native Angular directives for Bootstrap
• Porting AngularJS Circular Time Picker for Angular 2 as component
• Custom-made stopwatch component
• Dockerized application of frontend, backend and db

Note: This project is developed for learning and practice. Not suitable for production use. And it does not provide any testing code.

Getting Started

Directory Structure

  timeclock-backend/  contains Yii2 RESTful API application
  timeclock-frontend/ contains Angular 2 frontend application

Menu Structure

  /login                authenticate with user credentials
  /logout               log out
  /dashboard            display latest activities and shortcuts
  /time-clock           clock in/out staffs
  /report/timesheet     display timesheet reports for staffs
  /activity             display activities that are recorded
  /setting/global       manage global configurations for the applicaion
  /setting/team         list/create/update/delete teams
  /setting/staff        list/create/update/delete staffs

Prerequisites

• Docker 1.12.1+: https://www.docker.com/
• VirtualBox: https://www.virtualbox.org/

Usage

To run the application, open the console and execute following commands.

    $ git clone https://github.com/chrisleekr/time-clock-management-system-yii2-rest-api-angular2-docker.git
    $ cd time-clock-management-system-yii2-rest-api-angular2-docker    

Then open docker-compose.yml file in the root folder and replace <YOUR GITHUB API TOKEN> to Personal access tokens from Github

Once you replaced API token, run following command.

    $ docker-compose up

And wait for it is up and running. It might take for a while to fully up and running.

Once it is up and running, please open another console window and execute following command to migrate database.

    $ docker-compose run --rm backend ./yii migrate

Once migration is done, then open the browser and access to:

• Frontend: http://localhost:4200
• Backend: http://localhost:4201

By default, the application provides admin credentials as username admin and password 123456. As the application does not provide the function to manage user information at the moment, please do not use in production unless you know what you are doing.

Screenshots