https://github.com/elisa-amaral/posts-pagination-and-posts-search-built-with-reactjs

Posts pagination and search built with React.js consuming the {JSON} Placeholder API as testing data (posts title, body text and photo).
https://github.com/elisa-amaral/posts-pagination-and-posts-search-built-with-reactjs

css html javascript json-placeholder-api jsx pagination react reactjs search

Last synced: about 2 months ago
JSON representation

Posts pagination and search built with React.js consuming the {JSON} Placeholder API as testing data (posts title, body text and photo).

• Host: GitHub
• URL: https://github.com/elisa-amaral/posts-pagination-and-posts-search-built-with-reactjs
• Owner: elisa-amaral
• Created: 2022-12-28T14:20:49.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-12-28T19:00:15.000Z (about 2 years ago)
• Last Synced: 2024-02-08T13:34:38.242Z (11 months ago)
• Topics: css, html, javascript, json-placeholder-api, jsx, pagination, react, reactjs, search
• Language: JavaScript
• Homepage: https://post-pagination-and-search-in-reactjs.netlify.app/
• Size: 634 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Posts Pagination and Posts Search built with React.js

This is a posts pagination and posts search project built with React.js consuming the {JSON} Placeholder API as testing data (posts title, body text and photo). 

The project loads 100 posts in total and 100 images (one for each post), extracting 100 from the 5000 photos that the API provides.

The user can load posts (five at a time) and searchs through the posts titles via a search bar. Notice that every post is written with placeholder Lorem Ipsum text, so the user must test the search feature with Latin words, such as "est", "aut" and "sunt", or with single letters ("a", "b", "c"...) 

## Project Website

https://post-pagination-and-search-in-reactjs.netlify.app/

## Project Demonstration Video

https://drive.google.com/file/d/17-gR-7UuvkZZDHwrlg2oS79ppXb4PN0V/view?usp=sharing

## Screenshot 1: Posts Pagination

![Screenshot](public/Screenshot_1.jpg)

## Screenshot 2: Posts Search

![Screenshot](public/Screenshot_2.jpg)

## Technology Stack

+ React.js

+ JSX

+ JavaScript

+ HTML

+ CSS

+ [JSON Placeholder](https://jsonplaceholder.typicode.com/) | Free fake API for testing and prototyping