RoboFriends is a React-based web application that displays a list of robot friends with a dynamic search functionality. It fetches user data from an external API and filters the results based on user input.
- Dynamic Search: Users can search for robots by name in real-time.
- API Integration: Fetches user data from
jsonplaceholder.typicode.com. - Responsive UI: A simple and clean user interface built with React components.
- Scroll Feature: A custom scrollable container for a better browsing experience.
- React (Functional Components & Class Components)
- JavaScript (ES6+)
- CSS (Styling and Layout)
- JSON Placeholder API (Mock data for robots)
- Git & GitHub (Version Control)
To run the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Cryptim/Robofriends.git
-
Navigate to the project directory:
cd Robofriends -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open your browser and go to:
http://localhost:3000
Robofriends/
│-- src/
│ │-- components/
│ │ ├── Card.js
│ │ ├── CardList.js
│ │ ├── Scroll.js
│ │ ├── SearchBox.js
│ │-- App.js
│ │-- index.js
│-- public/
│-- package.json
│-- README.md
- Search Robots: Type in the search bar to filter robots dynamically.
- Scroll Feature: View more robots by scrolling within the scrollable container.
- API Data Fetching: Users are dynamically loaded from an external API.
You can deploy this app using:
- Netlify
- Vercel
- GitHub Pages (For static deployment)
Contributions are welcome! Follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Commit your changes (
git commit -m "Add new feature"). - Push to the branch (
git push origin feature-branch). - Open a Pull Request.
This project is licensed under the MIT License.