<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InstaGrowth - Grow Your Instagram</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
</style>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect } = React;
// Main App Component
function App() {
const \[tab, setTab\] = useState('dashboard');
const \[profile, setProfile\] = useState(null);
const \[posts, setPosts\] = useState(\[\]);
const \[analytics, setAnalytics\] = useState({});
const \[growthPlan, setGrowthPlan\] = useState(\[\]);
const \[username, setUsername\] = useState('');
// Mock data - Replace with real Instagram API calls
useEffect(() => {
if (username) {
fetchProfileData(username);
}
}, \[username\]);
const fetchProfileData = async (user) => {
// Simulate API call (replace with real Instagram Basic Display API)
const mockData = {
profile: {
username: user,
followers: 1245,
following: 890,
posts: 67,
bio: "📸 Content Creator | DM for collabs",
profilePic: "https://via.placeholder.com/150"
},
analytics: {
engagementRate: 3.2,
bestTime: "8-10 AM",
topHashtags: \["#photography", "#instagood", "#travel"\],
growthRate: 2.1
},
recentPosts: \[
{ id: 1, likes: 245, comments: 23, caption: "Sunset vibes 🌅 #photography" },
{ id: 2, likes: 189, comments: 15, caption: "Morning coffee ☕ #coffee" }
\]
};
setProfile(mockData.profile);
setAnalytics(mockData.analytics);
setPosts(mockData.recentPosts);
generateGrowthPlan(mockData);
};
const generateGrowthPlan = (data) => {
const plan = \[
{
day: "Today",
tasks: \[
\`Post at ${data.analytics.bestTime} with #${data.analytics.topHashtags\[0\]}\`,
"Engage with 30 accounts in your niche",
"Story with poll/question sticker"
\]
},
{
day: "Tomorrow",
tasks: \[
"Collaborate with 1-2 similar accounts",
"Use 5-10 targeted hashtags",
"Reply to all comments within 1 hour"
\]
}
\];
setGrowthPlan(plan);
};
const HashtagGenerator = () => {
const \[niche, setNiche\] = useState('');
const \[hashtags, setHashtags\] = useState(\[\]);
const generateHashtags = () => {
const hashtagSets = {
photography: \["#photography", "#photooftheday", "#instaphoto", "#capture", "#art"\],
fitness: \["#fitness", "#gymlife", "#workout", "#fitfam", "#health"\],
food: \["#foodie", "#foodporn", "#instafood", "#yum", "#delicious"\]
};
setHashtags(hashtagSets\[niche\] || \[\]);
};
return (
<div className="bg-white p-6 rounded-xl shadow-lg">
<h3 className="text-xl font-bold mb-4">🎯 Hashtag Generator</h3>
<input
type="text"
placeholder="Your niche (photography, fitness, food...)"
value={niche}
onChange={(e) => setNiche(e.target.value)}
className="w-full p-3 border rounded-lg mb-4"
list="niche-suggestions"
/>
<datalist id="niche-suggestions">
<option value="photography"/>
<option value="fitness"/>
<option value="food"/>
<option value="travel"/>
<option value="fashion"/>
</datalist>
<button
onClick={generateHashtags}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 rounded-lg font-semibold hover:from-purple-600"
>
Generate Hashtags
</button>
{hashtags.length > 0 && (
<div className="mt-4">
<p className="font-semibold mb-2">Copy these hashtags:</p>
<div className="bg-gray-100 p-3 rounded-lg">
{hashtags.map((tag, i) => (
<span key={i} className="bg-white px-3 py-1 rounded-full text-sm mr-2 mb-2 inline-block cursor-pointer hover:bg-gray-200">
{tag}
</span>
))}
</div>
</div>
)}
</div>
);
};
const ContentCalendar = () => {
const \[calendar, setCalendar\] = useState(\[\]);
useEffect(() => {
setCalendar(\[
{ day: "Mon", type: "Reel", time: "9 AM", theme: "Behind the scenes" },
{ day: "Wed", type: "Carousel", time: "8 PM", theme: "Tips & tricks" },
{ day: "Fri", type: "Story", time: "7 PM", theme: "Q&A session" }
\]);
}, \[\]);
return (
<div className="bg-white p-6 rounded-xl shadow-lg">
<h3 className="text-xl font-bold mb-4">📅 Content Calendar</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{calendar.map((item, i) => (
<div key={i} className="border p-4 rounded-lg bg-gradient-to-br from-blue-50 to-indigo-50">
<div className="font-bold text-lg">{item.day}</div>
<div className="text-sm text-gray-600">{item.type}</div>
<div className="text-sm font-semibold mt-1">{item.time}</div>
<div className="text-sm mt-2 bg-white px-2 py-1 rounded text-center">{item.theme}</div>
</div>
))}
</div>
</div>
);
};
return (
<div className="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 py-8 px-4">
<div className="max-w-6xl mx-auto">
{/\* Header \*/}
<div className="text-center mb-12">
<h1 className="text-5xl font-bold bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600 bg-clip-text text-transparent mb-4">
🚀 InstaGrowth
</h1>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Grow your Instagram organically with data-driven strategies
</p>
</div>
{/\* Profile Input \*/}
{!profile ? (
<div className="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-2xl">
<h2 className="text-2xl font-bold mb-6 text-center">Enter your Instagram username</h2>
<div className="flex gap-3">
<input
type="text"
placeholder="@username"
value={username}
onChange={(e) => setUsername(e.target.value.replace('@', ''))}
className="flex-1 p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none font-semibold"
/>
<button
onClick={() => username && fetchProfileData(username)}
className="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl font-bold hover:from-purple-600 shadow-lg hover:shadow-xl transition-all"
>
Analyze
</button>
</div>
</div>
) : (
<>
{/\* Dashboard Tabs \*/}
<div className="flex justify-center mb-8">
{\['dashboard', 'hashtags', 'calendar', 'plan'\].map(t => (
<button
key={t}
onClick={() => setTab(t)}
className={\`px-6 py-3 mx-2 rounded-full font-semibold transition-all ${
tab === t
? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
: 'bg-white text-gray-700 hover:bg-gray-50 shadow-md'
}\`}
>
{t === 'dashboard' && '📊 Dashboard'}
{t === 'hashtags' && '🎯 Hashtags'}
{t === 'calendar' && '📅 Calendar'}
{t === 'plan' && '📈 Growth Plan'}
</button>
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/\* Main Content \*/}
{tab === 'dashboard' && (
<>
{/\* Profile Card \*/}
<div className="lg:col-span-2 bg-white p-8 rounded-2xl shadow-xl">
<div className="flex items-center gap-6">
<img
src={profile.profilePic}
alt="Profile"
className="w-20 h-20 rounded-full border-4 border-purple-200"
/>
<div>
<h2 className="text-3xl font-bold">@{profile.username}</h2>
<div className="grid grid-cols-3 gap-6 mt-4 text-center">
<div>
<div className="text-2xl font-bold text-green-600">{profile.followers.toLocaleString()}</div>
<div className="text-sm text-gray-600">Followers</div>
</div>
<div>
<div className="text-2xl font-bold">{profile.following.toLocaleString()}</div>
<div className="text-sm text-gray-600">Following</div>
</div>
<div>
<div className="text-2xl font-bold">{profile.posts}</div>
<div className="text-sm text-gray-600">Posts</div>
</div>
</div>
</div>
</div>
</div>
{/\* Analytics Cards \*/}
<div className="bg-gradient-to-br from-emerald-500 to-teal-600 text-white p-6 rounded-xl shadow-lg">
<div className="text-3xl font-bold">{analytics.engagementRate}%</div>
<div className="text-lg opacity-90">Engagement Rate</div>
</div>
<div className="bg-gradient-to-br from-blue-500 to-indigo-600 text-white p-6 rounded-xl shadow-lg">
<div className="text-3xl font-bold">{analytics.growthRate}%</div>
<div className="text-lg opacity-90">Weekly Growth</div>
</div>
</>
)}
{/\* Hashtag Generator \*/}
{tab === 'hashtags' && <HashtagGenerator />}
{/\* Content Calendar \*/}
{tab === 'calendar' && <ContentCalendar />}
{/\* Growth Plan \*/}
{tab === 'plan' && (
<div className="lg:col-span-2 bg-white p-8 rounded-xl shadow-lg">
<h3 className="text-2xl font-bold mb-6">📈 Your 7-Day Growth Plan</h3>
<div className="space-y-4">
{growthPlan.map((dayPlan, i) => (
<div key={i} className="border-l-4 border-purple-500 pl-6 py-4 bg-purple-50 rounded-r-xl">
<h4 className="font-bold text-xl mb-3">{dayPlan.day}</h4>
<ul className="space-y-2">
{dayPlan.tasks.map((task, j) => (
<li key={j} className="flex items-start">
<span className="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
{task}
</li>
))}
</ul>
</div>
))}
</div>
</div>
)}
</div>
</>
)}
</div>
</div>
);
}
// Render the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
