ethancloin/issue-tracker-frontend

React app to create, update, and track issues for your project

Live Site

Version 1 statically hosted at https://surge-issuetracker.surge.sh

Contributing

v2.0.0 (FastAPI backend)

Checkout the backend repository for instructions to run the server on your local machine. You won't see any issues without the backend project running!

v1.1.0 (Restdbio)

Contact me for an API Key which needs to be added to your .env file, without this you won't have access to the database. Reach out via Discord (Starved Spectre#8883)

PROJECT HISTORY

Version 1 (v1.0) 🧑‍🎓

Completed over the course of 3, 3hr class periods, with contribution from 3 students.

While the UI design was underdeveloped in favor of implementing all requested features, this app presents popular features like Client-Side Routing, CRUD Operations, and utilizes a REST API. The web application is deployed via Surge.sh as a static site!

Checkout the v1.0.0 release to view this version, main has been updated to include a friendlier interface and a few new features!

This project allowed us to practice the React Basics gathered over our 4 week course, including managing Context and State via React Hooks, interacting with the URL via searchParams(), and passing Props from parent --> child components.

Version 2 (v1.1)

IN PROGRESS! on branch main

• Utilize component from the MaterialUI component library to improve the look and feel across all views
• Improve UX when navigating between views (home, add issue, and issue detail)
• Extend Add Issue functionality
  • Create
  • Create and Add Another
  • Discard
• Extend filter functionality by adding searchbar to header and parsing to look for specific attributes

Version 3 (v2.0)

IN PROGRESS! on branch FastAPI-Dev

• Implement backend server in Python with FastAPI framework
• Dockerize and host the project on a cloud service

issue-tracker-frontend's Issues

Build Out Issue Detail Page

Summary

Issue Detail basically just copied code from the Issue component. Create a distinct view with editable text for description and assignee.

Navbar UX Improvement

Summary

Navbar should update to include a Back Arrow on the top left corner when user is in either Add or Detail pages. Clicking the 'Issue Tracker' text already routes back to home, but the arrow will make it more clearly an option.

Fix 'Discard' on CreateIssue

Discard should redirect back to Home, currently doesn't

Tag a stable RestDB.io version

currently main branch is linked to FastAPI service, but thst requires access to that repo. update main to point to a stable restdbio version until the backend is properly deployed.

Create Issue Form Should Have Alternate Submit Behaviors

Summary

CreateIssuePage.tsx
Intended behavior is for user to be able to stay on the page if the
select the "Create and Add Another" button, but be redirected to Home
when "Create" is selected.

Previous Attempt

I was looking into accessing the .submitter property on the SubmitEvent.
This was problematic since it seemed like TS was expecting a FormEvent instead.

Suggestion

I think a simpler and cleaner strategy will be to add a state variable shouldGoHome.
This variable would also be useful for the "Discard" button.

Also remove the mess from the previous attempt ... 🤢

Migrate Backend to my FastAPI Server

Summary

Update service and model set to support the FastAPI server

Tasks

• Update service calls to hit server
• Update models to ensure matching data for server

Backend Availability Issue

Summary

Previously I relied on a database served by third-party restdb dot io. now that the main branch relies on my FastAPI server, it increases the barrier to entry to work on this project. Any contributors must not only run the frontend, but also startup the backend server.

This is not ideal, since it requires that they have knowledge of the existence of that project, and the tools necessary to run it (poetry, python).

Task

• Find a suitable configuration which will allow people to easily host the app: Docker? AWS? AWS Lambda?