michael-schlueter/react-dictionary

A React Dictionary App built with Material-UI to provide different styles (light / dark mode). Based on a tutorial from Roadside Coder / freeCodeCamp

Dictionary Application

This is a Dictionary App using ReactJS and Material UI. The app allows you to translate words into 12 different languages using the Dictionary API.

General Information

• I undertook this project in order to familiarize myself with the use of Material UI to style components
• In particular, I wanted to get to know how to implement a Light Mode / Dark Mode in a React app using Material UI
• I also wanted to grasp the concept of progressive web app and understand what is necessary to turn an app into a PWA

Technologies Used

• React 17.0.2
• MaterialUI 4.12.3
• Axios 0.21.1

Features

• Translating words into 12 different languages
• Switch between a Light Mode and a Dark Mode

Screenshots

Demo

Live demo here.

Setup

The dependencies which are necessary to run this app can be found in the package.json file.

1. Clone the repo
2. Navigate to the project folder in the terminal and install the necessary NPM dependencies

npm install

3. Run the app typing

npm start

in the terminal

Learnings

• using MaterialUI to style components (Theme, ThemeSwitcher, ThemeProvider)
• implementing Light / Dark Mode with the help of the MaterialUI
• transformation to a Progressive Web App
• making requests using Axios instead of fetch API

Project Status

The project is finished. I didn't find it necessary to add any further features to it.

Acknowledgements

• This project was based on this tutorial.
• I watched the video and tried to implement its concepts myself. Therefore there may only be slight differences in code.