This project, React Pagination Assessment, showcases a dynamic single-page application that leverages the Star Wars API to display character data with efficient pagination. The primary focus of this project is to demonstrate advanced React component composition and the integration of React Query for state management and API interaction.
I undertook this project to deepen my understanding of React's capabilities in handling large datasets and to explore the practical applications of React Query in a real-world scenario. This project is part of my journey in mastering frontend development and in understanding the nuances of modern web application architecture.
Create a single page application comprised of Item Cards, each of which will display information to a user wherein that information is a subset of data you extract from a sample public API of your choosing from the following list
- Create a UI that replicates the UI shown on page 2. Note: Book name/Image is an example of data from your API that you may display to a user.
- Upon selecting the previous or next button, a user should be able to
view a subset of items derived from a list of data. EG items 0-2,
3-5, and so on. Your goal is to sift through API documentation until you find an API that has an endpoint allowing for configuration based on URL parameters. - Use React Testing Library for writing tests.
-
Demonstrate knowledge of component composition and focus on component reusability.
-
Demonstrate knowledge of effective test coverage and meaningful tests (EG testing implementation details vs. replicating user interactions)
Table of Contents
- Star Wars API - For all character data
- ReactJS - For UI and components
- Github - For code maintenance
- GithubPages - To deploy site
- ReactQuery - Handles pagination functions and loading data
- Axios - Fetching library
- Jest.io - For testing
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/robert-s-hogan/react-query-pagination-assessment.git
- Install NPM packages
npm install cd react-query-pagination-assessment - Run local server
npm start
This project can be used for anyone who wants to work with the Star Wars Free API.
- Photo API with Star Wars characters - set up a custom API that scrapes a star wars gallery.
- Sound Effects - Add sound to the project
See the open issues for a full list of proposed features (and known issues).
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See license.txt for more information.
Your Name - @robert_s_hogan - robert.s.hogan@icloud.com
Project Link: https://github.com/robert-s-hogan/react-query-pagination-assessment