Create Instagram Profile Clone using Instagram API

Here, we are going to create Instagram profile clone using Svelte. To get Instagram profile data we have used Instagram open API (https://instagram.com/{username}?__a=1). Both the data about a particular profile and it's respective posts can be obtained using this data. "Profile.svelte" and "Posts.svelte" is implemented to show profile related data and the corresponding posts of a user respectively.

App.svelte

<script>
	import Profile from './Profile.svelte';
	import Posts from './Posts.svelte';
	let username = "";
	let INSTA = "https://instagram.com/";
	let user = null;
	let posts = null;
	async function searchUser(){
		let res = await fetch(INSTA+username+"?__a=1",{
			method:"GET"
		});
		let data = await res.json();
		console.log(data);
		user = data.graphql.user;
		posts = user.edge_owner_to_timeline_media.edges;
	}
</script>

<style>
	.header {
		padding:10px 0px;
		text-align:center;
		background:#111;
	}
</style>

<div class="header">
	<input type="text" bind:value={username}/>
	<button on:click={searchUser}>
		Search
	</button>
</div>
{#if user}
	<Profile {user}/>
	<Posts {posts} />
{/if}

Posts.svelte

<script>
	export let posts;
</script>

<style>
	.posts {
		margin-top:10px;
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.posts .post {
		width:48%;
	}
	.posts .post img {
		width:100%;
		height:220px;
		object-fit:cover;
	}
</style>

<div class="posts">
	{#each posts as post}
		<div class="post">
			<img src={post.node.display_url} alt="">	
		</div>
	{/each}
</div>

Profile.svelte

<script>
	export let user;
</script>

<style>
	.profile {
		padding:20px 50px;
		background:#eee;
		display:flex;
	}
	.profile * {
		margin:0px;
	}
	.profile .avatar {
		width:150px;
		text-align:center;
	}
	.profile .avatar img {
		width:120px;
		border-radius:50%;
	}
	.profile .info {
		flex:1;
		padding-left:10px;
	}
	.profile .info p {
		margin:10px 0px;
	}
	.profile .info .counts {
		display:flex;
	}
	.profile .info .counts > div {
		width:33.33%;
	}
</style>

<div class="profile">
	<div class="avatar">
		<img src={user.profile_pic_url_hd} alt="Profile Photo">
	</div>
	<div class="info">
		<h2>
			{user.full_name}
		</h2>
		<p>
			{user.biography}
		</p>
		<div class="counts">
			<div>
				<div>
					Followers
				</div>
				<div>
					{user.edge_followed_by.count}
				</div>
			</div>
			<div>
				<div>
					Following
				</div>
				<div>
					{user.edge_follow.count}
				</div>
			</div>
			<div>
				<div>
					Posts
				</div>
				<div>
					{user.edge_owner_to_timeline_media.count}
				</div>
			</div>
		</div>
	</div>
</div>