abbynyakara / react-bug-tracker Goto Github PK

This react project is part of a series of individual apps built to showcase some of my personal Front End Development Skills.

The app Records bugs occurring in software development and tracks the issues. Fully secured with authentication method and a Role Management System. Professional UI / easy access to data / realtime data syncing Firestore.

Other projects can be found within the following Portolio website as well as on this GitHub Repositories.

A Bug Tracker App created with reactJS, recording bugs and tracking the issues.

The app contains the following features:

• Fully secured navigation with authentication method for any roles: Admin/Manager/Developer/Submitter
• Depending on your current role, an access to extra functionalities and informations on the app
• A Register/Login option for the user to create a personalised account (Firebase and Context API)
• A Login option for Demo User allowing a quick demonstration using one of the 4 Roles
• A synchronised data flow on all project/ticket
• Create a new Project and Assign or Remove a Project Manager from it
• Edit the Project details and add/remove members from it
• Archive, Retrieve and Delete a Project
• Create a new Ticket, edit the Ticket and Assign a developer to it
• Archive, Retrieve and Delete a Ticket
• Add a comment to a ticket and check its history
• Receive Live Notifications when assigned a Project and a Ticket
• Check out Profiles and Informations of all Members
• Assign a new Role to a member and change its security clearance (Admin only)
• Live Search in all Tables for the informations
• Change the Theme of the App Light/Dark options

Built with

• reactJS
• Styled Components
• Redux Toolkit
• Context API
• React-Hook-Form
• React-Tables
• Firebase & Firestore
• Material UI

User Role Navigation => Redirect the User for unauthorized routes depending on its role

const RequireAuth = ({ allowedRoles }) => {
  const { auth } = useAuth();
  const location = useLocation();

  return auth?.roles?.find((role) => allowedRoles?.includes(role)) ? (
    <Outlet />
  ) : auth?.user ? (
    <Navigate to="/Unauthorized" state={{ from: location }} replace />
  ) : (
    <Navigate to="/Login" state={{ from: location }} replace />
  );
};

export default RequireAuth;

Protected Routes for different users roles => Admin, Project Manager, Developer and Submitter

{
  /* ----- PROTECTED ROUTES -  LOGGED IN USERS ONLY ----- */
}
<Route element={<RequireAuth allowedRoles={[ROLES.User]} />}>
  {/* All logged in Users can access these routes */}
  <Route path="/" element={<HomeDashboard />} />

  <Route element={<RequireAuth allowedRoles={[ROLES.Admin, ROLES.Manager]} />}>
    {/* Only ADMIN and PROJECT MANAGER can access these routes */}
    <Route path="/Projects/EditProject/:id" element={<EditProject />} />
  </Route>
</Route>;

Use the package manager npm to install the app once project is downloaded.

For dependencies

npm install

npm start

For an easy start, click on the following link to access the live website: https://bugtracker-ig.netlify.app/

• Start by Login on Demo User and see the different access/authorizations given to you depending on your role.
• Create a new ticket, a new project.
• Edit, Archive, Retrieve and Delete Tickets and Projects.
• Add a comment to a ticket and check its history.
• Assign and edit Roles to users.
• Assign a project to a Manager and a ticket to a Developer.
• Check the inbox for a new project or ticket recently assigned.
• Check out any user profile and their current projects.
• Search for your own Project/Ticket.

Any contributions is welcome! Please suggest any new feature, suggestion or improvement and they will be implemented. Thank you for the support.

I would like to thank:

• Coder Foundry for the project inspiration
• Bootstrap for the UI design ideas

() => © Ionathan