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