Frontend Mentor - Connect Four game solution

This is a solution to the Connect Four game challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the game rules
• Play a game of Connect Four against another human player (alternating turns on the same computer)
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Bonus: See the discs animate into their position when a move is made
• Bonus: Play against the computer

Screenshots

Links

• Solution URL: GitHub Repository
• Live Site URL: Connect Four Game

My process

Built with

• TypeScript for type-safe JavaScript code.
• React - A JavaScript library for building user interfaces.
  • React Hooks: useState, useEffect, useCallback, useContext, and lazy for efficient state management and component rendering.
  • Context API for managing game states across different components.
  • React Router for navigational components.
  • React Responsive for creating a responsive design.
• Custom game logic implemented in TypeScript.
• SCSS for styling components.
• React Testing Library for unit testing components.

What I learned

This project was an excellent opportunity to deepen my understanding of React and TypeScript. I implemented a complex game logic that includes features like animations and AI for playing against the computer. It also reinforced my knowledge in responsive design and unit testing with React Testing Library.

Continued development

In future projects, I want to focus on:

• Enhancing AI algorithms for a more challenging gameplay.
• Implementing more complex animations and interactive UI elements.
• Exploring state management solutions for large-scale applications.

Useful resources

• React Documentation - A comprehensive guide to React's features and APIs.
• SCSS Guide - This helped me effectively utilize SCSS for styling.
• React Testing Library - A useful resource for writing maintainable tests for React components.
• TypeScript Documentation - Essential for understanding and using TypeScript in your projects.

Author

• Website - riz82.vercel.app
• Frontend Mentor - riz82's Frontend Mentor Profile

Acknowledgments

I'd like to thank the Frontend Mentor community for providing this challenge, which has been instrumental in enhancing my web development skills.