Skip to content

itstanany/tracker-api

Repository files navigation

Issue Tracker Application

| A fully responsive Single Page Application for tracking issues

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

This repository contains the Back-End application. UI 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



# DB URL string
DB_URL=YOUR-DATABASE-URL

# server listening port
PORT=DEFAULT 80

# CORS configuration
ENABLE_CORS=true

# Javascript Web token secret string
JWT_SECRET="YOUR-SECRET-STRING"

# UI server for that sends cookies bypassing cors setting
# UI_SERVER_ORIGIN=""


# parent domain for setting cookies
COOKIE_DOMAIN=""