import React, { useState, useEffect } from 'react';

import { motion } from 'framer-motion';

const Dashboard = () => {

const [data, setData] = useState([]);

useEffect(() => {

async function fetchData() {

const response = await fetch('/api/stats');

const result = await response.json();

setData(result);

}

fetchData();

}, []); // The empty dependency array ensures this effect runs only once after the initial render

return (

// Your JSX for rendering the dashboard goes here

// For example:

// <motion.div className="p-6 rounded-lg shadow-lg">

// <h1>Dashboard</h1>

// {/* Render your data here */}

// {data.length > 0 ? (

// <ul>

// {data.map((item, index) => (

// <li key={index}>{JSON.stringify(item)}</li>

// ))}

// </ul>

// ) : (

// <p>Loading data...</p>

// )}

// </motion.div>

<motion.div className="p-6 rounded-lg shadow-lg">

{/* The rest of your dashboard JSX content will go here */}

</motion.div>

);

};

export default Dashboard;

const express = require('express');

const app = express();

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

app.use(express.json());

app.get('/api/stats', async (req, res) => {

try {

const stats = await prisma.stats.findMany({

include: {

user: true, // Includes the related user data

category: true // Includes the related category data

}

});

// Assuming the next line would be to send the stats back as JSON

res.json(stats);

} catch (error) {

console.error('Error fetching stats:', error);

res.status(500).json({ error: 'Failed to fetch statistics' });

}

});

// Any additional routes or server configurations would go here

// You would typically start the server listening on a port at the end of the file

// For example:

// const PORT = process.env.PORT || 3000;

// app.listen(PORT, () => {

// console.log(`Server is running on port ${PORT}`);

// });

// The bottom of the image shows: "Experienced with server-side technologies:"

// This is likely a heading for a section of a resume or portfolio mentioning skills.

import React, { useState, useEffect } from 'react';

import { motion } from 'framer-motion';

const Dashboard = () => {

const [data, setData] = useState([]);

useEffect(() => {

async function fetchData() {

const response = await fetch('/api/stats');

const result = await response.json();

setData(result);

}

fetchData();

}, []); // The empty dependency array ensures this effect runs only once after the initial render

return (

// Your JSX for rendering the dashboard goes here

// For example:

// <motion.div className="p-6 rounded-lg shadow-lg">

// <h1>Dashboard</h1>

// {/* Render your data here */}

// {data.length > 0 ? (

// <ul>

// {data.map((item, index) => (

// <li key={index}>{JSON.stringify(item)}</li>

// ))}

// </ul>

// ) : (

// <p>Loading data...</p>

// )}

// </motion.div>

<motion.div className="p-6 rounded-lg shadow-lg">

{/* The rest of your dashboard JSX content will go here */}

</motion.div>

);

};

export default Dashboard;

const express = require('express');

const app = express();

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

app.use(express.json());

app.get('/api/stats', async (req, res) => {

try {

const stats = await prisma.stats.findMany({

include: {

user: true, // Includes the related user data

category: true // Includes the related category data

}

});

// Assuming the next line would be to send the stats back as JSON

res.json(stats);

} catch (error) {

console.error('Error fetching stats:', error);

res.status(500).json({ error: 'Failed to fetch statistics' });

}

});

// Any additional routes or server configurations would go here

// You would typically start the server listening on a port at the end of the file

// For example:

// const PORT = process.env.PORT || 3000;

// app.listen(PORT, () => {

// console.log(`Server is running on port ${PORT}`);

// });

// The bottom of the image shows: "Experienced with server-side technologies:"

// This is likely a heading for a section of a resume or portfolio mentioning skills.