Users List

A simple React application that fetches and displays a list of users from a public API.

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Here's a blank template to get started: To avoid retyping too much info. Do a search and replace with your text editor for the following: github_username, repo_name, twitter_handle, linkedin_username, email_client, email, project_title, project_description

(back to top)

Built With

• 
• MaterialUI

(back to top)

Getting Started

This is a React application that retrieves and displays a list of users from a public API. This project aims to focus on API requests, state management and data presentation in React.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/pingchenchan/UsersList.git

2. Install NPM packages

   npm install

3. Runs the app in the development mode.Open http://localhost:3000 to view it in your browser.

   npm start

   The page will reload when you make changes.
   You may also see any lint errors in the console.

(back to top)

Usage

There is a header and a search button on this page, clicking search will fetch the api to get the user list. Circular progress as loading indicator when searching fetch api to get users list. users list When the page becomes narrower, the table will shrink the columns to UserName only, the other columns can be viewed from the drop-down icon. There is a footer at the bottom of the page, which is also responsive.

(back to top)

Roadmap

• When the application loads, it should fetch a list of users from a public API (e.g., the JSONPlaceholder API at https://jsonplaceholder.typicode.com/users).
• While the data is being fetched, display a loading indicator.
• Once the data is fetched successfully, display the list of users in the UserList component.
• If there is an error during the API request, display an error message in the ErrorDisplay component.
• Using MaterialUI to Make Web Pages Attractive and Responsive.
• The UsersList has Expand/Collapse function, when the page becomes narrower, the table will shrink the columns to Name only, the other columns can be viewed from the drop-down icon.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Ping-Chen Chan - pingcc1@uci.edu

Project Link: https://github.com/pingchenchan/UsersList

(back to top)