Skip to content
DummyAPI Logo Docs Home

Building Dynamic Social Cards with Astro and DummyAPI

Astro, a cutting-edge web framework, is perfect for crafting fast, interactive websites. Combined with dummyapi.online, a superb resource for simulated API data, you have the tools to create dynamic and visually striking social cards. This tutorial provides a step-by-step approach, with alternative options, to effectively utilize Astro and dummyapi.online.

Setting Up Your Astro Project

Install PNPM: Start by installing PNPM, a fast, disk-efficient package manager. In your terminal, run:

Terminal window
brew install pnpm

Create a New Astro Project: Use the following command to initiate a new Astro project:

Terminal window
pnpm create astro@latest

Select these configurations during setup:

  • Project name: astro-social-cards
  • Template: basic
  • Install dependencies: Yes
  • Typescript: Yes
  • Strict: Default

Go to Your Project Directory:

Terminal window
cd astro-social-cards

Integrate Tailwind CSS: Add Tailwind CSS, a utility-first CSS framework, to your Astro project with:

Terminal window
npx astro add tailwind

Confirm Yes to the prompts.

Launch Development Server: To preview your project locally:

Terminal window
pnpm dev

Then, visit http://localhost:3000/ in your browser.

Organize Project Structure: Create a directory src/components for your components within the project.

Craft SocialCard Component: In src/components, make a file SocialCard.astro.

Implementing API Data

dummyapi.online offers an accessible way to fetch mock social profile data. This involves making an API call to dummyapi.online to populate our social cards.

Example from DummyAPI Social Profiles Endpoint

{
    "userId": 1,
    "username": "user123",
    "email": "user1@example.com",
    "profilePic": "https://placehold.co/400x400?text=user123+profile+pic",
    "bio": "This is a short user bio...",
    "homepage": "https://userwebsite.com",
    "hobbies": [
        "Photography",
        "Traveling",
        "Reading"
    ],
    "fullName": "John Doe",
    "location": "New York, USA",
    "birthDate": "1990-01-01",
    "followersCount": 1500,
    "followingCount": 300,
    "postsCount": 450,
    "joinedDate": "2015-06-01",
    "verifiedStatus": true,
    "languages": [
        "English",
        "Spanish"
    ],
    "education": "B.Sc in Computer Science",
    "work": "Software Developer at TechCorp",
    "relationshipStatus": "Single",
    "gender": "Male",
    "pronouns": "he/him",
    "interests": [
        "Artificial Intelligence",
        "Machine Learning"
    ],
    "coverPhoto": "https://placehold.co/600x400?text=user123+cover+pic",
    "privacySettings": {
        "showEmail": false,
        "showBirthDate": false
    },
    "lastActive": "2023-11-23",
    "statusMessage": "Exploring the world of AI!",
    "contactInfo": {
        "phone": "+1234567890",
        "secondaryEmail": "secondary@example.com"
    },
    "customFields": [
        {
            "fieldName": "FavoriteBook",
            "fieldValue": "1984 by George Orwell"
        }
    ]
},

Creating Social Cards

Modify the Index Page: Change src/pages/index.astro to:

---
import SocialCard from "../components/SocialCard.astro"


const response = await fetch("https://dummyapi.online/api/social-profiles")
const data = await response.json()
const socialProfiles = data
---


<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
    <meta name='viewport' content='width=device-width' />
    <meta name='generator' content={Astro.generator} />
    <title>Astro Social Cards</title>
  </head>
  <body class='min-h-screen w-full'>
    <h1 class='text-4xl'>Astro Social Cards</h1>
    <div
      class='grid grid-flow-row-dense grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 m-12'
    >
      {
        socialProfiles.map((profile: any) => (
          <SocialCard
            verifiedStatus={profile.verifiedStatus}
            userName={profile.username}
            profilePicUrl={profile.profilePic}
            bio={profile.bio}
            homepageUrl={profile.homepage}
            followersCount={profile.followersCount}
            lastActive={profile.lastActive}
          />
        ))
      }
    </div>
  </body>
</html>

Explanation:

  • We import the SocialCard component.
  • Fetch data from dummyapi.online’s /social-profiles endpoint.
  • Convert the response to JSON.

Populate SocialCard.astro: Add JSX code to SocialCard.astro:

---
interface Props {
  userName: string
  profilePicUrl: string
  bio: string
  homepageUrl: string
  followersCount: number
  verifiedStatus: boolean
  lastActive: string
}


const {
  userName,
  profilePicUrl,
  bio,
  homepageUrl,
  followersCount,
  verifiedStatus,
  lastActive,
} = Astro.props
---


<div
  class='bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 rounded-lg shadow-lg p-4'
>
  <img class='w-16 h-16 rounded-full mx-auto' src={profilePicUrl} alt='' />
  <p class='text-center font-bold text-2xl mt-2 text-white'>{userName}</p>
  {
    verifiedStatus && (
      <div class='flex items-center justify-center mt-2'>
        <svg
          class='w-4 h-4 text-green-500 mr-1'
          fill='currentColor'
          viewBox='0 0 20 20'
        >
          <path
            fill-rule='evenodd'
            d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 00-2 0v5a1 1 0 002 0V7z'
            clip-rule='evenodd'
          />
        </svg>
        <p class='text-center text-green-500'>Verified</p>
      </div>
    )
  }


  <p class='text-center text-gray-200 mt-2'>{bio}</p>
  <p class='text-center text-blue-500 mt-2'>
    <a href={homepageUrl} class='underline'>{homepageUrl}</a>
  </p>
  <p class='text-center mt-2 text-white'>
    Followers: {followersCount.toString()}
  </p>
  {
    lastActive && (
      <p class='text-center text-gray-200 mt-2'>Last Active: {lastActive}</p>
    )
  }
</div>

Final Result

To see the final, open your browser and visit http://localhost:4321/. You should be able to see a list of social cards with styling. You can further experiment from there.

Astro Social Cards

Conclusion

This tutorial highlights how Astro, combined with dummyapi.online, can be used to create dynamic social cards. Astro’s flexibility and dummyapi.online’s mock data make for an effective pairing in web development.

Key Points:

  • Astro’s efficiency in modern web development.
  • dummyapi.online as a reliable source of mock data.
  • The ease of integrating third-party APIs in Astro projects.

Continue exploring and enhancing your web development skills with these powerful tools.