7. Develop a React Application featuring a ProfileCard component to display a user’s profile information, including their name, profile picture, and bio. The component should demonstrate flexibility by utilizing both external CSS and inline styling for its design. Display the following information: Profile picture, User’s name, A short bio or description Use an external CSS file for overall structure and primary styles, such as layout, colors, and typography. Apply inline styles for dynamic or specific styling elements, such as background colors or alignment. Design the ProfileCard to be visually appealing and responsive. Ensure the profile picture is displayed as a circle, and the name and bio are appropriately styled. Add hover effects or animations to enhance interactivity. Allow the background color of the card to change dynamically based on a prop or state.
Step 1: Create a New React Application
First, you need to create a new React app using below command. Open your terminal and run:
npx create-react-app profile-card-appThis will set up a new React project in a folder called profile-card-app. After the installation is complete, navigate to the project directory:
cd profile-card-appStep 2: Set Up the Folder Structure
- Inside the
srcfolder, create a new fileProfileCard.jsto define the ProfileCard component. - After that copy and paste below code in the
ProfileCard.jsfile.
ProfileCard.js:
import React, { useState } from 'react';
const ProfileCard = ({ name, bio, profilePicture }) => {
const [bgColor, setBgColor] = useState('#f0f0f0');
const handleMouseEnter = () => {
setBgColor('#d1c4e9');
};
const handleMouseLeave = () => {
setBgColor('#f0f0f0');
};
return (
<div
className="profile-card"
style={{ backgroundColor: bgColor }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<img
src={profilePicture}
alt={`${name}'s profile`}
className="profile-picture"
/>
<div className="profile-info">
<h2 className="profile-name">{name}</h2>
<p className="profile-bio">{bio}</p>
</div>
</div>
);
};
export default ProfileCard;
Step 3: Modify the App.js File
- Inside the
srcfolder modify the src/App.js file. - Now, use the
ProfileCardcomponent inApp.jsand pass sample data to display a user’s profile.
import React from 'react';
import ProfileCard from './ProfileCard';
import './App.css'
const App = () => {
return (
<div className="App">
<ProfileCard
name="vtucircle"
bio="vtucircle is the website which provides all the required VTU notes, syllabus, model papers, previous
year papers of 2021 | 2022 scheme for BE students."
profilePicture="https://vtucircle.com/wp-content/uploads/2024/11/cropped-vtucircle_icon-1.png"
/>
</div>
);
};
export default App;Step 3: Modify the App.css
- You can adjust the styling if desired. For example, you can modify
App.cssto ensure the profile look good. Copy the below code and paste it in the App.css file.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.profile-card {
width: 320px;
padding: 30px;
border-radius: 15px;
text-align: center;
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
cursor: pointer;
overflow: hidden;
margin: 20px;
}
.profile-card-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.profile-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
background-color: #f3f4f6;
}
.profile-picture {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profile-card:hover .profile-picture {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.profile-info {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.profile-name {
font-size: 1.8rem;
font-weight: 600;
color: #333;
margin-bottom: 15px;
transition: color 0.3s ease;
}
.profile-card:hover .profile-name {
color: #5e35b1;
}
.profile-bio {
font-size: 1.1rem;
color: #555;
line-height: 1.5;
margin-bottom: 0;
transition: color 0.3s ease;
}
.profile-card:hover .profile-bio {
color: #444;
}
.profile-card-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #f4f7fa;
}Step 4: Start the Development Server
- In the terminal inside VSCode, run the following command to start the React development.
npm start- This will open your browser and navigate to
http://localhost:3000/. You should see yourProfileCardapplication up and running.
OUTPUT:
“Fixing the Module not found: Error: Can't resolve 'web-vitals' Error in React”
The error you’re seeing occurs because the web-vitals package, which is used for performance monitoring in a React app, is not installed by default in the project or has been removed. Since web-vitals is an optional package, you can safely resolve this issue by either installing the package or removing the code that imports it.
Option 1: Install the web-vitals package
If you want to keep the performance monitoring functionality and resolve the error, simply install the web-vitals package.
- In the terminal, navigate to your project folder (if not already there):
cd profile-card-app- Install
web-vitalsby running the following command:
npm install web-vitals- After installation is complete, restart the development server:
npm startThis should resolve the error, and your application should compile correctly.
Option 2: Remove the Web Vitals Code (If Not Needed)
If you don’t need performance monitoring and want to get rid of the error, you can safely remove the import and usage of web-vitals from your code.
- Open
src/reportWebVitals.jsand remove its contents or just comment out the code:
// import { reportWebVitals } from './reportWebVitals';
// You can safely remove the call to reportWebVitals or leave it commented out
// reportWebVitals();- Save the file, and the application should compile without the error. You can now continue developing your app.