React Dictionary App

A Dictionary app coded in React with API integration.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Installation
• Author

Overview

The challenge

Users should be able to:

• Search for a keyword
• Be able to read and hear the word's phonetics
• Be able to read the word's definition, used in sentence form including examples
• Be able to see photos related to that keyword

Screenshot

Links

• Live Site URL: (https://peppy-lily-de3cbc.netlify.app/)

My process

Built with

• React (state management)
• Axios API Integration - 2 different APIs - Dictionary API (https://dictionaryapi.dev/) and Pexels photo API (https://www.pexels.com/api/)
• HTML
• CSS properties, CSS Grid, CSS Module
• Reusable Components
• Mobile-first responsive workflow

What I learned

• Update: Learned to hide API keys through .env files.

• I practiced React forms, using state and the map function multiple times. I practiced how to work with two APIs. I practiced incorporating a reusable card component.

Continued development

I would like to add validation like what happens if a user submits an empty form or a word not found in the dictionary API.

Installation

• Fork this repo and then clone your fork to an empty local directory using SSH or HTTPS
• Run:

npm install

• The project can be viewed by running:

npm start

• Open localhost:3000 in your browser.

Author

• Portfolio (https://www.klesdev.com/)