likhit430/SignalX

# SIGNALX - MERN Stack 项目 SIGNALX 是一个预配置、完整的 MERN（MongoDB、Express、React、Node.js）stack 项目结构，专为可扩展性而设计。 ## 项目结构 ``` SIGNALX/ ├── client/ # Frontend (React + Vite) │ ├── src/ │ │ ├── assets/ # Images, fonts, and static resources │ │ ├── components/ # Reusable presentation components │ │ ├── context/ # React context providers │ │ ├── hooks/ # Custom React hooks │ │ ├── layouts/ # Page layouts │ │ ├── pages/ # Page views / routed components │ │ ├── services/ # API call services (Axios config, endpoints) │ │ ├── utils/ # Helper functions & constants │ │ ├── App.jsx # Main Application component & routes │ │ ├── index.css # Global stylesheet (Tailwind CSS v4) │ │ └── main.jsx # Application entry point │ ├── package.json │ ├── vercel.json # Vercel SPA routing rules │ └── vite.config.js # Vite config with Tailwind CSS v4 plugin │ └── server/ # Backend (Node.js + Express) ├── config/ # Configurations (DB connection, third-party services) │ └── db.js # MongoDB connection setup ├── controllers/ # Request handlers ├── middlewares/ # Custom Express middlewares (Auth, validation) ├── models/ # Mongoose schemas & models ├── routes/ # Express routes ├── services/ # Business logic services ├── utils/ # Helper utilities and handlers ├── .env # Local environment variables ├── .env.example # Environment variables template ├── package.json └── server.js # Express application entry point ``` ## 技术与依赖 ### 前端 (Client) - **框架**: React 19 (通过 Vite) - **样式**: Tailwind CSS v4 (CSS-first 零配置，通过 `@tailwindcss/vite` 集成) - **路由**: React Router DOM v7 - **HTTP 客户端**: Axios - **动画**: Framer Motion - **图标**: Lucide React ### 后端 (Server) - **运行时**: Node.js & Express - **数据库**: MongoDB (通过 Mongoose ODM) - **实用工具与中间件**: - `dotenv` (环境变量管理) - `cors` (跨域资源共享) - `morgan` (HTTP 请求日志) - `bcrypt` (密码哈希) - `jsonwebtoken` (JWT token 认证工具) - `multer` (文件上传处理) - `nodemon` (开发环境文件监听与热重载) ## 快速开始 ### 前置条件 - 本地已安装 Node.js - 正在运行的 MongoDB 数据库（本地或 MongoDB Atlas URI） ### 设置与安装 1. 克隆代码仓库。 2. 为后端配置环境变量： cd server cp .env.example .env *编辑生成的 `.env` 文件，自定义你的 Mongo 连接字符串和 JWT 密钥。* 3. 安装依赖： * 对于前端： cd client npm install * 对于后端： cd server npm install ### 运行项目 #### 运行前端 (Vite Dev Server) ``` cd client npm run dev ``` #### 运行后端 (Nodemon Live Server) ``` cd server npm run dev ``` ## 生产环境部署说明 ### 1. 数据库设置：MongoDB Atlas 1. 注册/登录 [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)。 2. 创建一个新的 Database Cluster（免费的 Shared tier 即可）。 3. 在 **Database Access** 下，创建一个具有读写权限的数据库用户，并复制安全凭证。 4. 在 **Network Access** 下，添加 IP 条目 `0.0.0.0/0` 以允许来自任何托管服务提供商（例如 Render/Vercel）的连接。 5. 点击你的 cluster 上的 **Connect**，选择 **Drivers**，并复制连接字符串（`MONGO_URI`）。将 `` 替换为你的用户密码。 ### 2. 后端部署：Render 1. 注册/登录 [Render](https://render.com)。 2. 点击 **New** 并选择 **Web Service**。 3. 连接包含该 MERN 项目的 GitHub 仓库。 4. 设置以下构建配置： - **Root Directory**: `server` - **Build Command**: `npm install` - **Start Command**: `npm start` 5. 在 **Environment Variables** 下，添加以下键： - `PORT`: `5000`（或保留默认值以让 Render 自动绑定） - `NODE_ENV`: `production` - `MONGO_URI`: *你的 MongoDB Atlas 连接 URI* - `JWT_SECRET`: *安全的随机字符串* - `CLIENT_URL`: *你的 Vercel 前端 URL（部署后填入）* - `GEMINI_API_KEY`: *你的 Google Gemini API key* 6. 点击 **Deploy Web Service** 并复制你的后端服务 URL。 ### 3. 前端部署：Vercel 1. 注册/登录 [Vercel](https://vercel.com)。 2. 点击 **Add New** 并选择 **Project**。 3. 连接你的 GitHub 仓库。 4. 设置以下构建配置： - **Framework Preset**: `Vite` - **Root Directory**: `client` - **Build Command**: `npm run build` - **Output Directory**: `dist` 5. 在 **Environment Variables** 下，添加： - `VITE_API_URL`: *你的 Render 后端 URL 后接 `/api`*（例如 `https://signalx-backend.onrender.com/api`） 6. 点击 **Deploy**。Vercel 将构建前端资源，并自动应用 `client/vercel.json` 中配置的 SPA 路由规则。

标签：AI辅助分类, GNU通用公共许可证, MERN栈, MITM代理, Node.js, React, Syscalls, 危机响应, 应急管理, 自定义脚本, 资源调度