Rock Paper Scissors - Progressive Web App

Description

This project is a rock-paper-scissors game that meets the standards of a progressive web application. The motivation behind building this project was to demonstrate proficiency in working with Webpack, Tailwind, TypeScript, Lighthouse, Service Workers, Babel and Heroku technologies. By creating this game, I aimed to showcase my skills in designing and implementing an application that offers offline functionality, is optimized for performance, and offers a smooth user experience.

Throughout the development of this project, I gained valuable insights into the following areas:

• Webpack and Modularization: I enhanced my comprehension of Webpack's bundling capabilities and learned to optimize the management of assets such as JavaScript, CSS, images, and HTML. By setup up the building process by configuring custom loaders, plugins, and optimization techniques. Creting a robust build allowed me to create a web application that can deliver smooth user experiences, faster load times, offline use, and better overall performance.

• TypeScript and Type-Safe Coding: Using TypeScript has increased my understanding of statically typed languages in the JavaScript ecosystem. I have become familiar with type annotations, interfaces, type inference, function type annotations, and tsconfig.json to ensure type-safety throughout my applications. By making use of TypeScript's compiler and advanced type-checking features, I've been able to catch potential bugs early and streamline the refactoring process. This approach to coding has made my applications more maintainable and helped cultivate the habit of writing self-documenting and predictable code.

• Tailwind CSS: Using Tailwind CSS has helped me practice another approach to web design and development. By utilizing its utility-first methodology, I've gained proficiency in rapidly building responsive and aesthetic user interfaces. Tailwind's modular and composable classes minimized my need for custom CSS. Through incorporating its configuration capabilities, such as the tailwind.config.js, I've been able to further customize the my usage of the technology.

• Google Lighthouse and Performance Optimization: I deepened my understanding of Google Lighthouse's performance analysis tools and honed my skills in optimizing website and application performance. I learned to systematically assess and enhance the loading speed, accessibility, SEO, and overall user experience of my project through the use of loaders, plugins, and service workers.

• Node Package Manager (NPM) and Dependency Management: I expanded my knowledge of NPM's intricacies and my proficiency in managing project dependencies. This ensures that my project is built on a solid foundation and remains up-to-date with the latest features and security patches.

• Heroku Deployment: I acquired a more comprehensive understanding of Heroku's deployment process. Through this expertise, I successfully transformed my local projects into live, accessible web applications. This ensures that my applications are reliable, scalable, and maintain optimal performance under various traffic conditions.

• Service Workers: I deepened my knowledge of service workers and their role in enabling offline-first web development. Through service worker implementation, I created an applications that maintains functionality even when offline.

• Babel: I enhanced my understanding of Babel as a tool for transpiling modern JavaScript code. By using Babel, I ensured that my application remains compatible with a wide range of browsers and environments, even when using the newest language features. Through the configuration of presets, plugins, and targets, the maintainability and availability of this PWA was enhanced.

Table of Contents

• Rock Paper Scissors - Progressive Web App
  • Description
  • Table of Contents
  • Installation
  • Usage
  • Contributors
  • License

Installation

To set up the project locally, follow these steps:

1. Clone the repository (HTTPS): git clone https://github.com/saduhub/Text-Editor-PWA.git
2. Navigate to the project directory: cd Rock-Paper-Scissors-TS-Tailwind-Webpack-
3. Install dependencies: npm run install
4. Run the build: npm run start:dev
5. Open in browser: http://localhost:8080/

You will see "Compiled with problems". Feel free to close that window and disregard. More details here. Favicon update coming in the near future.

Usage

1. Access the rock-paper-scissors game on Heroku.
2. Install the game (Optional): Press the Install button and confirm OR When you access the game for the first time, most modern web browsers will prompt you to install it as a standalone app on your device. This will create an icon on your home screen or app drawer, making it easy to access the game just like any other app.
3. Enjoy a rock-paper-scissors game with offline functionality, responsive design, fast loading times, and the ability to be added to your home screen.

Contributors

This project was developed by Saduhub.

• Rock Icon - Andinur Studio.
• Paper Icon - WEBTECHOPS LLP.
• Scissor Icon - Jemis Mal.

License

This project is licensed under the MIT License.

This web application is intended strictly for educational and illustrative purposes. The creators and contributors of this project cannot assume liability for any potential consequences resulting from the use of this web application. Users and deployers of this application bear the full responsibility of implementing adequate security measures and ensuring the secure handling of sensitive data. Please exercise caution when interacting with this or any other web application involving personal or sensitive data.