A simple React App, that filters through fetched data with a search bar and displays it on Card components. This implementation was made using Redux.
This is a upgrade of my previous Robofriends App
- The goal here was to lift all state into Redux
- The
srcfolder contains two separate folders, one iscomponents, which stores all the reusable components of the appliaction andcontainerswhich stores the page layout. - The src folder also contains
actions.js,constants.jsandreducers.js, which implement all Redux logic - The project uses Tachyons CSS toolkit for styling: Card component example
- The application fetches data from the JSON placeholder for data and RoboHash for images, then stores it into Redux. From there on, we wok with the stored data via actions and reducers for the searchbar component, which filters the data from user input: Code here
- Redux actions are defined here
- As per good practice, action names are defined as constants
- Reducers are defined here, using Object.assign Code here
- The App has a Error boundry implemeneted: Code here
- A upgrade of my existing Robofriends App
- I used Redux here on purpose, since i wanted to learn it.
- Tachyons is a good library for fast styling.
- My plan is to become a full-stack developer eventually. But for the beginning I focus on the
frontend. That's why I decided to use an existing API rather to create a custom server. I have
basic backend knowledge as well.
- Write all tests using Jest
- Refactor the code using Hooks, which i have done in a separate repository: Robofriends with Hooks
- Since I realized that more and more projects don't use Redux anymore, i would implement GraphQL or
react-query for data managment.
First of all clone or fork this repo and install all the needed dependencies using npm or yarn
Dev build:
run nmp start
Prod build:
run nmp run deploy
This project is open-sourced under the MIT license.