This project is a front-end implementation of the management dashboard (dashboard) for the Mutsra blog system. It connects to mutsura-api and manages content.
Currently, it is in development stage, with frequent additions or changes of functions.
A simple and intuitive management panel built with React, TypeScript, and Vite. Provides management functionality for articles (Post), fixed pages (Page), categories, and tags.
- Authentication: login function, JWT token-based authentication, automatic token refresh.
- Dashboard: displays system-wide statistics and summaries.
- Article Management: creates, edits, lists, and deletes articles using a Markdown editor.
- Page Management: lists, creates, edits, and deletes fixed pages.
- Category Management: manages categories with listing and detailed management.
- Tag Management: manages tags with listing and detailed management.
- Frontend: React 19
- Build Tool: Vite
- Language: TypeScript
- UI Library: Material UI (MUI)
- Styling: Tailwind CSS, Emotion
- Routing: React Router 7
- Markdown Editor: EasyMDE (react-simplemde-editor)
- Utilities: date-fns, notistack
- Node.js (LTS recommended)
- npm
Run the following command in the project root directory:
npm installCreate a .env file (or .env.local) and set the backend API URL.
VITE_API_BASE_URL=http://localhost:3000npm run devOpen http://localhost:5173 in your browser to access the development server.
Generates files for production environment.
npm run buildsrc/
├── api.ts # API client definition
├── App.tsx # routing settings
├── main.tsx # entry point
├── theme.ts # MUI theme settings
├── components/ # UI components
│ ├── auth/ # authentication-related (login, protected routes)
│ ├── posts/ # article management functionality
│ ├── pages/ # page management functionality
│ ├── categories/ # category management functionality
│ └── tags/ # tag management functionality
└── contexts/ # React Context (AuthContext, etc.)