Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/devrsi0n/react-2048-game

:video_game: A fancy 2048 game build with react, redux best practices.
https://github.com/devrsi0n/react-2048-game

2048 eslint game herokuapp prettier pwa react redux scss stylelint

Last synced: about 1 month ago
JSON representation

:video_game: A fancy 2048 game build with react, redux best practices.

Host: GitHub
URL: https://github.com/devrsi0n/react-2048-game
Owner: devrsi0n
License: mit
Created: 2017-09-19T04:03:54.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2024-10-01T14:23:10.000Z (about 1 month ago)
Last Synced: 2024-10-13T06:41:16.073Z (about 1 month ago)
Topics: 2048, eslint, game, herokuapp, prettier, pwa, react, redux, scss, stylelint
Language: JavaScript
Homepage: https://devrsi0n.github.io/React-2048-game/
Size: 9.13 MB
Stars: 466
Watchers: 18
Forks: 87
Open Issues: 73
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # React-2048-game | [中文](/README_CN.md)

[![travis-ci](https://travis-ci.org/devrsi0n/React-2048-game.svg?branch=master)](https://travis-ci.org/devrsi0n/React-2048-game)

[![codecov](https://codecov.io/gh/devrsi0n/React-2048-game/branch/master/graph/badge.svg)](https://codecov.io/gh/devrsi0n/React-2048-game)

[![node](https://img.shields.io/badge/node-%20%3E%3D%206.10-brightgreen.svg)](https://nodejs.org)

[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

 

[![React](/internals/img/react-padded-90.png)](https://facebook.github.io/react/)

[![Webpack](/internals/img/webpack-padded-90.png)](https://webpack.github.io/)

[![Redux](/internals/img/redux-padded-90.png)](http://redux.js.org/)

[![React Router](/internals/img/react-router-padded-90.png)](https://github.com/ReactTraining/react-router)

[![Redux saga](/internals/img/redux-saga-padded-90.png)](https://github.com/ReactTraining/react-router)

[![ESLint](/internals/img/eslint-padded-90.png)](http://eslint.org/)

[![Jest](/internals/img/jest-padded-90.png)](https://facebook.github.io/jest/)

[![Yarn](/internals/img/yarn-padded-90.png)](https://yarnpkg.com/)

 

A fancy 2048 game build with [react](https://github.com/facebook/react), [redux](https://github.com/reactjs/redux) best practices. Uses many awesome open source tools to improve code styles, includes [eslint](https://github.com/eslint/eslint), [stylelint](https://github.com/stylelint/stylelint), [prettier](https://github.com/prettier/prettier), and [Travis](https://travis-ci.org), [codecov](https://codecov.io) continuous integration services to be guaranteed for code quality and deploy application automatically. Show ❤️ by 🌟.

👉 [Start the game](https://re2048.herokuapp.com/)

## Quick start

Require nodejs version > 6.10 as config scripts were wrote in es6+, also recommend to use [yarn](https://yarnpkg.com) to manage project dependencies instead of npm. After fork the project following below commands to get started.

```bash

  npm i -g yarn # Install yarn

  git clone [email protected]:/React-2048-game.git

  cd React-2048-game

  yarn # Install dependencies

  yarn start # Start local developing mode

  yarn test # Run test code

  yarn build # Build the project from source

```

## Technologies

This app has a rich development experience using the following technologies:

| **Tech** | **Description** |**Learn More**|

|----------|-------|---|

|  [React](https://facebook.github.io/react/)  |   Declarative, component based view library.    | [Codecademy Course](https://www.codecademy.com/learn/react-101)  |

|  [Redux](http://redux.js.org) |  A predictable state container. Supports time-travel debugging. | [Learn Redux](https://egghead.io/courses/getting-started-with-redux)|

|  [Redux saga](https://redux-saga.js.org/) | Handles side effect model for Redux apps. | [Async operations using redux-saga](https://medium.freecodecamp.org/async-operations-using-redux-saga-2ba02ae077b3)|

|  [React Router](https://github.com/reactjs/react-router) | Declarative, multi-platform routing library for React | [Official guide](https://reacttraining.com/react-router/web/guides/philosophy) |

|  [Babel](http://babeljs.io) |  Compiles ES6 to ES5. Uses the latest features of JavaScript today.     | [Learn ES2015](https://babeljs.io/learn-es2015/)    |

| [Webpack](https://webpack.js.org) | Bundles npm packages and all kinds of assets, scripts into a single app. Supports hot reloading via [webpack-dev-server](https://github.com/webpack/webpack-dev-server). | [Learn Webpack in 15 Minutes](https://tutorialzine.com/2017/04/learn-webpack-in-15-minutes)|

| [Jest](https://facebook.github.io/jest/) | Tests JavaScript with built-in assertions automatically, integrates with [Enzyme](https://github.com/airbnb/enzyme) for DOM testing in node environment. | [Official guide](https://facebook.github.io/jest/docs/en/getting-started.html) |

| [ESLint](http://eslint.org/)| Analyze and lint JavaScripts. Reports syntax and style issues. | [ESLint rules](https://eslint.org/docs/rules/) |

[SCSS](http://sass-lang.com/) | Powerful professional grade CSS extension language with variables, mixin, functions, and more. | [Getting Sassy with CSS](http://www.sassshop.com/#/1/2)|

## License

[MIT](http://opensource.org/licenses/MIT)

## More products from author

[![Quotion - Apple Notes to blogs in minutes](./.github/quotion.png)](https://quotion.co)

[Chirpy - Open source & privacy-friendly Disqus alternate for your community](https://chirpy.dev/)