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.
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!