Bug Spy

Spy, resolve and track bugs in your projects.

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Features
  • Color Reference
  • Environment Variables
• Getting Started
  • Prerequisites
  • Installation
  • Running Tests
  • Run Locally
  • Deployment
• Usage
• Roadmap
• Contributing
  • Code of Conduct
• FAQ
• License
• Contact
• Acknowledgements

🌟 About the Project

📷 Screenshots

Main Project Dashboard with Register Page

👾 Tech Stack

Client

• Typescript
• Redux-Toolkit
• React.js
• TailwindCSS

Server

• JavaScript
• Express.js
• Node.js
• SocketIO
• Mongoose

Database

• MongoDB
• Redis

DevOps

• Docker
• Google App Engine
• NginX

🎯 Features

• Users can create a Project
• Users can create a Bug
• Users can assign a Bug to a Project
• Users can assign a Bug to a User
• Users can Track the progress of a Bug

🎨 Color Reference

Color	Hex
Primary Color	#EEEEEE
Secondary Color	#2196F3
Accent Color	#393E46
Text Color	#222831

🔑 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

API_KEY https://bug-spy-server.ew.r.appspot.com ANOTHER_API_KEY

🧰 Getting Started

‼️ Prerequisites

This project uses NPM as package manager

 Preinstalled with Node.js

⚙️ Installation

Install my-project with npm

  npm install bug-spy
  cd bug-spy

🧪 Running Tests

To run tests, run the following command

  Coming Soon!

🏃 Run Locally

Clone the project

  git clone https://github.com/Yagi91/Bug-spy.git

Go to the project directory

  cd bug-spy

Install dependencies

  npm install

Start the server

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

  npm start

🚩 Deployment

To deploy this project to Github-pages run

  npm  run deploy

👀 Usage

Bug Spy is a bug tracking application that allows users to create projects and add bugs to them. Users can also assign bugs to other users and see the status of the bug. User roles are also implemented to allow for different levels of access to projects. The projects page is well organized and allows users to easily see the status of their projects, filter projects by status, and search for projects by name.

-The project page also allows users to create new projects and delete projects they have created.

• The project details page allows users to see all the bugs in a project and their status. Users can also create new bugs and delete bugs they have created.

• Members of a project can be added and removed from the project details page. Users can also change the role of members of a project.

• The list of bugs of a project is found on the project details page. Users can see all the bugs in a project and their status. Users can also create new bugs and delete bugs they have created.

• Each Bug can be assigned to a user and the status of the bug can be changed. The bug details page also allows users to add comments to the bug and delete comments they have created.

• My tickets page allows the user to see all the bugs the have been assigned to. Thi will enable the user to easily work on a task that has been assigned to them. The user can also navigate to the bug details page from the my tickets page.

• The profile page allows the user to see their details and update their details. The user can also change their email, role, language, and Timezone.

• The application's chat feature is coming soon!

Screenshots of the application can be found below.

//Used React-select to create a dropdown menu for the user roles and other select inputs
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
];

const handleChange = (e) => {
  console.log(e.value);
};

<Select options={options} onChange={handleChange} defaultValue={options[0]} />;

//Used react-router-dom to create the routes for the application

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

<Router>
  <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/projects" component={Projects} />
  </Switch>
</Router>;

//Created custom UseTitle hook to change the title of the page

import { useTitle } from "../features/common/customHooks";

const App = () => {
  useTitle("Bug Spy");
  return (
    <div>
      <h1>My App</h1>
    </div>
  );
};

🧭 Roadmap

• Create Authentication
• Create Projects
• Create Bugs
• Create User Roles
• Project Details Page
• Project Page
• User Page
• Chat Feature

👋 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

📜 Code of Conduct

Please read the Code of Conduct

❔ FAQ

• How do I do quickly edit bugs?

  • First, login to your account. From the projects dashboard, click on the edit icon at found at the side of the bug you want to edt. You will then see a popup that will allow you to edit the bug.

    Note: This is only available on desktop.

⚠️ License

Distributed under the CC License. See LICENSE.txt for more information.

🤝 Contact

Bryan Timah - LinkedIn - bryantimah@gmail

Project Links:

• Front-End
• Back-End

💎 Acknowledgements

• React Select
• Awesome README
• tailwind components