MERN Antd Admin Starter

Starter Mern Antd Admin App is a free, open-source boilerplate for building admin dashboards and back-office applications on the MERN stack — Node.js, Express.js, MongoDB, and React.js — styled with Ant Design and state-managed by Redux.

What is Starter Mern Antd Admin App?

Starter Mern Antd Admin App is a full-stack starter template that pairs a Node.js/Express.js REST API with a React.js single-page application, using MongoDB as the database and Ant Design for UI components. It accepts a MongoDB connection string through a configuration file and produces a working admin panel with generic create, read, update, and delete (CRUD) endpoints and pages, plus JSON Web Token (JWT) authentication and user management. The template is maintained by the IDURAR project, which also publishes a related open-source ERP/CRM system. The repository includes live demos for both the open-source version and the cloud enterprise version of IDURAR.

Key Features

• Generic CRUD API — Express.js and MongoDB expose reusable create, read, update, and delete routes so you can add new modules without writing per-entity controllers.
• JWT Authentication — Login and logout endpoints issue JSON Web Tokens, and the frontend stores the token to authorize protected requests.
• Admin User Management — The backend provides an admin (user) management API, and the React frontend includes a matching management module for creating and editing users.
• Ant Design UI — The entire interface is built with Ant Design (AntD) components, giving you a ready-to-use set of tables, forms, buttons, and layouts out of the box.
• Redux State Management — Redux and Redux-thunk handle application state and asynchronous API calls, keeping the auth and CRUD flows consistent.
• Private and Public Routing — The React Router configuration separates protected routes (behind login) from public pages such as the login screen.
• Not Found Page — A dedicated 404 page is included for unmatched routes.
• Simple Setup Script — Running npm setup after installing dependencies seeds initial data and prepares the database connection.

Who is it for?

• Full-stack developers who want a working MERN boilerplate with auth and CRUD so they can focus on business features instead of plumbing.
• Startup teams prototyping an internal dashboard, admin panel, or customer relationship management (CRM) tool and needing a production-like frontend and API quickly.
• ERP/CRM consultants who need a customizable foundation to extend into a vertical solution using the same stack as the IDURAR project.
• Students and self-taught developers learning the MERN stack, Redux, and Ant Design by reading a real, runnable codebase.

Use cases

• Building an MVP admin panel: use the included auth and CRUD to get a functional prototype running in hours.
• Learning MERN architecture: trace a request from a React Redux action through the Express route to MongoDB and back.
• Extending to a full ERP/CRM: layer your own schemas and business logic on top of the starter, following the patterns used by IDURAR.

How does it work?

1. Configure MongoDB Atlas and add your connection string to the .variables.env file.
2. Run npm install and npm setup on the backend to seed the database.
3. Install frontend dependencies with cd frontend && npm install.
4. Update the API config to point at localhost and start both the server (npm start) and the React app (cd frontend && npm start).

Pricing

The starter template is free and open source, available on GitHub. The IDURAR project also offers a cloud enterprise version of the full ERP/CRM at idurarapp.com; no pricing details are listed in this repository.

FAQ

Is Starter Mern Antd Admin App free?

Yes. This repository is published as open source under the IDURAR project. It is the starter version, and you can use it without a license fee. The cloud enterprise version of IDURAR is a separate paid offering, but the starter template itself is free.

Does it include authentication?

Yes, the template ships with authentication using JSON Web Tokens (JWT). The backend exposes login and logout endpoints, and the React frontend includes a login component plus private and public route guards that protect pages from unauthenticated access.

What does the MERN stack include?

MERN stands for MongoDB, Express.js, React.js, and Node.js. In this starter, those four technologies are combined with Ant Design for UI and Redux with Redux-thunk for state management, giving you a complete JavaScript-only stack from database to browser.

How do I set up MongoDB?

The setup instructions in the README ask you to create a MongoDB Atlas account and copy your database URL. You then rename the .variables.env.tmp file to .variables.env and paste the URL as the DATABASE value. After that, run npm install and npm setup.