Admin Dashboard for SalesX store

Authenticate as a SalesX manager and gain access to dynamic charts and a product management table for overseeing operations in the store!

Table of Content

1. Pages UI
   1.1 Auth
   1.2 Home
   1.3 Products
   1.4 Product
   1.4.1 Edit
   1.4.2 Create
   1.5 Sales
2. Deploy Link
3. How to locally run the app
4. Features
5. Important comments
6. Used technologies

Pages UI

Auth

Auth Page: choose an account to continue with

Home

Home Page: gain insight on store operations with stat cards and charts

Products

Products Page: navigate through the product table using search functionality, sorting options, and pagination parameters

Product

Product Page: get detailed information about a product, including reviews and shipping options

Edit

Edit Product Page: update existing product

Create

Create Product Page: fill in the inputs to create a new product

Sales

Sales Page: gain insight on sales data with stat cards and charts

Deploy Link

Access application via this link

How to locally run the app

0. Prerequisities:

• If you don't have Node.js on your PC, install it here (use version 20.18.0 or above)

• Verify node version

node -v // Should print "v20.18.0" or above.

• Verify npm version

npm -v // Should print "10.9.0" or above.

1. Clone repository:

git clone https://github.com/PikuzaMarie/admin-dashboard.git

2. Go to the directory:

cd admin-dashboard

3. Install dependencies:

npm install

4. Start the app

it will automatically run in your default browser at http://localhost:3000/

npm run dev

Features

• Authentication: Secure login using JWT with automatic logout upon token expiration
• Product Table Management: Search, sort, customize items per page, and navigate between pages
• Product Operations: Create, read, and update (CRU) products seamlessly
• Configurable Product Fetching: Dynamic async thunk (fetchProducts) for integrating sorting, search, and pagination parameters in API requests
• Redux Middleware: Project includes sessionStorageMiddleware for saving and retrieving new products in/from sessionStorage
• Command Menu: Quick navigation accessible via the Ctrl/Command + K shortcut
• Animated Charts: Interactive visualizations powered by Recharts and Framer Motion

Extra

• Optimized Requests to API: Utilization of async thunk with condition to prevent duplicate server requests. The searchTerm is debounced using the custom useDebounce hook to minimize unnecessary requests
• Performance Optimization: Faster loading speeds achieved using useCallback and memo to reduce unnecessary re-renders
• Non existent routes handling: Dedicated NotFoundPage for non-existent routes
• Search Form with Debounce:

Important Comments

• Predefined User Authentication: Authentication is restricted to predefined user data, which is a server limitation. Therefore, on the login page, users must select a predefined user instead of manually entering credentials

• Page Reload Behavior: Upon reloading the page, the user is redirected to the auth page. In the future, logic will be added to verify the presence of authorization data in localStorage to maintain access for the currently selected user

• Product Field Update Limitations: Not all product fields can be updated due to server settings. As a result, the product editing form contains fewer fields compared to the product details page

• Product Creation Limitations: Due to server-specific constraints, only one product with a new unique ID and limited quantity of fields can be created. In the application, you can create a single new product, which will appear in the product table. However, detailed viewing of this product is not possible. Subsequent product creations will overwrite the previous one

Server API

This project leverages DummyJSON API, an excellent resource for implementing authentication logic and retrieving structured JSON data

Used technologies

• node.js - JavaScript runtime built on the V8 engine for executing server-side code
• react - library for building user interfaces with a focus on component-driven architecture
• typescript - strongly typed programming language that enhances code reliability and reduces bugs

• react-router-dom - routing library for managing navigation and dynamic URLs in React apps

• redux toolkit - streamlined state management library for React applications

• tailwind css - utility-first CSS framework for designing responsive and customizable user interfaces
• feather react-icons - open source react icons, minimalistic and elegant
• cmdk - a command menu React component

• recharts - charting library built with React for creating data visualizations
• framer-motion - React animation library for designing smooth and complex animations

• eslint - linting tool that ensures code quality and consistency for JavaScript
• prettier - automatic code formatting tool to maintain clean and readable code
• imple-import-sort - eslint plugin for easy autofixable import sorting

• vite - fast build tool and development server for modern web applications

• jwt (JSON web token) - method for securely transmitting information, commonly used for authentication