Iser - Free MUI & Redux Observables React Admin Dashboard

Rxjs Async Declarative & Comprehensive Free MUI React Admin Dashboard built for any domain use!

This is a React app that I built form stratch, in order to use it as a ready template with already connected API and fully utilized features for any application that I'm creating for commercial or private use. It can be used and customised as a admin panel for any business and industry domain, e.g. ecommerce (Shopify dashboard). Also have different variants of this app (e.g. Next.js version) which I can share with you privately. This project uses the following technologies:

• React
• React Redux using reduxjs/toolkit
• Redux observables using rjxs (Async data streams)
• React router dom (Next.js version private)
• Epic Middleware (Declarative middleware)
• Material UI combined with styled-components
• Apexchart
• Notistack
• i18next (Internationalisation)
• Why did you render (Performance monitoring)

Features 📦

• Analytics dashboard
  
  
• Fully functional, dynnamically paginated, searchable users table with user edit options popovers
  
  
• Customisable MUI theme with dark and light mode and customised MUI Components
  
  
• State change notificaiton system (Custom hooks with Notistack)
  
  
• JWT based authentication and authorisation
  
  
• Progressive web page
  
  
• Admin dashboard for users management (Users table and users edit views)
• Cancelable requests using epic middleware based on async data streams
• Role based authorised features and route guards
• Internationalisation (EN-gb and PL languages implemented by defualt)
• User profile (Views for editing and customising users profile)

Iser - Youtube

What I Learned 💡

While building this app, I learned:

• How to implement robust but architecture clean and performance efficient react app using typescript
• How to create React App UI Layout using Material UI (Collapsable Sidebar, Navbar with search-bar, profile menu, notifications menu, language menu)
• How to use Material UI and create custom customisable theme with dark and light mode.
• How to override base MUI Components using its global CSS styles
• How to extend default MUI Theme by new properties
• How to create global notification system on target state change using Notistack, while keeping performance and not rerendering root tree
• How to implement user management UI and API: User details edition, user permission change, user deletion and handling edge cases. And how to update any live user change by an another authorised user on token refresh
• How to internationalise react app using i18next
• How to implement cancelable requests using Epic middleware
• How to implement diverse progressive web page layouts
• How to use react-redux toolkit with epic middleware using redux observables. Got familiar with rxjs, observables and declarative way of handling async code
• How to improve performance by detecting and getting rid of unnecessary app renders using why-did-you-render by Welldone Software
• How to implement JWT based authorisation and authentication. How to automatically refresh token after it's expiration is detected on any API call, and how to fulfill initial request with new token using async data stream with epic middleware
• How to create dynamic charts using Apexcharts
• How to create searchable, paginated, dynamic, customised MUI table

Architecture 🏗️

This app uses the clean architecture pattern, with a strict separation of concerns between the following layers:

• UI Layer (Views) - React Material UI
• Application (Business logic) - React Redux
• Data access layer (Infrastructure): Epic middleware + rxjs/ajax

The project is organized using a feature-based folder structure, with each feature having its own folder containing all necessary components, actions, reducers, epics and selectors. Example tree for account and notifiers features:

├─ features
│  ├─ account
│  │  ├─ components
│  │  │  ├─ AppError.tsx
│  │  │  ├─ AuthError.tsx
│  │  │  ├─ CredentialsFormInput.tsx
│  │  │  ├─ InfoContent.tsx
│  │  │  └─ styledElements.tsx
│  │  ├─ constants.ts
│  │  ├─ settings
│  │  │  ├─ components
│  │  │  │  ├─ AppearanceSettings.tsx
│  │  │  │  └─ PasswordSettings.tsx
│  │  │  └─ SettingsView.tsx
│  │  ├─ SignIn
│  │  │  └─ SignInView.tsx
│  │  ├─ SignUp
│  │  │  └─ SignUpView.tsx
│  │  └─ store
│  │     ├─ accountEpic.ts
│  │     └─ accountSlice.ts
│  └─ notifiers
│     ├─ EnhancedSnackbarProvider.tsx
│     ├─ store
│     │  └─ notifiersSlice.ts
│     ├─ useSnackbarNotifier.ts
│     └─ useStateChangeNotifiers.tsx

Getting Started ⚒️

To get started with this app, follow these steps:

1. Clone the repository to your local machine
2. Navigate to the root directory of the project
3. Run npm install to install dependencies
4. Run npm run start to start the development server
5. Download and setup Iser-Server to unlock all application capabilities

Credits 🙏

• MUI
• React
• Material Design Icons
• ApexCharts
• SimpleScrollbar
• i18next
• why-did-you-render
• redux-observable

License

Licensed under MIT LICENSE