Git Product home page Git Product logo

tracker-api's Introduction

Issue Tracker Application

| A fully responsive Single Page Application for tracking issues

http://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=""

tracker-api's People

Contributors

itstanany avatar

Stargazers

Roman avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.