Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/veronika-pomy/issue-tracker

Issue Tracker app, powered by Next.js and React for a dynamic user interface, backed by MySQL for secure data storage and retrieval.
https://github.com/veronika-pomy/issue-tracker

mysql nextjs node-js prisma radix-ui

Last synced: 14 days ago
JSON representation

Issue Tracker app, powered by Next.js and React for a dynamic user interface, backed by MySQL for secure data storage and retrieval.

Awesome Lists containing this project

README 

        
# Issue Tracker



![Static Badge](https://img.shields.io/badge/Next-JS-%23000?style=for-the-badge&logo=Tailwind)

![Static Badge](https://img.shields.io/badge/MySQL-00758f?style=for-the-badge&logo=MySQL&logoColor=%20%23f29111&labelColor=%23dadada)

![Static Badge](https://img.shields.io/badge/prisma-5a67d8?style=for-the-badge&logo=Prisma&logoColor=5a67d8&labelColor=dadada)

![Static Badge](https://img.shields.io/badge/Axios-5a67d8?style=for-the-badge&logo=Axios&logoColor=5A29E4&labelColor=dadada)

![Static Badge](https://img.shields.io/badge/Next-Auth-a553b3?style=for-the-badge&logo=Next%20Auth&logoColor=5468ff&labelColor=dadada)

![Static Badge](https://img.shields.io/badge/Recharts-22b5bf?style=for-the-badge&logo=recharts&labelColor=22b5bf)

![Static Badge](https://img.shields.io/badge/Tailwind-CSS-%237dd3fc?style=for-the-badge&logo=Tailwind)

![Static Badge](https://img.shields.io/badge/Radix-UI-be93e4?style=for-the-badge&logo=Radix%20UI)



## Table of Contents



- [Description](#description)

- [Demo](#demo)

- [Features](#features)

- [Technologies](#technologies)

- [Design](#design)

- [Get Started](#get-started)

- [Contributing](#contributing)



## Description



The Issue Tracker is designed to streamline tracking and managing issues. This app provides a centralized platform for teams to collaborate on identifying, prioritizing, and resolving various tasks and problems.



## Demo



Explore the deployed version of the Issue Tracker [here.](https://issue-tracker-azure-nine.vercel.app)



https://github.com/veronika-pomy/Issue-Tracker/assets/111567114/909d2265-8cfc-4cf1-99de-1da818d3b185



## Features



- **Issue Tracking:** Effortlessly manage and track issues, ensuring a systematic approach to problem resolution.

- **Prioritization:** Prioritize tasks based on urgency and importance, facilitating efficient project management.

- **Collaboration:** Foster team collaboration by allowing members to update and contribute to issue resolution.

- **Real-time Analytics:** Gain valuable insights with dynamic charts tracking issues' statuses and reviewing the most recent issues, ensuring a comprehensive understanding of project progress and areas that require attention.



## Technologies



The Issue Tracker application leverages modern technologies to ensure a seamless user experience:



- [Next.js](https://nextjs.org/): Empowering the front-end with a dynamic and responsive user interface.

- [MySQL](https://www.mysql.com/): Storing and retrieving data efficiently.

- [Prisma](https://www.prisma.io/): Seamless data access and management.

- [Zod](https://zod.dev/): Ensuring strict and type-safe validation of data.

- [Axios](https://axios-http.com/): Making HTTP requests for seamless data communication.

- [Next Auth](https://next-auth.js.org/): Facilitating authentication with ease.

- [Recharts](https://recharts.org/): Visualizing data with responsive and interactive charts.

- [React SimpleMDE](https://github.com/RIP21/react-simplemde-editor): Integrating a Markdown editor for detailed descriptions and comments.

- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor): Integrating a simple Markdown editor for efficient text input.

- [React Markdown](https://www.npmjs.com/package/react-markdown): Rendering Markdown content seamlessly.

- [React Loading Skeleton](https://www.npmjs.com/package/react-loading-skeleton): Providing a skeleton loading effect for improved user experience.

- [React Hot Toast](https://react-hot-toast.com/): Displaying notifications for real-time updates.



## Design



The design of the Issue Tracker is crafted using the following tools:



- [Tailwind CSS](https://tailwindcss.com/): Styling the application with a utility-first approach for a clean and maintainable design.

- [Radix UI](https://radix-ui.com/): Implementing UI themes for a consistent and accessible design.

- [PostCSS](https://postcss.org/): Transforming CSS with JavaScript plugins for optimized styling.

- [React Icons](https://react-icons.github.io/react-icons/): Utilizing a comprehensive library of icons for enhanced visual appeal.

- [Canva](https://www.canva.com/): Leveraging Canva for professional and eye-catching design elements.

- [unDraw](https://undraw.co/): Creating customizable design assets.



## Get Started



1. Clone the repository: `git clone https://github.com/veronika-pomy/issue-tracker`

2. Navigate to the project directory: `cd issue-tracker`

3. Install dependencies: `npm install`

4. Start the development server: `npm run dev`

5. Set Environment Variables: For security, create an `.env` file and add your sensitive information as environment variables.



## Contributing



If you encounter any bugs, have suggestions, or want to add new features, please feel free to open an issue or submit a pull request.



You can also contact me at [email protected].



(back to top)