A Full-Stack Project With React and FastAPI - Part 3
Learn full-stack development with this weekend project!
Welcome to the Part 3 of this weekend project article series! Before getting started with this section of the tutorial, please do the following:
Follow the tutorials in the Part 1 and Part 2 of this series of articles below:
Refer the React documentation as our frontend will be based on it.
If you’re here from Part 1 and 2, until now, we have done a basic project setup, created the structure with frontend and backend directories, setup Poetry and Git and installed our required libraries in the backend directory, and finally created the design of the project in Figma. Finally, we worked on the entire backend of our app, getting tweets from our Twitter API and returning them as a paginated response.
Now, let’s now dive deeper into building the frontend of our TweetLoader web app!
Setup React
We first go into client folder of our project root and create a new react app.
$ cd client
$ npx create-react-app .Follow the instructions and setup the app. We also want to add the react-paginate library for adding, you guessed it, pagination to our app.
$ npm i react-paginateInstalling tailwind can be done as follows:
$ npm install -D tailwindcss
$ npx tailwindcss init
Inside tailwind.config.js , add the following: