Time Clock Management System developed with Yii2 REST API + Angular 2 + Docker
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Time Clock Management System (Yii2 REST API + Angular 2 + 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:

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



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

Alt text

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.

Alt text

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

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

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.


Alt text Alt text Alt text Alt text Alt text Alt text Alt text Alt text Alt text Alt text Alt text Alt text Alt text