Timetracker

Description

A fullstack javscript app (expressjs/reactjs) for tracking timesheets for hourly employees.

View project description & demo

Basic install workflow

To set this up locally for yourself would require a few steps:

• Install & configure postgreSQL
• Clone this project.
• Install at two locations:
  • root directory (For the clientside development package.json)
  • server directory: ./src/server (For the serverside development package.json)
• Create .env file credentials (DB, API) -- See file "example-.env.file.txt" for instructions.
• Run knex db migrations & seeding, and manually create sessions table for express-sessions
• Compile frontend client with webpack configuration files
• Run server ("npm run dev" -- see clientside package.json)
  • Admin page: http://localhost:3000/dashboard/admin_dash
  • Registration page: http://localhost:3000/auth/register --> forwards to employee page
  • Login page: http://localhost:3000/auth/login --> forwards to employee page

Frontend javascript frameworks (business logic, configuration, user interface):

Framework	Purpose
ReactJS	Main structure of frontend application logic, including user experience and backend communication
Redux	Maintains frontend application state in centralized location
Webpack	Bundles multiple project files and packages together into single files and transforms them for optimized browser experience
Babel	Transpiles ReactJS components & css, configures javascript for targeted browser(s)

Frontend css frameworks (user interface design):

Framework	Purpose
Sass	An enhanced version of css, allowing for programmatic, extendible, compiled css (sass/scss)
Bulma	A simple css frontend design and formatting framework
Bootstrap	A responsive, sass framework (used with react-bootstrap-table)

Frontend REST API:

API	Purpose
Google Maps	Mapping employee system users (timesheet clockin/clockout)
Google Map address auto-complete	Automatically completes geographical address information as user type (employee/user profile)
App's backend REST API	Database communication including user authentication & business data CRUD

Important backend (NodeJS) packages include:

Package	Purpose
NodeJS	Underlying runtime environment which executes javascript server code
ExpressJS	Minimalist server web application framework & REST API
bluebird	Enhances asynchronous programming
csurf	API communication validation & form security
bcrypt	Oneway password encryption in user authentication system
express-session	Temporarily stores user-related application information such as user permissions, application configuration, and application messages
KnexJS	Interacts with PostgreSQL database to implment database connectivity & data retrieval in javascript
multer	Uploads files

Other important project platforms:

Platform	Purpose
PostgreSQL	SQL Database
Nginx	Web server software
Ubuntu Server	Server operating system

For full list of dependencies, see:

• Clientside package.json
• Serverside package.json

Project ERD

(Generated with DbVis)

Testing

I written any tests yet, but plan to. (REST API test examples:

• https://github.com/fortunejs/fortune-json-api/blob/master/test/index.js
• https://github.com/santiq/bulletproof-nodejs )