people-finder

A small React app that fetches a list of people, lets you mark favorites, and browse them on a dedicated Favorites page.

Features

• Fetches and displays a list of users (people)
• Mark / unmark favorites and view a Favorites page
• Loading spinner while data is being fetched
• Simple, responsive UI built with styled-components

Tech stack

React (Create React App), JavaScript (ES6+), React Router, styled-components.

Project structure

public/              static files (index.html, icons)
src/
  pages/
    Home/            main listing page
    Favorites/       favorites page
  components/        UserList, FavoritiesList, Spinner, NavBar, Text, CheckBox
  hooks/             usePeopleFetch, useFavoritesFetch
  constant.js        size / variant / color constants
  AppRouter.js       app routing

Getting started

git clone https://github.com/galshir/people-finder.git
cd people-finder
npm install
npm start

Then open http://localhost:3000 in your browser.

Available scripts

• npm start - start the development server
• npm run build - build for production
• npm test - run tests

How it works

The home page uses usePeopleFetch(), which exposes users, isLoading and fetchUsers to the UserList component. UserList renders the list and allows marking items as favorites. Styling lives in the style.js file next to each component and page.

Roadmap

• Infinite scroll for the user list
• Tests for hooks and components
• Settings page with page size and filtering options

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/my-feature)
3. Commit your changes and open a pull request