React.js Project V18.2.0 + TypeScript V7.2.0

1. Install Project Dependencies:

   npm install

2. Run The Project:

   # npm
   npm run dev
   
   # yarn
   yarn dev
   
   # pnpm
   pnpm dev
   
   # bun
   bun dev

3. Preview The Project:

   http://localhost:5173

Accounts

• Admin

  phone `01012345678`
  password `A2padf##fd##ssword#`
  

• user

  phone `01014725836`
  password `A2padf##fd##ssword#`
  

Dashboard Frontend

This project is a dashboard frontend built using React.js and TypeScript, with features that allow adding, editing, and deleting members. Below is a summary of the libraries and technologies used:

Libraries and Technologies

Core Technologies

• React.js: A JavaScript library for building user interfaces. It allows us to create reusable UI components.
• TypeScript: A typed superset of JavaScript that adds static types, enhancing code quality and developer experience.
• Vite: A fast development build tool that provides an optimized build process with minimal configuration.
• Tailwind CSS: A utility-first CSS framework for rapid UI development with minimal custom CSS.

UI Components

• Radix UI: Provides accessible and customizable low-level UI components such as Accordions, Dialogs, Dropdown Menus, and Select.
• React Icons: A library providing popular icons as React components, making it easy to include icons in the UI.
• Embla Carousel: A lightweight carousel library for creating responsive and mobile-friendly carousels in React.
• Shdcn

State Management and Data Handling

• React Query: A library for fetching, caching, and synchronizing server data in React applications.
• React Hook Form: A library for managing form state with React Hooks, ensuring good performance and ease of validation.

Utility Libraries

• Clsx: A utility for constructing className strings conditionally, simplifying dynamic class assignments in JSX.
• Crypto-JS: A library for encryption and decryption, used to enhance security within the application.
• Date-fns: A modern JavaScript date utility library for working with dates in a more readable and maintainable way.

Form and Validation

• Zod: A schema declaration and validation library for TypeScript that helps ensure the correctness of API data structures.
• @hookform/resolvers: Integration between Zod and React Hook Form for seamless form validation.

Vite Plugins

• vite-plugin-svgr: Allows importing SVG files as React components.
• vite-tsconfig-paths: Enables TypeScript paths mapping in Vite projects, simplifying imports.

Animations and Styling

• Tailwind Merge: A utility that intelligently merges Tailwind classes, helping to avoid conflicts.
• Tailwind CSS Animate: A plugin that provides ready-to-use animations using Tailwind CSS.
• SweetAlert2: A library for creating beautiful, responsive, customizable popup messages in web applications.
• SweetAlert2 React Content: A companion library for integrating SweetAlert2 with React components.

Development Tools

• ESLint: A tool for identifying and fixing problems in JavaScript code, ensuring code quality.
• TypeScript ESLint Plugins: Plugins for integrating TypeScript with ESLint, enhancing linting for TypeScript files.
• Autoprefixer: A PostCSS plugin that adds vendor prefixes to CSS rules, improving cross-browser compatibility.
• PostCSS: A tool for transforming CSS with JavaScript plugins, used alongside Tailwind CSS.

Frontend Developed By:

Ihab Mahmoud Nabil Mohamed

Frontend

dashboard