⏳ Unnamed Time Tracking APP ⌛️

A project to track work on projects for clients.

📦 Getting started

Requirements Overview

The following are required to run this project:

Node & NPM installed, package dependencies installed npm i.
Authenticated your local NPM with github packages for access to private Badgateway github packages.
MySQL database set up and running.
Time tracking project API set up and running.

Gaining Access to Private Badgateway Github Packages

If npm i first gave you an error, you might need to get access to our Github packages first.

Follow the steps here:

Go to your Github Settings > Developer Settings > Personal Access Tokens
Generate yourself a new one, give it read/write packages permissions. (save the PAT, cant be found again)
Navigate to your home directory, find or create a .npmrc file, add the following line //npm.pkg.github.com/:_authToken=[your-recently-generated-PAT]

Now when running 'npm i' the node modules will be downloaded.

Setting Up The Database

Create a mysql database for this project. We're using "tt" as an identifier here often, shortform for "time tracking". Set the database user password your_password to your own appropriate password.

mysql> CREATE DATABASE tt;
mysql> CREATE USER 'tt' IDENTIFIED BY 'your_password';
mysql> GRANT SELECT, REFERENCES, INSERT, UPDATE, DELETE, ALTER, CREATE, DROP ON tt.* TO 'tt';
mysql> FLUSH PRIVILEGES;

Populate the database using knex, which should add tables automatically.

knex --knexfile src/knexfile.ts migrate:latest

This should populate your database with the required tables.

Configure OAuth2

After a12n-server is running, and you have confirmed you can log in, you'll need to add an 'app' principal and OAuth 2 credentials. The easiest way to do this is by opening:

http://localhost:8531/app/new?nickname=tt-app&url=http://localhost:8902/&clientId=tt-app&allowedGrantTypes=authorization_code,refresh_token&redirectUris=http://localhost:8902/

It's important to note the default clientId (tt-app) generated by this process.

👷 Development

Running

From the root directory, initiate the project with npm run start (make sure the deps are installed).
The API server can be browsed at http://localhost:8902/.

File Structure

To keep all of our component files easy to browse and intuitive to find, this is the general file organization guide:

src
├── components
│   ├── reusable component
│   │   ├── (reusable component main)
│   │   └── (reusable component parts)
│   ├── (single reusable component)
│   └── (single reusable component)
├── pages
│   └── page //eg: 'people'
│       ├── sub-page //eg: 'new'
│       │   ├── (page component)
│       │   └── (page unique components)
│       ├── sub-page //eg: 'edit'
│       │   ├── (page component)
│       │   └── (page unique components)
│       ├── (main page component)
│       └── (main page unique components)
├── types
│   └── (reusable custom types)
├── utilities
│   └── (reusable utility functions/variables)
└── app.tsx