# RoboFriends-hooks

A simple React App, that filters through fetched data with a search bar and displays it on Card components. This implementation was made using React hooks and functional components. Demo

How I worked on this project

This is a upgrade of my previous Robofriends App

• The goal here was to refactor my original Robofriends app to using hooks and functional components

How to navigate this project

• The srcfolder contains two separate folders, one is components, which stores all the reusable components of the appliaction and containers which stores the page layout.
• 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 state. From there on, we wok with the stored data via useEffect and useState for the searchbar component, which filters the data from user input: Code here

Why I built the project this way

• A upgrade of my existing Robofriends App
• I used hooks and functional components 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.

If I had more time I would change this

• Write all tests using Jest
• Since I realized that more and more projects don't use Redux anymore, i would implement GraphQL or
  react-query for data managment.

Available Scripts

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

Authors

Miha Oblišar - @mihaoblisar

Licence

This project is open-sourced under the MIT license.