https://github.com/rishisharmapro/bugboard
A modern issue tracker built with React + FastAPI + TypeScript + TailwindCSS.
https://github.com/rishisharmapro/bugboard
fastapi motion reactjs tailwindcss
Last synced: 3 months ago
JSON representation
A modern issue tracker built with React + FastAPI + TypeScript + TailwindCSS.
- Host: GitHub
- URL: https://github.com/rishisharmapro/bugboard
- Owner: RishiSharmapro
- License: mit
- Created: 2025-09-25T17:41:06.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-09-25T18:01:32.000Z (9 months ago)
- Last Synced: 2025-09-25T19:45:13.801Z (9 months ago)
- Topics: fastapi, motion, reactjs, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 59.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BugBoard
A modern, open-source **Issue Tracker** built with **React + FastAPI + TypeScript + TailwindCSS**.
Track, search, filter, sort, create, and update issues efficiently with a clean and responsive dashboard interface.
---
## 🚀 Table of Contents
1. [Project Overview](#project-overview)
2. [Features](#features)
3. [Tech Stack](#tech-stack)
4. [Installation](#installation)
5. [Usage](#usage)
6. [Screenshots](#screenshots)
7. [Project Structure](#project-structure)
8. [Author](#author)
9. [License](#license)
---
## 📝 Project Overview
**BugBoard** is a lightweight issue tracking application designed for developers and teams to manage tasks effectively.
It includes a backend built with **FastAPI** for REST APIs and a frontend built with **React + TypeScript** for a responsive UI.
The app supports:
- Viewing a list of issues with pagination
- Searching issues by title
- Filtering issues by status, priority, and assignee
- Sorting issues by created or updated time
- Creating and editing issues
- Viewing detailed JSON data for each issue
---
## ✨ Features
- **Issues List Page:** Table view with sorting, search, and filters
- **Create & Edit Issues:** Add or update issues with automatic timestamps
- **Issue Detail Page:** View full JSON data of each issue
- **Pagination:** Navigate through multiple pages of issues
- **Modern UI:** Responsive design with TailwindCSS and subtle animations
---
## 🛠 Tech Stack
| Layer | Technology |
|-------|------------|
| Frontend | React, TypeScript, TailwindCSS, Motion |
| Backend | FastAPI, Python, Pydantic, UUID |
| Routing | React Router v7 |
| Development Tools | Vite, SWC, Node.js, npm |
---
## 💻 Installation
### Backend
1. Clone the repository
```bash
git clone https://github.com/RishiSharmapro/BugBoard.git
cd issuehub/backend
````
2. Create a virtual environment
```bash
python -m venv venv
source venv/bin/activate # Linux/Mac
venv\Scripts\activate # Windows
```
3. Install dependencies
```bash
pip install fastapi uvicorn pydantic
```
4. Run the backend
```bash
uvicorn main:app --reload
```
### Frontend
1. Navigate to the frontend folder
```bash
cd ../frontend
```
2. Install dependencies
```bash
npm install
```
3. Start development server
```bash
npm run dev
```
4. Open the app in your browser at `http://localhost:5173`
---
## ⚡ Usage
* Go to the **Issues List Page** to see all issues
* Use the **search box** to find issues by title
* Apply **filters** by status, priority, or assignee
* Click **column headers** to sort by that field
* Use **pagination buttons** to navigate through pages
* Click **Create Issue** to add a new issue
* Click **Edit** to update an issue
* Click on a row to view the full **Issue Detail JSON**
---
## 📸 Screenshots
---
## 📂 Project Structure
```
issuehub/
┣ backend/
┃ ┣ main.py # FastAPI backend
┃ ┗ requirements.txt
┣ frontend/
┃ ┣ src/
┃ ┃ ┣ components/ # Reusable UI components
┃ ┃ ┣ types/ # TypeScript types
┃ ┃ ┗ App.tsx
┃ ┗ package.json
┣ README.md
┗ LICENSE
```
---
## 👤 Author
**Rishi Sharma**
* [GitHub](https://github.com/rishisharmapro)
* [Portfolio](https://rishisharmapro.vercel.app)
* [LinkedIn](https://www.linkedin.com/in/rishisharmapro)
---
## 📄 License
This project is licensed under the **MIT License**.
See `LICENSE` for more information.