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

element to provide a unique identifier for React to efficiently update the list.

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>
);

Final result

Comments

[Vincent A. Cicirello]

Hi. Nice example of using DEV api to fetch posts. I have a suggestion related to the tags you used for this post. Instead of tagging with #devto, consider using the tag #meta which DEV uses for posts about DEV.

[Juan Carlos Valerio Barreto]

For sure man

[Giuliano1993]

Nice post! I actually have this on my personal site, I think it is realy good to be able to showcase your dev articles, i would've probably appreciated to read this in the moment i was implementing it 😃

[Juan Carlos Valerio Barreto]

For sure, man, I think this article helps other people to show their posts.

[Ashutosh Mishra]

Short and to the point article!

[Juan Carlos Valerio Barreto]

Thanks man!

[Raja MSR]

Thank you for sharing this informative article on unlocking your Dev.to portfolio. Your article was well-written and easy to understand.

[Juan Carlos Valerio Barreto]

Thanks, buddy!