Giter Site home page Giter Site logo

kendrickcheung007 / slash-admin Goto Github PK

View Code? Open in Web Editor NEW

This project forked from d3george/slash-admin

0.0 0.0 0.0 1.53 MB

A modern react admin. It is based on react 18, vite and TypeScript. It's fast !

Home Page: https://admin.slashspaces.com/

License: MIT License

Shell 0.03% JavaScript 6.66% TypeScript 91.53% CSS 1.54% HTML 0.09% Dockerfile 0.14%

slash-admin's Introduction



Slash Admin

English | δΈ­ζ–‡

Introduction

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.

Preview

login.png login_dark.png analysis.png workbench.png

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

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:

pnpm install

Start the Development Server

Run the following command to start the development server:

pnpm dev

Visit http://localhost:3001 to view your application.

Build for Production

Run the following command to build the production version:

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

  • 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

slash-admin's People

Contributors

d3george avatar xinmans avatar stitchlau avatar fliu2476 avatar chenyuxi2002 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.