Merge pull request #1 from adamrayrobson/dev

Dev

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/nodejs.yml

@@ -0,0 +1,31 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install
+        run: |
+          npm install
+          npm ci --dev
+          npx eslint .
+          npm run test
+          npm run build

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,8 +1,90 @@
-# React + Vite
+# Tetris
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Description
 
-Currently, two official plugins are available:
+Tetris Game with React, Redux, Webpack, Babel, Deployed on Netlify
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+---
+
+Live demo on Netlify [here](https://tetrisinreact.netlify.app).
+
+---
+
+## Table of Contents
+
+- [Tetris](#tetris)
+  - [Description](#description)
+  - [Table of Contents](#table-of-contents)
+  - [Summary](#summary)
+  - [Features](#features)
+  - [Technologies Used](#technologies-used)
+  - [Objectives](#objectives)
+  - [Authors](#authors)
+  - [Acknowledgements](#acknowledgements)
+  - [Contact](#contact)
+
+## Summary
+
+The Tetris Game project is an interactive web application built using
+  modern web technologies, including React, Redux Toolkit, Webpack,
+  Babel, and deployed on Netlify. This project was designed to showcase
+  proficiency in front-end development, state management with Redux,
+  and efficient deployment practices.
+
+This build was inspired by [this](https://github.com/Tech-at-DU/React-Redux-Tetris-Tutorial).
+
+## Features
+
+1. **Classic Tetris Gameplay**: The application faithfully replicates the
+  classic Tetris experience, providing players with the familiar challenge
+  of arranging falling blocks to create complete lines.
+
+2. **React Components**: The game's user interface is built using React,
+  allowing for a modular and efficient component-based architecture. This
+  enables easy customization and maintenance of the game's various elements.
+
+3. **Redux State Management**: Redux and Redux Toolkit were employed to
+  manage the game's state, ensuring a predictable and centralized approach to
+  handling game logic, score tracking, and level progression.
+
+4. **Webpack and Babel Setup**: The project was set up and configured with
+  Webpack and Babel, facilitating efficient bundling, transpiling, and
+  optimization of the codebase for production deployment.
+
+5. **Responsive Design**: The game is designed to be responsive, ensuring an
+  enjoyable and seamless gaming experience across a wide range of devices,
+  from desktops to mobile phones.
+
+6. **Netlify Deployment**: The game is deployed on Netlify, a powerful
+  and user-friendly platform for hosting static websites. This ensures
+  reliable and scalable hosting with continuous integration and automated
+  deployment workflows.
+
+## Technologies Used
+
+- **Frontend**: React, HTML, CSS, JavaScript
+- **State Management**: Redux Toolkit
+- **Build Tools**: Webpack, Babel
+- **Deployment**: Netlify
+
+## Objectives
+
+- Gain proficiency in React for building dynamic and interactive user
+  interfaces.
+- Master Redux Toolkit for efficient state management in complex applications.
+- Understand and implement Webpack and Babel for project setup, bundling, and
+  transpilation.
+- Learn deployment best practices using Netlify, including continuous
+  integration and automated deployment workflows.
+
+## Authors
+
+> [@Adam-Robson](https://www.github.com/Adam-Robson)
+
+## Acknowledgements
+
+Thanks to Mitchell Hudson for generously sharing.
+
+## Contact
+
+I can be messaged through email at `[email protected]`.

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tetris</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>