mateuszlason / game-of-life

Implementation of Conway's Game of Life in React.js.

Home Page:https://mateuszlason.github.io/game-of-life/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cover

Conway's Game of Life


My interpretation of Conway's Game of Life in rather futuristic perspective.

I've made a tutorial with all the key elements that you need to know. Furthermore you can press Wikipedia button to learn more about the game or just to check cool patterns!

Few words about this project

While seeking for an idea for a project to my portfolio I accidentaly came across Conway's Game of Life.

I really liked the idea of a world with it's own rules and that you can actually create a simple form of "life" and watch it evolve in real time. Then I figured that it would be awesome to implement the game in React.js - currently my main field of interest - especially with all the new knowledge about React Hooks that I recently grasped.

Additionally, I found it worth trying something new for styling and since I heard about Tailwind CSS so many times, I thought it would be good idea to give it a try.

There's still a lot room for improvement. Because it is not a huge and complicated project I kept most of the code in one component, nevertheless I'll try to extract as much code as possible to seperate ones to make it cleaner (I'm short on time, I'm really looking foreward to my first job as a Junior Frontend Developer 😅).

I took care of responsiveness on all desktop resolutions, also I styled landing page for mobile, but since the game demands quite a big screen, the playground itself does not support mobile resolutions (at least for now).

Edit 1.0 App is now responsive on mobile devices, nevertheless since the game utilizes a lot of computing, for performance reasons it is recommended to use desktop computer.

Enjoy the game!

Which technologies did I use??

As stated above two major solutions are:

  • React.js (especially Hooks)
  • Tailwind CSS

Additionally I utilized:

  • React Router DOM
  • immer
  • Font Awesome

App's build setup - Create react app

Available commands

Standard create react app scripts + Github Pages deployment

npm run start
npm run build
npm run test
npm run deploy
// with github pages
npm run eject

About

Implementation of Conway's Game of Life in React.js.

https://mateuszlason.github.io/game-of-life/


Languages

Language:JavaScript 92.7%Language:HTML 4.6%Language:CSS 2.8%