This content originally appeared on DEV Community and was authored by Sarah Siqueira
To fully understand this post, I am assuming you are aware of the Headless CMS architecture, an approach to decouple where content is stored from where it is presented.
Read more about Headless CMS architecture
Some time ago, I decided to build a portfolio application to show some of my previous work and skills. Thinking about the features present on this portfolio and, knowing that the software development career is an endless road learning journey, why not register things I was learning? Why not share this?
I should write a blog and couple it with this portfolio, I thought...
But what was the cheaper and best approach for this endeavor?
I had some decisions around the technology to take.
Some points that were important to me, like:
- As little effort as possible: Didn't want to handle hosting or a full-featured headless CMS somewhere like a whole WordPress.org. I have plenty of work to do, don't need to overenginnering this project;
- Write posts in markdown: in case I decided to move content in the future, don't want to have to format everything again;
- Distribute the content: Traffic is important, I want the content to be published on one platform that has traffic from developers;
- Want the content available on my personal portfolio.
After considering the best and cheaper options available, I found DEV.to and decided to use it to store my articles.
The DEV.to API is open, which means I can easily use it and get that content into my portfolio without much effort. Posts are written in markdown and already have heavy traffic from other developers.
Decision made, time to get to work!
Dev.to as Headless CMS
In this feature for my portfolio, my dev account performs the role of CMS, and the content is presented in a React App. In other words, the backend is powered by Dev.To , the frontend is made using ReactJs and is hosted on Vercel.
As I already had a portfolio in running made using React, I had to create new components and routes to implement this 'articles' feature.
The first step was to create the component Posts.js. On this component, we will use the famous React hooks useEffect and useState, so we need to import them:
import React, { useEffect, useState } from 'react';
In the Posts.js component, we will get the data from Dev. I could use two different methods of making network requests: either Fetch or Axios.
I decided to use Fetch, as you can see below:
export default function Posts () {
/* initializing the state which will hold the articles information
and the loading state */
const [articles, setArticles] = useState ([]);
/* fetch the articles, change your username to retrieve
your own articles */
useEffect( () => {
fetch('https://dev.to/api/articles?username=sarahcssiqueira')
.then( (res) => res.json())
.then((res) => {
setArticles(res);
});
}, []);
Then, I like to console log:
console.log(articles);
As everything is working as expected:
return (
<section>
{articles.map((article) => {
return (
<article key={article.id}>
<img src={article.social_image}
alt={article.title}>
</img>
<Link to={article.url}>
{article.title}
</Link>
<p>
{article.description}
<Link to={article.url}>
<BsBoxArrowUpRight/>
</Link>
</p>
<ul>
<li>
<BsCalendarDate/>
{article.readable_publish_date}
</li>
</ul>
<ul>
<li>
<AiFillTag/>
{article.tags}{" "}
</li>
</ul>
<p>
<BsChatHeartFill/>
{article.public_reactions_count}
</p>
</article>
)
})}
</section>
)};
The icons I used : <BsBoxArrowUpRight/> and <AiFillTag/>, were provided for the react-icons library.
After install the library, we must import the icons in the component Posts.js.
/* Icons */
import { BsBoxArrowUpRight } from "react-icons/bs";
import { AiFillTag } from "react-icons/ai";
The result can be seen at my portfolio on articles page.
This content originally appeared on DEV Community and was authored by Sarah Siqueira
Sarah Siqueira | Sciencx (2023-03-28T20:55:13+00:00) Blog feature on a react app using Dev.to as a Headless CMS. Retrieved from https://www.scien.cx/2023/03/28/blog-feature-on-a-react-app-using-dev-to-as-a-headless-cms/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.