![React Dictionary App](app-
screenshot.png)
This is a React application integrated with Redux for state management that allows users to search for word definitions, view their search history, and see detailed explanations for individual words. The application follows the provided UI design.
- Features
- API
- Project Structure
- Redux Integration
- UI Implementation
- Getting Started
- Usage
- Contributing
- License
- Navbar: Displaying the application title and navigation links to Home and History pages.
- Search Functionality: Provide an input field where users can type in a word and a button to initiate the search. Display the results below the input.
- Display: A list of previously searched words.
- Storage: History should be stored and managed in the Redux store.
- Redirection: Clicking on a word in the history list should redirect users to the word's details page.
- Display: Detailed information of a word. This includes its phonetics, meanings, part of speech, definitions, and audio pronunciations.
- Dynamic Routing: Use dynamic routing to handle different words (
/word/:word
).
- Display: A visually appealing loader/spinner while fetching data from the API.
The application uses the DictionaryAPI for fetching word details. You can access the API at DictionaryAPI.
The project is structured as follows:
src/
components/
: React components for the application.redux/
: Redux store, actions, and reducers.routes/
: React Router routes for different pages.styles/
: CSS styles for the application.utils/
: Utility functions.App.js
: Main application component.index.js
: Entry point of the application.
Redux is used for state management in the application. The Redux setup includes actions and reducers to manage the history of searched words. Redux middleware, like redux-thunk
, is used for asynchronous operations when fetching data from the API.
The application's user interface (UI) is implemented to match the provided Figma design. It is designed to be responsive and user-friendly.
To run the application locally, follow these steps:
-
Clone this repository to your local machine:
git clone https://github.com/yourusername/react-dictionary-app.git