kevinfaveri / oldschool-react

A real world example React SPA using Router + Redux + Saga + Styled Components + Hooks + Storybook + Web Worker + Ant Design and Jest + Enzyme + Sinon + React Testing Library for tests.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CircleCI Netlify Status

codecov Performance score: 92/100

Old School Game Library

https://i.imgur.com/Vf1Tydi.png

Boilerplate project for learning React (& its main libraries commonly used) with the theme: Old School Game Library.

Branchs

The branchs are organized in cronological order.

  • πŸ‘Ά master branch: a react-create-app with Eslint (AirBNB codestyle) and Prettier support. Also has .editorconfig and .gitignore files. Contains this README which explains all branchs.

  • #️⃣ basic-js branch: this branch is a react-create-app boilerplate from master branch + project structure, layouts, components and routing. Ant Design + Ant Motion for layouting and Enzyme + Sinon for tests are added to the app.

  • ✨ basic-redux branch: basic-js branch + React Redux added to manage the app state.

  • 🌐 redux-saga branch: basic-redux branch + Redux Saga added to manage side effects.

  • 🎣 hooks branch: redux-saga branch + connected-router-redux + HOOKS FOR EVERY COMPONENT (bye React Classes, hello fully functional SPA) [all tests rewritten + tests for Reducers and Sagas]. This version updated React from version 16.8.6 to 16.9.0.

  • ⚑ majestic branch: hooks branch + PROCESS ENVS + majestic added as a UI for Jest

  • πŸ¦‘ react-testing-library branch: majestic branch + react-testing-library replacing enzyme

  • πŸ“– storybook branch: react-testing-library branch + Storybook added for UX testing components

  • πŸ’… styled-components branch: storybook branch + code refactoring using styled-components for the styling

  • πŸ‘· worker branch: styled-components branch + web worker for keeping the big scripts off the main thread

  • πŸ“± mobile branch: worker branch + partial mobile support and some tests fixes

DEMO

The demo (which is based in the mobile branch) is available here: https://oldschool-react.netlify.com

Support me

ko-fi

All games appearing in this app have their rights reserved to their respective companies. This app is just a concept aimed at applying React and its main libraries commonly used in a real project.

About

A real world example React SPA using Router + Redux + Saga + Styled Components + Hooks + Storybook + Web Worker + Ant Design and Jest + Enzyme + Sinon + React Testing Library for tests.

License:MIT License


Languages

Language:JavaScript 69.9%Language:HTML 19.4%Language:CSS 10.7%