https://github.com/pintu544/frontendauthsocket
Real-time dashboard application where admins can manage players and monitor their activity, while players can engage by clicking a “Banana” button and track their ranking in real-time.
https://github.com/pintu544/frontendauthsocket
localstorage react react-router-dom react-toastify socket-io
Last synced: 3 months ago
JSON representation
Real-time dashboard application where admins can manage players and monitor their activity, while players can engage by clicking a “Banana” button and track their ranking in real-time.
- Host: GitHub
- URL: https://github.com/pintu544/frontendauthsocket
- Owner: pintu544
- Created: 2024-11-07T17:23:29.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-08T02:10:41.000Z (7 months ago)
- Last Synced: 2025-01-21T14:47:32.727Z (4 months ago)
- Topics: localstorage, react, react-router-dom, react-toastify, socket-io
- Language: JavaScript
- Homepage: https://registrationloginsocket.netlify.app/
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Fruits Click Game Dashboard - Frontend
This is the frontend portion of the Fruits Click Game Dashboard, a real-time dashboard application where players can engage in a “Banana Click” game and track their ranking in real-time. Admins can manage players and monitor player activity.
Features
-
User Authentication: Login and registration with JWT-based authentication.
-
Admin Dashboard:
- User management (create, edit, delete players).
- Blocking and unblocking users.
- Viewing active users with real-time updates on banana click counts.
-
Player Dashboard:
- Banana click button to increase count.
- Real-time click count updates.
- Rank page with real-time ranking of players based on click counts.
-
Real-Time Updates: Integrated Socket.io to ensure click counts and rankings update live.
Tech Stack
-
React - Frontend framework
-
Socket.io - Real-time communication
-
JWT - Authentication and authorization
-
CSS - Styling
Setup and Installation
Clone the Repository
bash
`git clone https://github.com/pintu544/FrontendAuthSocket.git
cd FrontendAuthSocket`
Install Dependencies
bash
`npm install`
Environment Variables
Create a .env file in the project root and configure the following environment variables:
`REACT_APP_BACKEND_URL=http://your-backend-url
REACT_APP_SOCKET_URL=http://your-socket-url`
Running the Application
To start the development server, run:
bash
`npm run dev`
The frontend should be running at http://localhost:5173.
Live Demo
The live frontend demo is available here.
Project Structure
FrontendAuthSocket/ ├── public/ # Public assets ├── src/ │ ├── assets/ │ ├── pages/ # Page components (register,login,Admin Dashboard, Player Dashboard) │ ├── services/ # API services and utilities │ ├── context/ # Socket.io client configuration ├── styles/ # css files │ └── App.js # Main app component └── package.json