Unlocking Your #dev.to Portfolio: Elevate Your Web Presence with Integrated Article Showcase

In today's fast-paced tech world, showcasing your expertise is paramount. You've penned insightful articles on #dev.to, and now it's time to amplify your reach.

Imagine seamlessly merging your dev.to articles into your personal portfolio website, creating a comprehensive showcase of your accomplishments.

In this tutorial, we'll embark on an exciting journey to integrate the dev.to API with your portfolio section built in React. Get ready to empower your web presence and captivate your audience with a harmonious blend of technology and content.

Installing React

These are the initial steps to create your application in react.

Step 1: Environment Setup

Before you start, make sure you have Node.js installed on your computer, as React requires Node.js to run. You can download it from https://nodejs.org/.

Step 2: Create a new React application

To create a new application in React, you can use the official command line tool called "Create React App". Open your terminal and run the following command:

npx create-react-app my-personal-site

Step 3: Navigate to the Application Directory

After creating the application, navigate to the directory where it was generated using the command:

cd my-personal-site

Step 4: Run the Application

Once you are in the application directory, you can start a development server to see how your application looks in the browser. Run the following command:

npm start

Step 5: Declaring Variables

To save the list posts, the username that you have on dev.to and last the URL path for the API.

const [posts, setPosts] = useState([]);
const USERNAME = 'jcvb';
const DEV_TO_API =  `https://dev.to/api/articles?username=${USERNAME}`; 

Step 6: Get the posts

Used the useEffect hook to fetch the data after the component mounts. The empty dependency array ([]) ensures that the effect runs only once, similar to the behavior of componentDidMount in class components.

useEffect(() => {
  async function fetchPosts() {
    try {
      const response = await fetch(DEV_TO_API);
      const postsData = await response.json();
      setPosts(postsData);
    } catch (error) {
      console.error('Error fetching posts:', error);
    }
  }

  fetchPosts();
}, []); // Empty dependency array means this effect runs once after mount

Step 7: Render the results

Added a key prop to each

return (
  <div>
    <h1>Post Lists</h1>
    {posts.length > 0 ? (
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    ) : (
      <p>No posts available.</p>
    )}
  </div>
);