Wbs W6p5 React_pinterest Clone

screenshot of Wbs W6p5 React_pinterest Clone
react

React App - Routing, Fetch & Filter data using Axios on Contentful API

Overview

This document provides an analysis of a project titled "Fetch data - Create a Pinterest Clone with React" developed by WBS Coding School as a team project. The main goals of the project were to work with git and GitHub in a remote team, and to implement routing, fetching, and filtering data using Axios requests on the Contentful API. The project required knowledge of React, ES6, HTML5, and CSS3, and had a duration of 2 weeks with a team size of 4.

Features

  • React App: The project involved creating a React app that utilizes data from the Contentful API on different routes.
  • Different Routes: The app includes two main routes: one for displaying all posts and another for displaying the best rated posts.
  • View Components: Two view components were created to handle the display of posts on the respective routes.
  • Fetching and Displaying Data: The app fetches all posts entries using Axios and displays them in a card-like component. The user referenced in each post is also displayed.
  • Search Functionality: The app includes an input field and a submit button for searching posts. On submit, only entries with titles containing the input text are fetched and displayed.
  • Filtering Best Rated Posts: The app also includes functionality to fetch posts where the grade field value is 5, and fetch all entries where the grade is 4 or more, ordering them by grade.

Summary

The "Fetch data - Create a Pinterest Clone with React" project developed by WBS Coding School is a team project that focuses on working with git and GitHub in a remote team, as well as implementing routing, fetching, and filtering data using Axios requests on the Contentful API. The project requires knowledge of React, ES6, HTML5, and CSS3, and includes features such as different routes, fetching and displaying data, and search functionality. Overall, it provides a practical exercise in building a React application that interacts with an external API.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components