A modern full-stack Admin Panel built with React, Vite, Mantine UI, Node.js, Express.js, and MongoDB. The application provides a responsive administrative interface with secure authentication, user management, content management, file uploads, REST APIs, database integration, validation, notifications, and testing support.
Mantine UI Admin Panel is a full-stack web application designed to provide a centralized and secure platform for managing application data, users, content, and administrative operations.
The project is divided into two main parts:
- Frontend – React + Vite + Mantine UI
- Backend – Node.js + Express.js + MongoDB
The frontend communicates with the backend through REST APIs.
The project follows a client-server architecture where the React frontend communicates with the Node.js/Express backend through REST APIs.
Frontend
React + Vite + Mantine UI
|
| REST API
↓
Backend
Node.js + Express.js
|
↓
MongoDB
The frontend is developed using:
- React 19
- Vite
- JavaScript/JSX
- React Router
- Axios
- React Hooks
Vite provides a fast development environment and optimized production builds.
The Admin Panel uses Mantine UI for building a modern and responsive interface.
Main UI technologies include:
- Mantine Core
- Mantine Dates
- Mantine Dropzone
- Mantine Hooks
- Mantine Notifications
- Tabler Icons
- React Icons
- Sass
The dashboard provides an overview of important administrative information.
Possible dashboard components include:
- Statistics cards
- Data tables
- Charts
- Recent activities
- Summary information
- Quick actions
- Responsive layouts
Charts and data visualization are supported using Recharts.
The backend supports secure authentication using:
- JWT
- Cookies
- bcrypt
- Express middleware
Authentication can be used to protect administrative routes and restrict unauthorized access.
The Admin Panel can be used to manage application users and administrative access.
Possible operations include:
- Create users
- Update users
- Delete users
- View user details
- Manage user roles
- Activate/deactivate users
- Control access to protected resources
The application can be extended as a CMS for managing different types of application content.
Typical CMS operations include:
- Create content
- Edit content
- Delete content
- View content
- Publish/unpublish content
- Search and filter records
- Manage content metadata
Frontend forms are handled using:
- React Hook Form
- Zod
@hookform/resolvers
These libraries provide structured form management and validation.
The system can validate:
- Required fields
- Email addresses
- Passwords
- Numeric values
- Text length
- Custom business rules
The frontend uses React Router for application navigation.
The routing system can support:
- Public routes
- Protected routes
- Admin routes
- Nested routes
- Dynamic routes
- Sidebar navigation
This allows different sections of the Admin Panel to be organized efficiently.
The backend is built using Node.js and Express.js.
REST APIs can be organized around:
- Routes
- Controllers
- Middleware
- Services
- Models
- Authentication
- Error handling
Example API structure:
/api/auth
/api/users
/api/admin
/api/content
/api/uploads
The application uses MongoDB as the database with Mongoose for schema and data management.
Mongoose provides:
- Schema definitions
- Data validation
- Models
- CRUD operations
- Query handling
- Relationships/references
File uploads are supported using:
- Multer
- Cloudinary
Multer handles incoming multipart/form-data requests, while Cloudinary can be used for cloud-based image/file storage and management.
Typical upload workflow:
Admin
↓
Frontend Upload
↓
Backend API
↓
Multer
↓
Cloudinary
↓
Stored File URL
↓
MongoDB
JSON Web Tokens are used for authentication.
The authentication flow can be implemented as:
Login
↓
Validate Credentials
↓
Generate JWT
↓
Store Token in Cookie
↓
Authenticated Request
↓
Authentication Middleware
↓
Protected Resource
Passwords are securely hashed using bcrypt.
The frontend uses Axios for API communication and notification libraries for displaying user feedback.
The application can provide notifications for:
- Successful operations
- Validation errors
- Authentication errors
- API failures
- Create/update/delete operations
The backend can also provide centralized error-handling middleware.
The project includes testing support for both frontend and backend.
Frontend testing uses:
- Vitest
- Testing Library
- JSDOM
Run:
npm run testBackend testing uses:
- Jest
- Supertest
- MongoDB Memory Server
Run:
npm testCreate a production build:
npm run buildPreview the production build:
npm run preview| Technology | Purpose |
|---|---|
| React | UI development |
| Vite | Development & build tool |
| Mantine UI | UI components |
| React Router | Application routing |
| Axios | API communication |
| React Hook Form | Form management |
| Zod | Validation |
| Recharts | Charts & visualization |
| Sass | Styling |
| Tabler Icons | Icons |
| Technology | Purpose |
|---|---|
| Node.js | Runtime |
| Express.js | REST API |
| MongoDB | Database |
| Mongoose | MongoDB ODM |
| JWT | Authentication |
| bcrypt | Password hashing |
| Multer | File uploads |
| Cloudinary | Cloud file storage |
| Nodemailer | Email functionality |
| CORS | Cross-origin requests |
| Cookie Parser | Cookie handling |
| dotenv | Environment configuration |
A recommended structure for the project is:
MantineUI-AdminPanel/
│
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── layouts/
│ │ ├── routes/
│ │ ├── hooks/
│ │ ├── services/
│ │ ├── utils/
│ │ └── App.jsx
│ │
│ ├── public/
│ ├── package.json
│ └── vite.config.js
│
├── backend/
│ ├── src/
│ │ ├── controllers/
│ │ ├── models/
│ │ ├── routes/
│ │ ├── middleware/
│ │ ├── services/
│ │ ├── utils/
│ │ └── index.js
│ │
│ ├── package.json
│ └── .env
│
└── README.md
The exact folder structure may vary depending on the implementation.
Make sure the following are installed:
- Node.js
- npm
- MongoDB
- Git
git clone <repository-url>Move into the project directory:
cd MantineUI-AdminPanelNavigate to the frontend directory:
cd frontendInstall dependencies:
npm installStart the development server:
npm run devThe frontend will normally be available at:
http://localhost:5173
Open another terminal and navigate to the backend directory:
cd backendInstall dependencies:
npm installStart the backend in development mode:
npm run devFor normal production-style startup:
npm startCreate a .env file inside the backend directory.
Example:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/mantine_admin
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
SMTP_HOST=your_smtp_host
SMTP_PORT=587
SMTP_USER=your_email
SMTP_PASS=your_email_passwordNever commit real credentials, API keys, passwords, or JWT secrets to Git.
During development, the application can run as:
Frontend
http://localhost:5173
↓
Backend API
http://localhost:5000
↓
MongoDB
Axios can be configured to communicate with the backend API.
Example:
axios.get("/api/users");npm run testnpm testBackend tests can use an in-memory MongoDB instance through MongoDB Memory Server, allowing API tests without depending on the main development database.
Build the frontend:
npm run buildPreview the generated production build:
npm run previewStart the backend:
npm startThe application uses several security-related technologies:
- Password hashing with bcrypt
- JWT-based authentication
- HTTP cookies
- Protected API routes
- Environment variables
- CORS configuration
- Input validation
- Authentication middleware
Production deployments should additionally use HTTPS and appropriately configured secure cookies, secrets, CORS policies, and environment variables.
Possible future improvements include:
- Advanced role-based access control
- Permission management
- Audit logs
- Advanced search and filtering
- Pagination
- Export to Excel/PDF
- Dark/light theme customization
- Email notifications
- Activity monitoring
- Dashboard analytics
- API documentation
- Docker support
- CI/CD integration
The project is designed with a modular architecture so that new modules, APIs, pages, and administrative features can be added without significantly changing the existing structure.
Frontend and backend responsibilities remain separated, making the application easier to maintain, test, and scale.
This project is licensed under the ISC License.