Issue Tracker is a web application developed using ⚛️ Next.js and 📘 TypeScript. It also utilizes Redux UI, Tailwind CSS, Prisma, and MySQL. Authentication features are implemented with NextAuth, and input validation is done using Zod.
The project is deployed and accessible at Issue Tracker App deploy on Vercel.
- ⚛️ Next.js: A React framework for building server-rendered and static web applications.
- 📘 TypeScript: A superset of JavaScript that adds static types to the language.
- 📕 Redux UI: A state container for JavaScript apps.
- 🎨 Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
- 🔄 Prisma: A modern database toolkit for TypeScript and Node.js.
- 🐬 MySQL: An open-source relational database management system.
Authentication in this project is implemented using NextAuth, a complete open-source authentication solution for Next.js applications. It provides various authentication providers, making it easy to integrate with social media accounts, email, and more.
To set up authentication, follow the instructions in the NextAuth documentation and customize the authentication providers based on your project requirements.
-
Clone the repository:
https://github.com/Muzammal-Rafique/Issue-Tracker.git
Zod is used for input validation in this project. Zod is a TypeScript-first schema declaration and validation library. It helps ensure that the data passed into your application is of the correct shape.
To use Zod for validation, define your schemas and use them to validate incoming data. Here's a simple example:
import { z } from "zod";
const userSchema = z.object({
username: z.string(),
email: z.string().email(),
password: z.string().min(8),
});
const userInput = {
username: "john_doe",
email: "john.doe@example.com",
password: "securepassword",
};
try {
const validatedUser = userSchema.parse(userInput);
console.log("User data is valid:", validatedUser);
} catch (error) {
console.error("Validation error:", error.errors);
}