/tracker-ui

Fully Responsive Single Page Application for tracking issues.

Primary LanguageJavaScript

Issue Tracker Application

| A fully responsive Single Page Application for tracking issues

http://ui.issue-tracker-ahmedalima.tk/issues

This repository contains the UI application. Back-end application is HERE

Live Demo:  Issue Tracker

Main View, Issue List

Technology Stack (MERN Stack)

  • MongoDB: NoSQL Database.

  • Atlas: for cloud database hosting.

  • ExpressJS: for configuring API and UI servers.

  • React: Front-end and UI

  • Bootstrap: for styling.

  • NodeJS: Back-end server


Features

  • Server-Side-Render(SSR).

    • full rendering with credentials.

  • Adding a New Issue.

Add New Issue Page



  • Editing Existing Issue. - Requires authentication (Sign In).

Edit Page



  • Report Page: List all Owners and number of Issue Types associated with them.

Report Page



  • Deleting Issue - Requires authentication (Sign In).

  • Close Issue - Requires authentication (Sign In).

  • Filter Issues.

  • Sign In - Google OAuth2 Sign In

Sign In Image



  • Persistent Sign in on browser refreshing during session.

  • Search the title and description fields.

Search Image

  • User credentials are saved in Javascript Web Token   JWT

  • Session Cookies are used in storing and transferring JWT.



Each Issue has the following properties:

  • ID => Unique Identification Number (Auto-Generated). Immutable.

  • Status => (New, Assigned, Fixed, Closed) indicate current state of issue. Mutable

  • Owner => Name of the issue owner. Mutable

  • Created => Date Of creation - Auto-Generated - Immutable.

  • Effort => Estimated number of days for finishing up the issue. Mutable

  • Due => Date expected to finish up the issue. Mutable

  • Title => The Issue's title. Mutable

  • Description => Detailed Description of the Issue



To run locally:

  • Run the API Application

  • npm install

    • To install Application Dependencies. First time only.

  • npm run server-with-HMR

    • Compile (Babel) and bundle Server code using Webpack.

  • Set environment variables. Either by creating "sample.env" file or defining them in you shell

    • Required Environment variables are listed below.

  • npm start

    • Start the UI server.
    • Ui Server code runs "Webpack Dev and Hot Module Replacement" middleware for transforming and bundling UI code.

Required Environment variables 



# server port
# during deployment and runtime, it is set automatically
#   and overwrites what is implemented here
PORT=8000

# HMR of Webpack, enable it during development
ENABLE_HMR=true

# Google OAuth2 Client Credentials ID 
GOOGLE_CLIENT_ID=-you-Google cLient Id-.apps.googleusercontent.com


# REGULAR MODE API ENDPOINTS
# API url for client
# UI_API_ENDPOINT=http://localhost:3000/graphql

# # API URL for ui server, it doesn't affected by CORS policies
# UI_SERVER_API_ENDPOINT=http://localhost:3000/graphql

# # auth api endpoint
# UI_AUTH_ENDPOINT=http://localhost:3000/auth

#  REGULAR CONFIGURATION WITH DOMAINS
UI_API_ENDPOINT=http://api.promernstack.com:3000/graphql
UI_SERVER_API_ENDPOINT=http://api.promernstack.com:3000/graphql
UI_AUTH_ENDPOINT=http://api.promernstack.com:3000/auth

# PROXY MODE API ENDPOINTS

# UI_API_ENDPOINT=http://localhost:8000/graphql

# UI_API_ENDPOINT=/graphql

# UI_AUTH_ENDPOINT=/auth

# API_PROXY_TARGET=http://localhost:3000

# UI_SERVER_API_ENDPOINT=http://localhost:3000/graphql