https://github.com/syket-git/react-user-dashboard
React User Dashboard – Built with React.js, Chakra UI and TypeScript for a seamless and robust experience.
https://github.com/syket-git/react-user-dashboard
chakraui debounce react typescript
Last synced: about 2 months ago
JSON representation
React User Dashboard – Built with React.js, Chakra UI and TypeScript for a seamless and robust experience.
- Host: GitHub
- URL: https://github.com/syket-git/react-user-dashboard
- Owner: syket-git
- Created: 2025-01-22T11:43:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-28T08:15:21.000Z (over 1 year ago)
- Last Synced: 2025-01-30T17:57:15.799Z (over 1 year ago)
- Topics: chakraui, debounce, react, typescript
- Language: TypeScript
- Homepage: https://react-user-dashboard-psi.vercel.app
- Size: 256 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### React User Dashboard 🚀
**React User Dashboard** built using **React.js**, **Chakra UI**, and **TypeScript**.
🌟 **Live Demo**: [React User Dashboard](https://react-user-dashboard-psi.vercel.app/)
---
## Features ✨
- **Light & Dark Mode**: Seamlessly switch between themes for a personalized experience.
- **Debounce Functionality**: Added debounce functionality to the search component to reduce API calls to the backend.
- **Pagination**: Smooth and intuitive pagination for displaying large datasets efficiently.
- **Robust Type Safety**: Built with **TypeScript**, ensuring reliable, maintainable, and scalable code.
- **Single Responsibility Pattern**: Focused components, each designed with a single purpose for better reusability.
- **Separation of Concerns**: Maintain clean and modular code by separating business logic from the presentation layer.
- **Custom Hooks**: Encapsulate business logic into reusable hooks to simplify and enhance maintainability.
- **Chakra UI for Design**: Responsive and accessible UI powered by Chakra UI for a professional look and feel.
---
## Tech Stack 🛠
- **Frontend**: [React.js](https://react.dev/)
- **UI Library**: [Chakra UI](https://chakra-ui.com/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
---
## Project Structure 📂
```plaintext
├── src/ # Source code
│ ├── components/ # Reusable UI components
│ ├── hooks/ # Custom hooks for business logic
│ ├── interfaces/ # TypeScript interfaces
│ ├── pages/ # Page components
│ ├── services/ # Service and API logic
│ ├── App.tsx # Root App component
```
---
## Installation & Setup 💻
1. Clone the repository:
```bash
git clone https://github.com/syket-git/react-user-dashboard.git
```
2. Navigate to the project directory:
```bash
cd react-user-dashboard
```
3. Install dependencies:
```bash
npm install
```
4. Run the development server:
```bash
npm start
```
5. Open your browser and navigate to `http://localhost:3000`.
---
## Deployment 🚀
This project is deployed on **Vercel**. Explore the live version here:
👉 [https://react-user-dashboard-psi.vercel.app/](https://react-user-dashboard-psi.vercel.app/)
---
### Author 💡
Created by **[Syket Bhattachergee](https://github.com/syket-git)**
**Light Theme**
**Dark Theme**
