Bug Tracker | PERN-TypeScript

Bug tracking app made with PERN + TS

Demo

Deployed on Netlify (front-end) & Heroku (back-end)

Built using

Front-end

• ReactJS - Frontend framework
• Redux w/ hooks - State management library
• Redux Toolkit - Toolset for efficient Redux development
• Redux Thunk - Middleware which allows action creators to return a function
• React Router - Library for general routing & navigation
• React Hook Form - Library for flexible & extensible forms
• Material-UI w/ lots of CSS customisations - UI library
• Yup - Form validation tool
• date-fns - Library for manipulating/formatting of timestamps

Back-end

• Node.js - Runtime environment for JS
• Express.js - Node.js framework, makes process of building APIs easier & faster
• PostgreSQL - Opens-source SQL database to store data
• TypeORM - TS-based ORM for mostly SQL-based databases
• JSON Web Token - A standard to secure/authenticate HTTP requests
• Bcrypt.js - For hashing passwords
• Dotenv - To load environment variables from a .env file

Features

• Authentication (login/register w/ username & password)
• CRUD projects, with ability to add members for group work
• CRUD bugs, with title, description & priority
• Project members can add, edit, close & reopen bugs etc.
• Sort projects/bugs by various parameters like priority, recentely closed etc.
• Filter projects/bugs by name/title & other parameters
• CRUD notes, for guiding other members
• Descriptive color indicators for bug priority & status
• Error management with descriptive messages
• Toast notifications for actions: creating projects, removing membes etc.
• Loading spinners for fetching processes
• Dark mode toggle w/ local storage save
• Proper responsive UI for all screens

Screenshots

Desktop/Tablet

Mobile

Usage

Env variable:

Create a .env file in server directory and add the following:

PORT = 3005
JWT_SECRET = "Your JWT secret"

Client:

Open client/src/backendUrl.js & change "backend" variable to "http://localhost:3005"

Run client development server:

cd client
npm install
npm start

Server:

Open ormconfig.js & update the local PostgreSQL credentials to match with yours.

To run the migarations, go to server dir & run this command: npm run typeorm migration:run

Run backend development server:

cd server
npm install
npm run dev