- RoboFriends
- RoboFriends + Redux
- RoboFriends + Redux + Testing
- RoboFriends + Redux + Testing + CI
- RoboFriends + Hooks
- RoboFriends + Hooks + TypeScript
🚀 View Live Demo 🚀
RoboFriends is a responsive single page web application, allowing users to filter the Robots results data via the search form.
Created with React App, connecting to a mock API from JSON Placeholder via a Fetch statement.
The CSS is implemented with the Tachyons NPM module (which uses a custom abbreviated CSS Class method to apply styling to elements).
Finally, RoboHash is used for generating the Robot Avatars.
This app is also 100% rated by Google Lighthouse testing (desktop).
Acknowledgements: Thanks to Andrei Neagoie and his course. Also, thanks to the Z2M Discord channel for providing additional support too.
Project features:
- Initial Loading Status
- Filter results using search form
- Responsive
- 100% rated on Google Lighthouse testing (desktop)
The following dependencies are required to run this project;
React v17.02 * - Used for site framework with React. Fetch to connect to REST API and convert to useable JSON format.
tachyons v4.12.0 * - Shorthand CSS using a class based approach.
*Installed automatically
Open your Code Editor and 'CD' into your working directory, then download the repo to that location, by executing the following command in your terminal.
git clone https://github.com/rbhachu/robofriends.gitOnce the repo has been downloaded, 'CD' to the newly downloaded project folder ('cd robofriends'). Then execute the following command in your terminal.
npm installFinally, to run the app, simply execute the following command in your terminal (ensuring you are in the correct project directory too).
npm startAfter a few seconds, your browser should automatically open to the following link;
and display the project in the browser.
👤 Rishi Singh Bhachu
GitHub
Please drop me a message if you have any issues or problems running the project.
Give a ⭐️ if this project helped you!