In today’s digital world, social media platforms like Instagram play a crucial role in online interaction. Whether you’re a developer looking to understand API integration or a business seeking to showcase an Instagram-like profile, building a dynamic profile page can be an excellent project. In this article, we explore the creation of an Instagram-style profile page that dynamically fetches user details and posts using JavaScript and PHP.
Follow this video for complete guidance:
Full Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Profile</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
nav {
background: white;
border-bottom: 1px solid #dbdbdb;
padding: 10px 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
}
.profile-container {
max-width: 935px;
margin: 80px auto 0;
padding: 30px 20px;
}
.profile-header {
display: flex;
gap: 80px;
margin-bottom: 44px;
}
.profile-picture {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.profile-info {
flex: 1;
}
.profile-actions {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.username {
font-size: 28px;
font-weight: 300;
}
.edit-profile-btn {
background: transparent;
border: 1px solid #dbdbdb;
padding: 5px 9px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
.settings-btn {
cursor: pointer;
}
.profile-stats {
display: flex;
gap: 40px;
margin-bottom: 20px;
}
.stat {
font-size: 16px;
}
.stat span {
font-weight: 600;
}
.profile-bio {
font-size: 16px;
line-height: 1.5;
}
.profile-bio .name {
font-weight: 600;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.profile-post {
aspect-ratio: 1;
position: relative;
}
.profile-post img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
color: white;
font-weight: 600;
opacity: 0;
transition: opacity 0.2s;
}
.profile-post:hover .post-overlay {
opacity: 1;
}
@media (max-width: 735px) {
.profile-header {
flex-direction: column;
gap: 20px;
align-items: center;
text-align: center;
}
.profile-stats {
justify-content: center;
}
.profile-grid {
gap: 3px;
}
}
</style>
</head>
<body>
<nav>
<div style="font-size: 24px; font-weight: bold;">Instagram</div>
</nav>
<div class="profile-container">
<div class="profile-header">
<img id="profilePicture" alt="Profile Picture" class="profile-picture">
<div class="profile-info">
<div class="profile-actions">
<h2 id="username" class="username"></h2>
</div>
<div class="profile-stats">
<div class="stat"><span id="posts"></span> posts</div>
<div class="stat"><span id="followers"></span> followers</div>
<div class="stat"><span id="following"></span> following</div>
</div>
<div class="profile-bio">
<div id="fullname" class="name"></div>
<div id="bio"></div>
<div id="bioLinks"></div>
</div>
</div>
</div>
<div id="profileGrid" class="profile-grid">
</div>
</div>
<script>
const user = '<?php echo @$_GET['u'];?>';
const api = `https://youthsforum.com/instagram/${user}`;
// Function to fetch and display profile data
async function fetchProfile() {
try {
const response = await fetch(api);
const data = await response.json();
// Update profile details
document.getElementById('profilePicture').src = data.details.profile_picture.sm;
document.getElementById('username').textContent = data.details.username;
document.getElementById('posts').textContent = data.details.posts;
document.getElementById('followers').textContent = data.details.followers;
document.getElementById('following').textContent = data.details.following;
document.getElementById('fullname').textContent = data.details.fullname;
document.getElementById('bio').textContent = data.details.bio;
// Update bio links
const bioLinksContainer = document.getElementById('bioLinks');
data.details.bio_links.forEach(link => {
const div = document.createElement('div');
div.textContent = link;
bioLinksContainer.appendChild(div);
});
// Update posts grid
const profileGrid = document.getElementById('profileGrid');
data.posts.forEach(post => {
const postDiv = document.createElement('div');
postDiv.className = 'profile-post';
postDiv.innerHTML = `
<img src="${post.image}" alt="Post">
<div class="post-overlay">
<div>❤️ ${post.likes}</div>
<div>💬 ${post.comments}</div>
</div>
`;
profileGrid.appendChild(postDiv);
});
} catch (error) {
console.error('Error fetching profile:', error);
}
}
// Fetch profile data when page loads
document.addEventListener('DOMContentLoaded', fetchProfile);
</script>
</body>
</html>
Why Build an Instagram Profile Page?
Creating a profile page similar to Instagram offers multiple learning opportunities:
- Understanding how to fetch and display data dynamically.
- Implementing modern HTML, CSS, and JavaScript techniques.
- Creating an engaging user interface with responsive design.
- Using APIs to pull real-time information.
Key Features of the Profile Page
This Instagram-like profile page includes several essential features:
- Fixed Navigation Bar: A sleek top bar mimicking Instagram’s interface.
- Profile Header: Displays profile picture, username, follower count, post count, and a bio section.
- Editable Profile Actions: Includes buttons for interactions, making the interface interactive.
- Post Grid Layout: Shows a structured display of posts with overlays indicating likes and comments.
- Responsive Design: Ensures optimal viewing across different screen sizes.
How It Works
1. Fetching User Data
The page dynamically loads user data based on a query parameter (u) passed via URL. This enables users to see different profiles without modifying the code.
2. Using an API for Data Retrieval
The profile information and posts are fetched from an API endpoint (https://youthsforum.com/instagram/). The JavaScript code makes an asynchronous request to retrieve and populate the profile with real-time data.
3. Displaying Profile Details
The fetched data includes profile picture, username, follower count, and bio. These details are inserted into the appropriate elements on the webpage dynamically.
4. Creating a Dynamic Post Grid
Each post in the fetched data is displayed in a grid format. On hover, an overlay appears showing the number of likes and comments, enhancing user interaction.
5. Responsive Design for All Devices
The profile page is designed to be mobile-friendly using CSS media queries. This ensures that users get a seamless experience across devices.
Enhancements and Future Improvements
While this project effectively mimics an Instagram profile page, there are several ways to enhance it further:
- Adding User Authentication: Allow users to log in and view private accounts.
- Enabling Post Uploads: Implementing a feature to let users upload images.
- Live Updates: Using WebSockets or AJAX polling to fetch real-time updates.
- Dark Mode Support: Providing users with a toggle for dark mode.
This Instagram-style profile page is a great project for developers looking to improve their front-end and API integration skills. With dynamic data fetching, responsive design, and a user-friendly interface, it provides a solid foundation for building more advanced social media applications.
Start experimenting with this project, and who knows—you might just create the next big social media platform!
