How to make a simple Web Application using React and Contentful

I am writing this blog for people who have basic knowledge about Contentful and React. I will put more focus on Contentful and how to extract the content through code and make use of it.

Contentful is a platform that lets you create and update your website or mobile application or any other platform that displays your content. Contentful saves your time and hassle to create your own backend like creating the servers or setting up the database. It also provides you some powerful APIs to fetch up the content and display in some frontend application like React.

I am making a single page website to display the unusual facts and respective description. I will provide my github link and you can run it in your localhost. Let's get started!

Your first step will be to create your account in contentful. As a new user you are allowed to use 2 different free spaces. Complete the 3 steps to create and empty space.

Once the space is created, click on content model. Here, we are going to create a content model for our content. Basically , a content model tells what kind of content you are going to put in your website. Click on add content type and follow the further steps as shown in the picture.

Now proceed by adding some fields in the content. I have added 3.

Add the other two fields as mentioned in the images below-

The content model is now ready and saved. We are now supposed to add our content. I have added the contents according to my interest while you can add according to yours(name, image, description). Click on content on the top bar and then on add facts.

Start writing your very first content and publish others after that.

Once you are satisfied with your content, then you can click on publish. Here, I have added 5 questionable facts.

Now, we are ready to start our React application where we will fetch all these data from contentful and display in our web application.

Create a folder on your desktop and name it accordingly. I named my folder 'factblog'. Make sure the name written is in lowercase.

Now open this folder in your terminal.

Our next step is to create react app in your folder. Try the commands as mentioned and hit enter-

npx create-react-app .

This statement will install the react app boiler plate setup so that we can start using react right away.

Once the installation is completed, start visual studio from your terminal by typing-

code .

and start development server by typing-

npm start

If this statement throws some error, check if npm is already install in your PC. You can try this website for your reference.

Now go to visual studio code and do some initial cleanup. Under src tab on the left side, you can delete App.test, index.css, logo.svg, serviceWorkers.js, setupTests.js. You can now clone the code from the github link and make changes accordingly. You can get your space ID and access token from your contenful account- Settings > API Key > Example Key 1.

You also need to install 'marked' in your VS terminal by typing-

npm install marked

Our web application is completed. In case of any doubts, you can put it as a comment. I will definitely try to resolve it. Thank you and Good Luck!