Dictionary App with PWA

Designed by Frontend Mentor

Table of contents

• Overview
  • Motivation
  • Website
  • Features
• Built with
• What I learned
• Install process
• Build process

Overview

Motivation

My main goal for this project was to practice using Vitest, Testing Library and TanStack Query. It also contains cool features, such as a PWA and caching.

Website

App live demo

Features

• Caching searched words for 24hours
• PWA
• Font preferences saving to localStorage
• Theme preferences saving to localStorage
• Searching words definitions
• Default theme mode based on the user's prefers-color-scheme

Built with

• TailwindCSS
• React
• Vite
• Vitest
• Testing Library
• TypeScript
• localStorage Web APIs
• Tanstack Query
• Workbox
• Axios
• Dictionary API

What I learned

• Caching data using TanStack Query
• Testing components that rely on API data
• Mocking rest request with a MSW for testing
• Creating PWA with Workbox
• Theme default value based on the user's system preferences

Install process

1. Install Node.js
2. Navigate to project folder in command line
3. Run npm install
4. Run npm start

Build process

1. Open project folder in command line
2. Run npm run build