User Management with Supabase

A simple user management application created using Vite, React with Typescript, and Supabase.

Overview

The application allows you to manage employee information, such as their name, email, and role, using a user-friendly interface. Also you can create a team and assign a employee to the team.

Features

• Add new employee with details such as name, email, phone, address, date of birth, billable hours, etc.
• View a list of all employees and team.
• Edit or delete existing employees and team.
• User-friendly and responsive UI for easy navigation and interaction.

Packages Used

• Vite: The application is built using Vite, a fast and lightweight development server and build tool for modern web development.
• Radix UI: A collection of React UI components for building accessible and customizable interfaces.
• React Hook Form: A flexible and performant form validation library for React.
• Supabase: An open-source alternative to Firebase for building backend systems.
• Tanstack Query: A data-fetching library for React applications that simplifies data management and provides caching and real-time updates.
• Class Variance Authority: A package for handling class variance in TypeScript.
• Clsx: A utility for constructing class names conditionally in JavaScript and TypeScript.
• Date-fns: A library for manipulating and formatting dates in JavaScript and TypeScript.
• Lucide React: A library of colorful and customizable icons for React applications.
• React Hot Toast: A lightweight toast notification library for React applications.
• React Router DOM: A library for routing and navigation in React applications.
• Tailwind CSS: A utility-first CSS framework for building responsive and modern web interfaces.
• Zod: A TypeScript-first schema validation library.

Installation

1. Clone the repository.
2. Navigate to the project directory.
3. Install dependencies using yarn or npm with the following command:

npm install

or

yarn install

Create a .env file and add your Supabase credentials as environment variables.

VITE_SUPABASE_URL=https://[YOUR_PROJECT_ID].supabase.co
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Run the development server with the following command:

npm run dev

Access the application in your browser at http://localhost:5173.

Credits

The application is developed and maintained by Sharad Sharma and contributions from the open-source community.