Server Sentry - Game Performance Dashboard

Server Sentry is a real-time game performance monitoring dashboard designed to provide insights into server health, player activity, and game performance metrics. Built with React, TypeScript, and Tailwind CSS, this project leverages modern web technologies to deliver a responsive and intuitive user experience.

Live Demo

Check out the live demo of Server Sentry here:

👉 https://serversentry.netlify.app/

Features

• Real-Time Metrics: Monitor key performance indicators such as FPS, latency, memory usage, active players, and server load.
• Interactive Charts: Visualize performance trends over time using dynamic line charts powered by Recharts.
• Server Status Badge: Quickly assess server health with a color-coded status badge.
• Responsive Design: Optimized for both desktop and mobile devices.
• Simulated Data: Real-time data updates are simulated for demonstration purposes.

Technologies Used

• Frontend: React, TypeScript, Tailwind CSS
• Charts: Recharts
• Icons: Lucide React
• Build Tool: Vite
• Linting: ESLint
• Styling: PostCSS, Autoprefixer

Project Structure

serversentry/
├── src/
│   ├── components/          # Reusable UI components
│   ├── types/               # TypeScript type definitions
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # Entry point for the React app
│   └── index.css            # Tailwind CSS styles
├── public/                  # Static assets
├── vite.config.ts           # Vite configuration
├── tailwind.config.js       # Tailwind CSS configuration
├── postcss.config.js        # PostCSS configuration
├── tsconfig.json            # TypeScript configuration
├── tsconfig.app.json        # TypeScript app configuration
├── tsconfig.node.json       # TypeScript Node configuration
├── eslint.config.js         # ESLint configuration
└── package.json             # Project dependencies and scripts
    

Getting Started

Follow these steps to set up the project locally:

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/adwityac/serversentry.git

2. Navigate to the project directory:

   cd serversentry

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:5173.

Scripts

• npm run dev: Start the development server.
• npm run build: Build the project for production.
• npm run lint: Run ESLint to check for code issues.
• npm run preview: Preview the production build locally.

Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Commit your changes.
4. Submit a pull request.

Acknowledgements

• Vite for the fast build tool.
• Tailwind CSS for the utility-first CSS framework.
• Recharts for the charting library.
• Lucide React for the icons.

Happy Monitoring! 🚀