Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khushi89012/dashboard
This real-time dashboard utilizes large CSV files and smooth data streaming through WebSockets, ensuring efficient, live data updates for an enhanced user experience.
https://github.com/khushi89012/dashboard
expressjs mongodb nodejs reactjs redis websocket
Last synced: 17 days ago
JSON representation
This real-time dashboard utilizes large CSV files and smooth data streaming through WebSockets, ensuring efficient, live data updates for an enhanced user experience.
- Host: GitHub
- URL: https://github.com/khushi89012/dashboard
- Owner: khushi89012
- Created: 2024-10-31T17:57:05.000Z (18 days ago)
- Default Branch: master
- Last Pushed: 2024-10-31T18:06:54.000Z (18 days ago)
- Last Synced: 2024-10-31T19:17:55.559Z (18 days ago)
- Topics: expressjs, mongodb, nodejs, reactjs, redis, websocket
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Project Structure
```plaintext
project-root/
│
├── backend/ # Backend application (Node.js, Express.js)
│ ├── src/ # Source files
│ ├── .env # Backend environment variables
│ └── ...
│
└── frontend/ # Frontend application (React.js)
├── src/ # Source files (components located in `src/components`)
├── .env # Frontend environment variables
└── ...
```
## Getting Started
### Prerequisites
Ensure you have the following installed:
- **Node.js** (v14 or higher)
- **npm** (v6 or higher) or **yarn**
---
## Backend Setup
1. **Navigate to the Backend Directory**:
```bash
cd backend
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Environment Variables**:
- Create a `.env` file in the `backend` directory and add the necessary environment variables.
```plaintext
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
```
4. **Run the Backend**:
- Start the backend server:
```bash
npm start
```
- The backend will be accessible at `http://localhost:5000`.
---
## Frontend Setup
1. **Navigate to the Frontend Directory**:
```bash
cd frontend
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Environment Variables**:
- Create a `.env` file in the `frontend` directory with the backend URL and other required variables.
```plaintext
REACT_APP_BACKEND_URL=http://localhost:5000
```
4. **Run the Frontend**:
- Start the frontend development server:
```bash
npm start
```
- The frontend will be available at `http://localhost:3000`.
---
## Running the Application
To run both the backend and frontend:
1. Open two terminal windows or use a process manager like `concurrently` or Docker.
2. Start the backend in one terminal:
```bash
cd backend
npm start
```
3. Start the frontend in another terminal:
```bash
cd frontend
npm start
```
Visit `http://localhost:3000` to access the application.
---
## Additional Information
- **Role-Based Views**: The dashboard includes role-specific pages and features, such as full data access and user management for admin roles.
- **Real-Time Updates**: The dashboard supports live data streaming and metric recalculations.
- **Environment Variables**: Customize `.env` files in both `backend` and `frontend` directories as needed.
- **Deployment**: Refer to deployment instructions (if available) to set up the application in a production environment.