MaxAdmin - React CMS Dashboard

Nowoczesny panel administracyjny (CMS) zbudowany w React z wykorzystaniem Material-UI. Projekt oferuje kompleksowe rozwiązanie do zarządzania treścią z intuicyjnym interfejsem użytkownika.

📋 Spis treści

• O projekcie
• Technologie
• Wymagania
• Instalacja
• Uruchomienie
• Skrypty
• Struktura projektu
• Funkcjonalności
• Licencja
• Autor

🚀 O projekcie

MaxAdmin to zaawansowany system zarządzania treścią (CMS) stworzony z myślą o nowoczesnych aplikacjach webowych. Projekt oferuje responsywny interfejs, zaawansowane komponenty UI oraz elastyczną architekturę, która ułatwia rozbudowę i personalizację.

🛠 Technologie

Framework i biblioteki główne

• React 19.2.3 - Biblioteka JavaScript do budowy interfejsów użytkownika
• React DOM 19.2.3 - Renderowanie React w przeglądarce
• React Router 7.11.0 - Routing i nawigacja w aplikacji React
• Vite 7.3.0 - Nowoczesny build tool i dev server

UI Framework i komponenty

• Material-UI (MUI) 7.3.6 - Kompleksowy framework UI oparty na Material Design
  • @mui/material - Główne komponenty Material-UI
  • @mui/system - System stylowania
  • @mui/lab - Komponenty eksperymentalne
  • @mui/base - Niskopoziomowe komponenty
  • @mui/x-charts 8.22.1 - Komponenty wykresów i wizualizacji danych

Stylowanie

• Emotion 11.14.0+ - CSS-in-JS library używana przez Material-UI
  • @emotion/react - React bindings dla Emotion
  • @emotion/styled - Styled components
  • @emotion/cache - Cache dla Emotion

Ikony

• Ant Design Icons 6.1.0 - Zestaw ikon
• @ant-design/colors 7.2.1 - Paleta kolorów

Formularze i walidacja

• Formik 2.4.9 - Biblioteka do zarządzania formularzami
• Yup 1.7.1 - Schema validation dla JavaScript

Animacje

• Framer Motion 12.23.26 - Biblioteka animacji dla React

Data Fetching

• SWR 2.3.8 - React Hooks library do data fetching (stale-while-revalidate)

Narzędzia pomocnicze

• Lodash ES 4.17.22 - Biblioteka funkcji pomocniczych
• React Number Format 5.4.4 - Formatowanie liczb w React
• React Device Detect 2.2.3 - Wykrywanie urządzeń
• SimpleBar React 3.3.2 - Custom scrollbar component
• Web Vitals 5.1.0 - Metryki wydajności webowej

Fonty

• @fontsource/public-sans 5.2.7 - Font Public Sans

Narzędzia deweloperskie

• ESLint 9.39.2 - Linter JavaScript/React
  • eslint-plugin-react 7.37.5 - Reguły ESLint dla React
  • eslint-plugin-react-hooks 7.0.1 - Reguły dla React Hooks
  • eslint-plugin-jsx-a11y 6.10.2 - Accessibility linting
  • eslint-plugin-prettier 5.5.4 - Integracja Prettier z ESLint
  • eslint-config-prettier 10.1.8 - Wyłącza konfliktujące reguły ESLint
• Prettier 3.7.4 - Code formatter
• Vite JSConfig Paths 2.0.1 - Wsparcie dla path aliases w Vite

📦 Wymagania

• Node.js >= 18.x
• Yarn >= 1.x (lub npm)

🔧 Instalacja

1. Sklonuj repozytorium:

git clone <repository-url>
cd react-cms

2. Zainstaluj zależności:

yarn install

lub z npm:

npm install

▶️ Uruchomienie

Tryb deweloperski

yarn start

lub

npm run start

Aplikacja będzie dostępna pod adresem: http://localhost:3000

Build produkcyjny

yarn build

lub

npm run build

Podgląd builda produkcyjnego

yarn preview

lub

npm run preview

📜 Skrypty

• yarn start - Uruchamia serwer deweloperski
• yarn build - Buduje aplikację do produkcji
• yarn preview - Podgląd zbudowanej aplikacji
• yarn lint - Sprawdza kod pod kątem błędów ESLint
• yarn lint:fix - Automatycznie naprawia błędy ESLint
• yarn prettier - Formatuje kod za pomocą Prettier

📁 Struktura projektu

react-cms/
├── src/
│   ├── api/              # API endpoints i funkcje
│   ├── assets/           # Statyczne zasoby (obrazy, style)
│   ├── components/       # Komponenty React
│   │   ├── @extended/   # Rozszerzone komponenty
│   │   ├── cards/       # Komponenty kart
│   │   └── logo/        # Komponenty logo
│   ├── contexts/         # React Contexts
│   ├── hooks/            # Custom React Hooks
│   ├── layout/           # Komponenty layoutu
│   │   ├── Auth/        # Layout dla autoryzacji
│   │   └── Dashboard/   # Layout dla dashboardu
│   ├── menu-items/      # Konfiguracja menu
│   ├── pages/            # Strony aplikacji
│   ├── routes/           # Konfiguracja routingu
│   ├── sections/         # Sekcje stron
│   ├── themes/           # Konfiguracja motywów Material-UI
│   └── utils/            # Funkcje pomocnicze
├── .github/              # GitHub Actions workflows
├── public/               # Pliki publiczne
└── package.json          # Zależności projektu

✨ Funkcjonalności

• ✅ Responsywny design
• ✅ Dark/Light mode (przygotowane w motywie)
• ✅ System autoryzacji (Login/Register)
• ✅ Dashboard z wykresami i statystykami
• ✅ Zaawansowane komponenty UI
• ✅ Routing z React Router
• ✅ Formularze z walidacją (Formik + Yup)
• ✅ Animacje (Framer Motion)
• ✅ Wykresy i wizualizacje danych (MUI X Charts)
• ✅ Custom scrollbar
• ✅ Wykrywanie urządzeń
• ✅ Code splitting i optymalizacja builda

📄 Licencja

MIT License

Copyright (c) 2025 Maxsoft

👤 Autor

Maxsoft

• Email: biuro@maxsoft.pl
• Website: https://www.maxsoft.pl/

---

Made with ❤️ by Maxsoft