Skip to content

๐Ÿƒ This web application features an interactive gaming arena and a live chat module, providing a more engaging user experience.

Notifications You must be signed in to change notification settings

siliataider/Card-Game-Chat-Websocket-Nodejs-React-SpringBoot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

78 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿƒ Card Game

๐Ÿ“ Description

G5 Card Game is a robust web application showcasing a seamless integration of a card game with real-time chat capabilities. This project, an evolution of the Card Management System, now features an interactive gaming arena and a live chat module, providing a more engaging user experience. It demonstrates advanced software architectural concepts such as real-time communication, SOA, and event-driven architecture, leveraging technologies like Socket.IO, React, Redux, and Node.js.

๐Ÿ› ๏ธ Technology Stack

React Node.js Socket.IO JSX Redux SpringBoot ActiveMQ Maven Vite

๐ŸŒŸ Features

  • ๐Ÿ” User Authentication: Enables users to securely log in and sign up.
  • ๐Ÿ’ฌ Real-Time Chat: Enables users to chat live with other players.
  • ๐ŸŽฎ Interactive Gaming Arena: Provides a dynamic card game experience.
  • โš™๏ธ Event-Driven Architecture: Utilizes Socket.IO for real-time communication.
  • ๐Ÿ’ณ Card Transactions: Allows users to buy and sell cards.
  • ๐Ÿ‘ฅ User Interactivity: Provides a dynamic user interface with React for an engaging experience.
  • ๐Ÿ“ก Communication Bus: Utilizes ActiveMQ for efficient message handling.

๐Ÿ’ป Front-End Development

  • ๐Ÿ‘ฅ Collaborators: @siliataider, @Eliott-rjd, @merMorty, @JadGhandour
  • ๐Ÿ“‹ Responsibilities:
    • Development of interactive UI components using React.
    • Implementing real-time chat and game features using Socket.IO.
    • State management using Redux.
    • Integration with backend APIs for authentication, card transactions, and game management.
    • Styling with Semantic-UI + Bootstrap for a responsive and modern design.

๐Ÿ’ป Back-End Development

  • ๐Ÿ‘ฅ Collaborators: @merMorty, @siliataider, @Eliott-rjd, @JadGhandour
  • ๐Ÿ“‹ Responsibilities:
    • Building RESTful services and real-time communication with Node.js and Socket.IO.
    • Implementing game logic and user management.
    • Integration with ActiveMQ for messaging and event handling.

๐Ÿš€ Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

  • Git
  • Java (JDK 8 or later)
  • Node.js and npm
  • ActiveMQ
  • NGINX
  • An IDE of your choice (e.g., IntelliJ IDEA for Spring Boot development)

Installation and Setup

  1. ๐Ÿ“ฅ Clone the Repository: First, clone the project repository to your local machine:
git clone https://github.com/siliataider/ASI-atelier1-react-node-springboot.git
cd ASI-atelier1-react-node-springboot
  1. ๐Ÿ”„ Start the Reverse Proxy: Navigate to the directory containing the launcher.sh script and run it to set up NGINX as a reverse proxy, to launch the node backend, the react front end, and the activemq container:
bash ./launcher.sh
  1. ๐ŸŒฑ Launch the SpringBoot Application: Open the backend project in your IDE and start the SpringBoot application.

  2. ๐ŸŒ Access the Application: The application should now be running and accessible at http://localhost:80/.

ActiveMQ Configuration

Ensure ActiveMQ is running and properly configured to handle messages for the application. Refer to the ActiveMQ documentation for setup instructions.

NGINX Configuration

Make sure NGINX is configured according to the requirements of the project, especially the reverse proxy settings for routing requests to the SpringBoot application and the React front-end.

Usage

Once the application is running, you can access the various features through the web interface, such as user authentication, card buying/selling, starting a game, picking your opponent, selecting the cards you want to play with, chatting and attacking your opponent, etc.

Excalidraw

https://excalidraw.com/#room=b380ed1c38d8a9db8307,FWb4z9wbfXCpVy3G7QjyZA

alt text

About

๐Ÿƒ This web application features an interactive gaming arena and a live chat module, providing a more engaging user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •