A networked multiplayer tetris game built using react and redux

Last update: May 5, 2022

Red-tetris-42Network

The objective of this project is to develop a networked multiplayer tetris game from a stack of software exclusively Full Stack Javascript

There also is a classic solo mode with a leaderboard.

Everything is in real time thanks to socket.io.

The code is entirely unit tested with jest.

Built with

Front-end

  • React.js + Redux Thunk
  • Socket.io

Back-end

  • Node.js
  • Socket.io

Project preview

Home page

Lobby

Solo game

In a 'battle' game (2 players)

Game Over screen

Winner screen

General instructions

The project must be written totally in Javascript and especially in its es2015 (ES6) version.

The client code (browser) must be written without a call to "this" in the purpose of pushing you to use functional constructs and not object. You have the choice of the functional library (lodash, ramda, ...) to use it or not.

The handling logic of the heap and pieces must be implemented as "pure functions". An exception to this rule: "this" can be used to define its own subclasses of "Error". On the opposite, the server code must use object-oriented programming (prototype). We want to find there at least the (ES6) Player, Piece and Game classes.

The client application must be built from the React and Redux libraries.

HTML code must not use TABLE elements, but must be built exclusively from a layout flexbox.

Prohibition to use:

  • A DOM manipulation library like jQuery
  • Canvas
  • SVG (Scalable Vector Graphics)

There is no need to directly manipulate the DOM.

Skills

  • Object-oriented programming
  • Web
  • Functional programming
  • Technology integration

Usage

After Cloned the repo you must install the packages with the command:

npm i

Then you can run the server && client with the command:

npm run dev

The server is running on port 1337. The client is running on port 3000. (http://localhost:3000/)

TEST

To see the test coverage, run:

npm run coverage

GitHub

https://github.com/Ysrbolles/Red-tetris-42Network
You might also like...

Simple Portfolio Using React Hooks & Styled Components

Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

Mar 20, 2022

A terminal style/styled portfolio website made with 3 using react.

A Terminal Styled Portfolio Website. 🐱‍💻, a terminal style/styled portfolio website made with 3 using react.

May 14, 2022

I had cloned my Instagram profile UI using ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 8, 2021

Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind 🌪️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022

CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version = IE6* Demo The best s

May 12, 2022

React visual primitives with first-class TypeScript support and a tiny footprint.

tsstyled React visual primitives with first-class TypeScript support and a tiny footprint. TL;DR: This library is a styled-components rewrite that is

Apr 7, 2022

Dynamic Styles for React Native and Expo Web

Dynamic Styles for React Native and Expo Web

react-native-swag-styles Dynamic Styles for React Native and Expo Web Highlights Dynamic. Based on React Hook. It automatically re-renders when necess

May 17, 2022

CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid 🧹 What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021

This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021
A styled switch for React built using Emotion CSS and Framer motion
A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
The 15-puzzle is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing, built in react
The 15-puzzle is a sliding puzzle that consists of a frame of numbered square tiles in random order with one tile missing, built in react

15 Puzzle My first Game using React.js This is a classic 15-puzzle. To play you first scramble the tiles and then try to put them back in order. To mo

May 16, 2022
A CSS & React built Split Flap or Solari display

React Split Flap Display A React component that mimics a Split-Flap/Solari display, cos I like Solari boards & wanted to practice creating NPM modules

May 7, 2022
A tool for creating ratio-based style systems built in React.
A tool for creating ratio-based style systems built in React.

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

Dec 29, 2021
Avneesh's Portfolio Template Built With React
Avneesh's Portfolio Template Built With React

Welcome to a Portfolio Template ?? This is Avneesh's portfolio, feel free to use it and contribute to it ?? Homepage ✨ Demo Using the template To use

May 14, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021