TechFix Repair

TechFix Repair is a web application designed to help repair shops efficiently manage their employees and customers. With robust authentication, authorization, and data management features, this project provides a seamless user experience for both managers and employees.

---

Features

Authentication and Authorization

• Authentication: Powered by Kinde Auth for secure login.
• Authorization:
  • Manager: Can assign and edit tickets, create customers, and view all data.
  • Employee: Can view assigned tickets and customers only.

Ticket and Customer Management

• Managers can:
  • Assign and edit tickets for employees.
  • Create and manage customer information.
• Employees can:
  • View their assigned tickets.
  • Access the list of customers.

Table Display

• Built using TanStack Table:
  • Scalable filtering, sorting, pagination, and searching capabilities.
  • Dynamic and responsive table layouts for tickets and customers.

Form Handling

• Validation: Implemented with Zod and React Hook Form.
• User-friendly and secure form submission process.

Database Interaction

• ORM: Drizzle ORM for database operations.
• Database: NeonDB for hosting PostgreSQL database.

Error Tracking

• Integrated with Sentry for monitoring and error tracking.

Data Polling

• Added data polling for live updates in ticket and customer tables, enhancing user experience by displaying the latest data without manual refreshes.

Theming

• Supports Dark, Light, and System Preferred themes using next-themes.

---

Tech Stack

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS
• Database: PostgreSQL (via NeonDB)
• ORM: Drizzle ORM
• Form Validation: React Hook Form, Zod
• Authentication: Kinde Auth
• Theming: next-themes
• Table Management: TanStack Table
• UI Components: Shadcn UI
• Animations: Framer Motion
• Error Tracking: Sentry
• Secure Actions: next-safe-action

---

Environment Variables

These are the environment variables I have used in my project. Add them to your .env.local file:

SENTRY_AUTH_TOKEN=

KINDE_CLIENT_ID=
KINDE_CLIENT_SECRET=
KINDE_ISSUER_URL=
KINDE_SITE_URL=
KINDE_POST_LOGOUT_REDIRECT_URL=
KINDE_POST_LOGIN_REDIRECT_URL=

KINDE_DOMAIN=
KINDE_MANAGEMENT_CLIENT_ID=
KINDE_MANAGEMENT_CLIENT_SECRET=

DATABASE_URL=

---

Installation and Setup

1. Clone the Repository:

   git clone https://github.com/akhil683/TechFix-Shop.git
   cd techfix-repari

2. Install Dependencies:

   npm install

3. Set Up Environment Variables: Create a .env.local file in the root of the project and add the required variables.

4. Run Database Migrations:

   npx drizzle-kit up

5. Start the Development Server:

   npm run dev

6. Access the Application: Open http://localhost:3000 in your browser.

---

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to enhance the functionality of this project.

---

Acknowledgements

• Next.js
• Tailwind CSS
• Kinde Auth
• Drizzle ORM
• TanStack Table
• Shadcn UI
• Framer Motion