Mastering Claude AI Artifacts: AI-Powered Coding Tutorial -Build a University Rankings Dashboard

Harnessing Claude AI Artifacts to Build an Interactive Sri Lankan University Rankings Dashboard

In this blog post, we’ll explore how to use Claude AI’s powerful new artifacts feature to create an interactive dashboard and website for Sri Lankan university rankings. Follow along as we break down the process into five key steps, demonstrating how AI can revolutionize your development workflow.

Introduction to Claude Artifacts

Claude AI’s artifacts feature is a game-changer for developers, allowing for collaborative creation of code, visualizations, and more. This tool enables rapid prototyping and iterative development, making it easier than ever to bring your ideas to life.

Enabling Artifacts

Before we begin, ensure that you have artifacts enabled in your Claude AI interface. This feature allows Claude to generate and modify code snippets, making our development process smooth and efficient.

Data Dashboards and Landing pages in action:

Data Dashboard on Best Universities in Sri Lanka

https://claude.site/artifacts/a8c050e8-a272-4a86-b61c-40137805b90f

Ranking Table and Data Dashboard

https://claude.site/artifacts/bbc8feaf-259f-4b77-9c84-e71eecc75e30

https://claude.site/artifacts/b1dda6b4-ca73-4081-be62-026253fb4b69

Step 1: Data Preparation (University Ranking)

Our first step is to prepare the data for our dashboard. We’ll use the latest Webometrics ranking data for Sri Lankan universities. Claude can assist in cleaning and structuring this data, ensuring it’s ready for use in our visualization.

“`json

[

  {

    “name”: “University of Colombo”,

    “worldRank”: 1589,

    “nationalRank”: 1,

    “impactRank”: 1423

  },

  {

    “name”: “University of Peradeniya”,

    “worldRank”: 2056,

    “nationalRank”: 2,

    “impactRank”: 1876

  },

  // … more university data …

]

“`

This structured data will serve as the foundation for our dashboard.

Step 2: Creating Data Dashboard

Now, let’s create the core of our project: the data dashboard. We’ll use React to build a component with the following features:

1. Bar Chart: Displaying world rankings of top 10 Sri Lankan universities

2. Search Functionality: Allowing users to filter universities by name

3. University Cards: Showing detailed information for each institution

“`

import React, { useState } from ‘react’;

import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from ‘recharts’;

import { Card, CardHeader, CardContent } from ‘@/components/ui/card’;

import { Input } from ‘@/components/ui/input’;

const Dashboard = ({ universityData }) => {

  const [searchTerm, setSearchTerm] = useState(”);

  const filteredData = universityData.filter(uni => 

    uni.name.toLowerCase().includes(searchTerm.toLowerCase())

  );

  return (

    <div className=”p-4″>

      <Input 

        placeholder=”Search universities…” 

        onChange={(e) => setSearchTerm(e.target.value)}

        className=”mb-4″

      />

      <ResponsiveContainer width=”100%” height={300}>

        <BarChart data={filteredData.slice(0, 10)}>

          <XAxis dataKey=”name” />

          <YAxis />

          <Tooltip />

          <Bar dataKey=”worldRank” fill=”#8884d8″ />

        </BarChart>

      </ResponsiveContainer>

      <div className=”grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4″>

        {filteredData.map(uni => (

          <Card key={uni.name}>

            <CardHeader>{uni.name}</CardHeader>

            <CardContent>

              <p>World Rank: {uni.worldRank}</p>

              <p>National Rank: {uni.nationalRank}</p>

              <p>Impact Rank: {uni.impactRank}</p>

            </CardContent>

          </Card>

        ))}

      </div>

    </div>

  );

};

export default Dashboard;

“`

This component uses the shadcn/ui library for UI elements and Recharts for the bar chart visualization.

Step 3: Styling the Dashboard

To enhance the visual appeal of our dashboard, we’ll add custom CSS styles. We’ll ensure the design is responsive and user-friendly.

“`css

.dashboard-container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

}

.university-card {

  transition: transform 0.3s ease-in-out;

}

.university-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

@media (max-width: 768px) {

  .dashboard-container {

    padding: 10px;

  }

}

“`

These styles will give our dashboard a polished, professional look.

Step 4: Publishing the Dashboard

With our dashboard component and styles ready, it’s time to publish our project:

1. Export the complete code, including the React component and CSS.

2. Choose a hosting platform like Vercel, Netlify, or GitHub Pages.

3. Deploy the application to your chosen platform.

4. Test the live version thoroughly.

5. Share the link on studentlanka.com and gather user feedback.

Interactive and Searchable

Our dashboard is now live, interactive, and searchable. Users can easily filter universities and explore the rankings data.

Step 5: Creating a Website Landing Page

Finally, let’s create a landing page to introduce our dashboard:

“`

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Sri Lanka University Rankings 2024</title>

    <link href=”https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css” rel=”stylesheet”>

</head>

<body class=”bg-gray-100″>

    <header class=”bg-blue-600 text-white p-4″>

        <h1 class=”text-2xl font-bold”>Sri Lanka University Rankings 2024</h1>

    </header>

    <main class=”container mx-auto mt-8 p-4″>

        <section class=”mb-8″>

            <h2 class=”text-xl font-semibold mb-4″>Explore University Rankings</h2>

            <p class=”mb-4″>Welcome to our interactive dashboard showcasing the latest rankings of Sri Lankan universities. Use our tool to:</p>

            <ul class=”list-disc list-inside mb-4″>

                <li>Compare world rankings of top Sri Lankan universities</li>

                <li>Search for specific institutions</li>

                <li>View detailed information on each university</li>

            </ul>

            <a href=”#dashboard” class=”bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition”>Launch Dashboard</a>

        </section>

        <section id=”dashboard”>

            <!– Dashboard component will be rendered here –>

        </section>

    </main>

    <footer class=”bg-gray-200 p-4 mt-8″>

        <p class=”text-center”>&copy; 2024 StudentLanka. All rights reserved.</p>

    </footer>

</body>

</html>

“`

This landing page introduces the dashboard and provides context for users.

Conclusion

We’ve created a powerful, interactive dashboard for exploring Sri Lankan university rankings by leveraging Claude AI’s artifacts feature. This approach demonstrates how AI can accelerate the development process and help create engaging data visualizations. We encourage you to try out Claude’s artifacts feature for your own projects and explore the possibilities of AI-assisted development.

Comments

comments