base on A Modern React Admin Template. It is based on React 18, Vite and TypeScript. It's fast ! <div align="center"> <br> <br> <img src="./src/assets/images/logo.png" height="140" /> <h3> Slash Admin </h3> <p> <p style="font-size: 14px"> Slash Admin is a modern admin dashboard template built with React 18, Vite, Ant Design, and TypeScript. It is designed to help developers quickly create powerful admin management systems. </p> <br /> <br /> <a href="https://admin.slashspaces.com/">Preview</a> · <a href="https://discord.gg/fXemAXVNDa">Discord</a> · <a href="https://docs-admin.slashspaces.com/">Document</a> <br /> <br /> <a href="https://trendshift.io/repositories/6387" target="_blank"><img src="https://trendshift.io/api/badge/repositories/6387" alt="d3george%2Fslash-admin | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a> </div> **English** | [中文](./README.zh-CN.md) ## Sponsor <div style="display: flex; gap: 50px"> <img style="width:300px" src="https://d3george.github.io/github-static/pay/weixin.jpg" > <img style="width:280px" src="https://d3george.github.io/github-static/pay/buymeacoffee.png" /> </div> ## Preview + https://admin.slashspaces.com/ || | ----------------------------------------------------------------- | ------------------------------------------------------------------- | || ## Features - Built using React 18 hooks. - Powered by Vite for rapid development and hot module replacement. - Integrates Ant Design, providing a rich set of UI components and design patterns. - Written in TypeScript, offering type safety and an improved development experience. - Responsive design, adapting to various screen sizes and devices. - Flexible routing configuration, supporting nested routes. - Integrated access control based on user roles. - Supports internationalization for easy language switching. - Includes common admin features like user management, role management, and permission management. - Customizable themes and styles to meet your branding needs. - Mocking solution based on MSW and Faker.js. - State management using Zustand. - Data fetching using React-Query. ## Quick Start ### Get the Project Code ```bash git clone https://github.com/d3george/slash-admin.git ``` ### Install Dependencies In the project's root directory, run the following command to install project dependencies: ```bash pnpm install ``` ### Start the Development Server Run the following command to start the development server: ```bash pnpm dev ``` Visit [http://localhost:3001](http://localhost:3001) to view your application. ### Build for Production Run the following command to build the production version: ```bash pnpm build ``` ## Docker deployment ### Build image and Run container #### build image Enter the project root directory in the terminal and execute the following command to build the Docker image: ``` docker build -t your-image-name . ``` Make sure to replace `your-image-name` with your own image name #### run container Run your application in the Docker container using the following command: ``` docker run -p 3001:80 your-image-name ``` This will run your application on port `80`(exposed in `Dockerfile`) of the container and map it to port `3001` on your host. Now you can access http://localhost:3001 to view the deployed applications. ### use docker-compose.yaml Enter the project root directory in the terminal and execute the following command to start Docker Compose: ``` docker-compose up -d ``` Docker Compose will build an image based on the configuration defined by 'docker-compose. yaml' and run the container in the background. After the container runs successfully, it can also be accessed through http://localhost:3001 To view the deployed applications. ## Git Contribution submission specification reference[.commitlint.config.js](./commitlint.config.js) - `feat` new features - `fix` fix the - `docs` documentation or comments - `style` code format (changes that do not affect code execution) - `refactor` refactor - `perf` performance optimization - `revert` revert commit - `test` test related - `chore` changes in the construction process or auxiliary tools - `ci` modify CI configuration and scripts - `types` type definition file changes - `wip` in development ", Assign "at most 3 tags" to the expected json: {"id":"6387","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"