Hello Bebe

TicketFlow

TicketFlow is a web application featuring a Spring Boot backend with a PostgreSQL database and a Vite React frontend built with TypeScript. It also utilizes GitHub Actions for continuous integration. The project is still under development, so if you have any suggestions, please feel free to contact me.

Table of Contents

• About the project
• Built with
• Prerequisites
• Setup and Configuration
• Running the Backend
• Running the Frontend
• Usage
• Contact

About the project

This project is a personal endeavor that I've been working on since completing my studies at Codecool. It represents my first significant application developed entirely from scratch on my own. The application is a ticketing system designed with a focus on a user-friendly interface, utilizing symbols and emojis for an intuitive and visually appealing experience. I'm excited to share this work as a demonstration of my learning and development journey.

I used Jira for agile project management:

Some videos about the app:

register_fast.mp4

create.ticket.mp4

Built With

• 
• 
• 
• 
• 
• 
• 
• 

Prerequisites

Ensure you have the following installed:

• Node.js (v14.0.0 or later)
• npm or Yarn (optional, if you prefer Yarn)
• Java JDK (for running Spring Boot)
• PostgreSQL (for the database)

Setup and Configuration

1. Clone the Repository:

   git clone https://github.com/grindlevi/ticketflow.git

2. Set Environment Variables:

   You need to configure environment variables for the Spring Boot application. Open your terminal and set the following environment variables:

   • DB_URL: The URL of your PostgreSQL database (e.g., jdbc:postgresql://localhost:5432/mydatabase)
   • DB_USERNAME: The username for your PostgreSQL database
   • DB_PASSWORD: The password for your PostgreSQL database
   • JWT_SECRET: A secret key for JWT authentication, the secret should at least be 32 characters long, but the longer the better.

   For Windows Command Prompt:

   set DB_URL=jdbc:postgresql://localhost:5432/mydatabase
   set DB_USERNAME=myusername
   set DB_PASSWORD=mypassword
   set JWT_SECRET=myverysecretkey

   For Windows PowerShell:

   $env:DB_URL="jdbc:postgresql://localhost:5432/mydatabase"
   $env:DB_USERNAME="myusername"
   $env:DB_PASSWORD="mypassword"
   $env:JWT_SECRET="myverysecretkey"

   For Unix-based Systems (macOS/Linux):

   export DB_URL=jdbc:postgresql://localhost:5432/mydatabase
   export DB_USERNAME=myusername
   export DB_PASSWORD=mypassword
   export JWT_SECRET=myverysecretkey

Running the Backend

1. Navigate to the Backend Directory:

   cd ticketflow/backend

2. Build the Spring Boot Application:

   mvn clean package

3. Run the Application:

   java -jar target/ticketflow-0.0.1-SNAPSHOT.jar

   Ensure that your PostgreSQL server is running and accessible.

Running the Frontend

1. Navigate to the Frontend Directory:

   cd ticketflow\frontend\ticketflow-frontend>

2. Install Dependencies:

   Using npm:

   npm install

   Or using Yarn:

   yarn install

3. Start the Development Server:

   Using npm:

   npm run dev

   Or using Yarn:

   yarn dev

4. Open Your Browser:

   Visit http://localhost:5173

Usage

TicketFlow is designed to streamline ticket management, providing a user-friendly interface to create, organize, and manage tasks efficiently. Here's a quick guide on how to use the app:

Register and Log In:

Start by registering an account or logging in if you already have one. The authentication system ensures that your tickets and data are secure.

Create Tickets:

Once logged in, you can easily create new tickets. Each ticket can be given a title, description, and priority level. This allows you to keep track of tasks, issues, or any work that needs attention.

Organize Tickets:

Tickets can be sorted by creation date or priority, helping you stay organized and focused on what matters most.

Drag and Drop:

TicketFlow features a drag-and-drop system, allowing you to easily move tickets between different containers or statuses. Simply click and drag the ticket to its appropriate location (e.g., To Do, In Progress, Finished).

Log Out:

When you're finished managing your tickets, you can securely log out of your account to protect your data and privacy. Just click on the "Logout" button to end your session.

Contact

Feel free to contact me with any issues.

grindlevi@gmail.com