Why Dev.to API is the Easiest Way to Add a Blog Section to Your React Portfolio

When building a React portfolio, one common challenge is adding a dynamic blog section without the hassle of setting up a backend or managing content manually. As a developer, I wanted a solution that was lightweight, easy to implement, and required minimal maintenance. That’s where the Dev.to API came in.

Dev.to offers a straightforward RESTful API that allows you to fetch your published articles directly into your portfolio. The best part? No authentication is required for public articles, making it a plug-and-play solution. This approach saved me hours of work compared to building a blog section from scratch or integrating a headless CMS.

In this post, I’ll walk you through how I implemented a dynamic blog section in my React portfolio using the Dev.to API. By the end, you’ll have a clear roadmap to replicate this in your own project.

---

Section 1: Understanding the Codebase Architecture

Before diving into the implementation, let’s break down the project structure and key files involved.

Project Structure

Here’s how the relevant parts of my React portfolio are organized:

src/  
├── components/  
│   ├── Blog.jsx          # Main component for fetching and displaying articles  
│   └── BlogModal.jsx     # Modal component to display full article content  
└── package.json          # Dependencies like react-markdown  

Key Files and Changes

1. Blog.jsx: This is the heart of the integration. It fetches articles from the Dev.to API, manages state, and renders a list of articles.
2. BlogModal.jsx: A modal component that displays the full content of an article when a user clicks on it.
3. package.json: I added react-markdown to parse and render the Markdown content from Dev.to articles.

Dependencies

• fetch: Built-in JavaScript function for making API requests.
• react-markdown: Library to render Markdown content as HTML.
• lucide-react: For icons used in the UI (e.g., loading spinners or modal close buttons).

---

Section 2: Implementing the Dev.to API Integration

Now, let’s dive into the code. The core of this implementation lies in fetching articles from the Dev.to API and displaying them in the portfolio.

Step 1: Fetching Articles from Dev.to API

The first step is to fetch your articles using the Dev.to API. I created a fetchArticles function in Blog.jsx to handle this.

Code Example:

const fetchArticles = async () => {
    try {
        const response = await fetch(`https://dev.to/api/articles?username=timadey`);
        const data = await response.json();
        setArticles(data);
    } catch (error) {
        console.error('Error fetching articles:', error);
    } finally {
        setLoading(false);
    }
};

From useEffect callback in src/components/Blog.jsx

Explanation:

• The fetch function retrieves articles from https://dev.to/api/articles?username=[your-username]. Replace [your-username] with your Dev.to username.
• The response is parsed as JSON and stored in the articles state using setArticles.
• Error handling ensures the component remains robust, and the loading state is updated accordingly.

Step 2: Rendering Articles in the UI

Once the articles are fetched, they’re rendered in a list format. Here’s a snippet of how I mapped over the articles array:

{articles.map((article) => (
    <div key={article.id} className="blog-card">
        <h3>{article.title}</h3>
        <p>{article.description}</p>
        <button onClick={() => openModal(article)}>Read More</button>
    </div>
))}

Explanation:

• Each article is displayed as a card with its title, description, and a "Read More" button.
• Clicking "Read More" opens the BlogModal component, which fetches and displays the full article content.

Step 3: Displaying Full Article Content in a Modal

The BlogModal.jsx component uses react-markdown to render the article’s Markdown content:

import ReactMarkdown from 'react-markdown';  

const BlogModal = ({ article, onClose }) => (
    <div className="modal">
        <button onClick={onClose}>Close</button>
        <ReactMarkdown>{article.body_markdown}</ReactMarkdown>
    </div>
);

Explanation:

• ReactMarkdown converts the body_markdown field from the Dev.to API into rendered HTML.
• The modal includes a close button to enhance user experience.

---

Section 3: Development Notes and Best Practices

While implementing this feature, I kept a few best practices in mind:

1. Error Handling: Always include error handling in API calls to prevent the app from crashing.
2. Loading States: Use a loading spinner or message to indicate when articles are being fetched.
3. Pagination: If you have many articles, consider implementing pagination using Dev.to’s page and per_page query parameters.

---

Implementation Summary

Adding a dynamic blog section to your React portfolio using the Dev.to API is simpler than you might think. By leveraging the API’s straightforward structure and combining it with React’s state management, you can create a seamless and maintainable solution.

Here’s a quick recap of the steps:

1. Fetch articles from the Dev.to API in Blog.jsx.
2. Render the articles as cards in the UI.
3. Use react-markdown to display full article content in a modal.

With this approach, you avoid the overhead of building a blog from scratch while still showcasing your writing directly in your portfolio. Give it a try—you’ll be surprised at how easy it is!

Happy coding! 🚀