Atlas Console

A modern React admin dashboard template

Features

• 🔐 Login authentication
• 📱 Responsive sidebar (collapsible)
• 📊 Dashboard with statistics
• ⚙️ Settings management
• 🎨 Clean UI design

Tech Stack

• Frontend: React 19 + Vite
• Routing: React Router DOM
• API: Fetch API with mock support

Quick Start

Install Dependencies

npm install

Development

npm run dev

Then open http://localhost:5173 in your browser.

Build for Production

npm run build

The build output will be in the dist folder.

Preview Production Build

npm run preview

Demo Account

• Username: admin
• Password: admin123

API Configuration

The project uses a centralized API service located at src/api/index.js.

Using Mock Data

By default, the project uses mock data. To use real API:

1. Open src/api/index.js
2. Find this line:

   const USE_MOCK = true // 启用 Mock 数据
   // const USE_MOCK = false // 使用真实 API
   

3. Change to:

   // const USE_MOCK = true // 启用 Mock 数据
   const USE_MOCK = false // 使用真实 API
   

API Endpoints

When connecting to a real backend, ensure these endpoints are available:

Method	Endpoint	Description
POST	/api/auth/login	Login
GET	/api/auth/info	Get user info
POST	/api/auth/logout	Logout
GET	/api/projects	Get project list
GET	/api/settings	Get settings
POST	/api/settings	Save settings
GET	/api/stats	Get dashboard stats

Connecting to Real Backend

1. Open src/api/index.js
2. Modify the BASE_URL:

   const BASE_URL = 'http://your-api-server.com/api'
   

3. Enable real API mode:

   const USE_MOCK = false
   

Project Structure

atlas-console/
├── public/              # Static assets
├── src/
│   ├── api/            # API service
│   │   ├── index.js    # Core API with mock support
│   │   └── modules/    # API modules
│   │       ├── auth.js     # Auth APIs
│   │       ├── project.js  # Project APIs
│   │       ├── settings.js # Settings APIs
│   │       └── stats.js    # Stats APIs
│   ├── assets/         # Images, fonts, etc.
│   ├── pages/          # Page components
│   │   ├── Login.jsx   # Login page
│   │   ├── Layout.jsx  # Main layout with sidebar
│   │   ├── Home.jsx    # Dashboard
│   │   ├── Menu1.jsx   # Menu 1 page
│   │   └── Menu2.jsx   # Menu 2 page
│   ├── App.jsx         # Root component
│   ├── main.jsx        # Entry point
│   └── index.css       # Global styles
├── index.html          # HTML template
├── package.json        # Dependencies
└── vite.config.js      # Vite configuration

Deployment

Static Hosting

The project can be deployed to any static hosting service:

Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

Nginx

1. Build the project: npm run build
2. Copy dist folder to Nginx web root
3. Configure Nginx:

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Docker

Create a Dockerfile:

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t atlas-console .
docker run -d -p 80:80 atlas-console

Backend Integration

For production, you'll need a backend service that provides the API endpoints. The frontend expects:

• RESTful API at /api/*
• JWT token authentication
• CORS configured for your domain

License

MIT