41 | );
42 | };
43 |
44 | export default Input;
45 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Azadeh Sharifi Soltani
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "user-management",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview",
11 | "prettier:check": "prettier --check .",
12 | "prettier:fix": "prettier --write ."
13 | },
14 | "dependencies": {
15 | "@reduxjs/toolkit": "^2.6.1",
16 | "@tailwindcss/vite": "^4.0.12",
17 | "@trivago/prettier-plugin-sort-imports": "^5.2.2",
18 | "prettier": "^3.5.3",
19 | "react": "^19.0.0",
20 | "react-dom": "^19.0.0",
21 | "react-hook-form": "^7.54.2",
22 | "react-redux": "^9.2.0",
23 | "react-toastify": "^11.0.5",
24 | "uuid": "^11.1.0"
25 | },
26 | "devDependencies": {
27 | "@eslint/js": "^9.21.0",
28 | "@tailwindcss/postcss": "^4.0.13",
29 | "@types/react": "^19.0.10",
30 | "@types/react-dom": "^19.0.4",
31 | "@vitejs/plugin-react": "^4.3.4",
32 | "autoprefixer": "^10.4.21",
33 | "eslint": "^9.21.0",
34 | "eslint-plugin-react-hooks": "^5.1.0",
35 | "eslint-plugin-react-refresh": "^0.4.19",
36 | "globals": "^15.15.0",
37 | "postcss": "^8.5.3",
38 | "tailwindcss": "^4.0.13",
39 | "typescript": "~5.7.2",
40 | "typescript-eslint": "^8.24.1",
41 | "vite": "^6.2.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/UserForm.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Input from "./ui/Input";
3 | import Button from "./ui/Button";
4 | import { useDispatch } from "react-redux";
5 | import { AppDispatch } from "../store/store";
6 | import { useForm } from "react-hook-form";
7 | import { addUser } from "../store/feature/userSlice";
8 | import { toast } from "react-toastify";
9 |
10 | interface FormValues {
11 | name: string;
12 | email: string;
13 | }
14 |
15 | const UserForm: React.FC = () => {
16 | const dispatch = useDispatch();
17 | const {
18 | register,
19 | handleSubmit,
20 | formState: { errors },
21 | reset,
22 | } = useForm();
23 |
24 | const onSubmit = (data: FormValues) => {
25 | dispatch(addUser(data));
26 | toast.success("کاربر با موفقیت اضافه شد");
27 | reset();
28 | };
29 |
30 | return (
31 |
54 | );
55 | };
56 |
57 | export default UserForm;
58 |
--------------------------------------------------------------------------------
/src/store/feature/userSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice, PayloadAction } from "@reduxjs/toolkit";
2 | import { v4 as uuidv4 } from "uuid";
3 |
4 | interface User {
5 | id: string;
6 | name: string;
7 | email: string;
8 | isActive: boolean;
9 | }
10 |
11 | const initialState: User[] = JSON.parse(localStorage.getItem("users") || "[]");
12 |
13 | const userSlice = createSlice({
14 | name: "users",
15 | initialState,
16 | reducers: {
17 | addUser: (
18 | state,
19 | action: PayloadAction<{ name: string; email: string }>,
20 | ) => {
21 | const newUser: User = {
22 | id: uuidv4(),
23 | name: action.payload.name,
24 | email: action.payload.email,
25 | isActive: true,
26 | };
27 | state.push(newUser);
28 | localStorage.setItem("users", JSON.stringify(state));
29 | },
30 | updateUser: (
31 | state,
32 | action: PayloadAction<{ id: string; name: string; email: string }>,
33 | ) => {
34 | const user = state.find((user) => user.id === action.payload.id);
35 | if (user) {
36 | user.name = action.payload.name;
37 | user.email = action.payload.email;
38 | localStorage.setItem("users", JSON.stringify(state));
39 | }
40 | },
41 | deleteUser: (state, action: PayloadAction) => {
42 | const updateUsers = state.filter((user) => user.id !== action.payload);
43 | localStorage.setItem("users", JSON.stringify(updateUsers));
44 | return updateUsers;
45 | },
46 | },
47 | });
48 | export const { addUser, updateUser, deleteUser } = userSlice.actions;
49 | export default userSlice.reducer;
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🏢🔧 User Management Dashboard
2 |
3 | A powerful **User Management System** built with **React, TypeScript, Redux Toolkit, and Supabase**.
4 | This dashboard provides **CRUD operations**, **role-based access control**, and real-time database integration.
5 |
6 | ## 🚀 Features
7 |
8 | - ✅ **User Authentication** (via Supabase)
9 |
10 | - ✅ **CRUD Operations** (Add, Edit, Delete Users)
11 |
12 | - ✅ **Role-based Access Control**
13 |
14 | - ✅ **State Management with Redux Toolkit**
15 |
16 | - ✅ **Optimized Data Fetching with TanStack Query**
17 |
18 | - ✅ **Form Validation with React Hook Form**
19 |
20 | - ✅ **Styled with Tailwind CSS**
21 |
22 | - ✅ **Notifications with React Toastify**
23 |
24 | ---
25 |
26 | ## 🛠️ Technologies Used
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | ---
40 |
41 | ## 📦 Installation & Setup
42 |
43 | git clone https://github.com/frau-azadeh/user-management.git
44 |
45 | cd user-management
46 | npm install
47 |
48 | ## 🌍 Environment Variables
49 |
50 | Create a .env.local file in the root directory and add:
51 |
52 | VITE_SUPABASE_URL=your_supabase_url
53 | VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
54 |
55 | ## 🚀 Running the Project
56 |
57 | npm run dev
58 |
59 | Then open http://localhost:5173 in your browser.
60 |
61 | ## 🔗 API Integration (Supabase)
62 |
63 | This project uses Supabase as the backend.
64 |
65 | Users are stored in Supabase Database, and authentication is handled via Supabase Auth.
66 |
67 | ## 🤝 Contributing
68 |
69 | Contributions are welcome! Feel free to submit a pull request or open an issue.
70 |
71 | Developed with 🌻 by Azadeh Sharifi Soltani Feel free to connect and collaborate!
72 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | - Demonstrating empathy and kindness toward other people
21 | - Being respectful of differing opinions, viewpoints, and experiences
22 | - Giving and gracefully accepting constructive feedback
23 | - Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | - Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | - The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | - Trolling, insulting or derogatory comments, and personal or political attacks
33 | - Public or private harassment
34 | - Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | - Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | designweb.azadeh@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | - Demonstrating empathy and kindness toward other people
21 | - Being respectful of differing opinions, viewpoints, and experiences
22 | - Giving and gracefully accepting constructive feedback
23 | - Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | - Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | - The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | - Trolling, insulting or derogatory comments, and personal or political attacks
33 | - Public or private harassment
34 | - Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | - Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | designweb.azadeh@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
