MongoDBExpressReactNode.jsRedux ToolkitJWT
Support Desk Project
A full-stack ticketing system web application built with the MERN stack and React-Redux Toolkit. Designed to handle user authentication, protected routes, and ticket management for products and services.
System Features
01.Register & User Creation
The register form sends a POST request to the API, encrypting the user-provided password using the Bcrypt library to generate a salt and hash. It creates the user in the MongoDB database, storing their name, email, and hashed password. Upon success, it returns a JSON object containing the generated user ID and a signed JWT token.
02.Authentication & Sign In
The Login page submits form data to the authentication controller, which fetches the user by email and compares the hashed passwords. If successful, the request returns the user object and a new JWT token. Otherwise, the API throws an 'invalid credentials' error with a 401 status.
03.Protected Routes Middleware
Secure routes require JWT tokens to obtain the user ID. The authorization middleware looks for the Bearer token in the request header, decodes it using the JWT secret, and attaches the fetched user to the request object. If the token is missing or invalid, the middleware blocks access and throws a 'Not authorized' error.
04.View Tickets Dashboard
Logged-in users can view a list of their respective tickets. Each TicketItem displays the creation date, product type, open/closed status, and a button to view details. The backend controller ensures it only serves tickets belonging to the authenticated user's ID.
05.Create New Ticket
The protected `/new-ticket` route displays a form pre-filled with the current user's name and email, offering options to write an issue description and select the product type. Upon submission, Redux dispatches the `createTicket` action, sending the data and Bearer token to the protected API endpoint.
06.Closing Tickets
Available on the individual ticket page, the 'Close Ticket' button dispatches the `closeTicket` service. This sends a PUT request along with the closed status and Bearer token to update the ticket ID in the database.
07.Ticket Notes System
Users can add notes to 'Open' tickets. Clicking the 'Add a note' button opens a modal with a text input. Once submitted, the note is saved and immediately displayed in the notes section at the bottom of the page, titled with the user's name and the creation date.
Technical Details
Technical Architecture & Objective:
Create a full-stack ticketing system (UI and API) bringing support to services or products.
▹Implement Register, Sign in, Create Tickets, View Tickets, and add Notes.
▹Architect Protected Routes on both the client and server.
▹Implement Authentication with JSON Web Tokens (JWT), configured to expire in 30 days using a secure secret.
▹Handle application state management with Redux Toolkit: utilizing initialState, `createAsyncThunk` for API actions, Slices with extraReducers, and Custom Services.