This device is not compatible.

PROJECT


Build a Crossword Puzzle Using Vite and Vitest

Build and deploy a simple crossword puzzle with Vite and React JS, and using Vitest, test the application hooks, and run tests on functions to see if they are working correctly.

Build a Crossword Puzzle Using Vite and Vitest

You will learn to:

Develop a front-end crossword puzzle.

Create basic tests for Vitest.

Connect React hooks to React application.

Test application functions and components using Vitest.

Skills

React.js

Hooks

JavaScript Testing

Prerequisites

Basic understanding of React and its components

Basic understanding of component testing

Technologies

Vite

React

JavaScript

Project Description

Vite is a leading front-end build tool that bundles our code for production and offers a quick development environment.

In this project, we’ll be creating a crossword puzzle. We’ll create a dynamic grid using our puzzle to solve and check the crossword.

Additionally, we’ll use Vitest to test our application and we’ll write our tests to test the functions and hooks.

Project Tasks

1

Introduction

Task 0: Get Started

Task 1: Install Vitest

Task 2: Create a Basic Test on Vitest

Task 3: Create a React Hook for Vitest

Task 4: Test the Component Using Vitest

2

Build the Crossword Puzzle

Task 5: Create the Crossword Puzzle

Task 6: Create the Crossword Grid

Task 7: Style the Crossword

Task 8: Display the Crossword

Task 9: Handle the Input boxes

Task 10: Check the Crossword

Task 11: Create Buttons to Check and Reset Crossword

Task 12: Display Hints for the Crossword

Task 13: Test the Crossword Grid Creation

3

Test the Application

Task 14: Run the Tests

Task 15: Run the Crossword

Congratulations!