// instagram.jsx — Instagram tutorial with 5 tabs + posts/stories/reels const IG_BG = '#fafafa'; const IG_BORDER = '#dbdbdb'; const IG_GRAY = '#737373'; const IG_INK = '#262626'; const IMG = 'project/images'; const PHOTOS = { mom: `${IMG}/mom-profile.jpg`, saahil: `${IMG}/saahil-profile.jpg`, pooja: `${IMG}/pooja-profile.jpg`, inder: `${IMG}/inder-profile.jpg`, osher: `${IMG}/osher-profile.jpg`, ucsf: `${IMG}/ucsf-profile.svg`, massages: `${IMG}/post-massages.jpg`, // filler photos for grids / explore fillers: [1,2,3,4,5,6,7,8,9,10,11,12].map(i => `${IMG}/photo-${i}.jpg`), }; // Every uploaded photo, shuffled once per page load. Sliced into the // explore grid (9 tiles) + profile grid (6 tiles) so every photo // appears at least once across the two — 13 unique → 15 slots. function shuffle(arr) { const a = [...arr]; for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } const ALL_PHOTOS = shuffle([PHOTOS.massages, ...PHOTOS.fillers]); const EXPLORE_PHOTOS = ALL_PHOTOS.slice(0, 9); // Last 4 unique photos + 2 borrowed from the explore half (shuffled so they vary). // Each grid stays dupe-free; a photo can appear in both grids. const PROFILE_PHOTOS = [...ALL_PHOTOS.slice(9), ...shuffle(ALL_PHOTOS.slice(0, 9)).slice(0, 2)]; // ─── Inline icons (outline + filled) ─── const igIcon = { home: (filled) => filled ? : , reels: (filled) => filled ? : , msg: (filled) => filled ? : , search: (filled) => filled ? : , }; // ─── Bottom tab bar ─── function IGTabBar({ tab, setTab, dark = false }) { const items = [ { id: 'home', icon: igIcon.home }, { id: 'reels', icon: igIcon.reels }, { id: 'msg', icon: igIcon.msg }, { id: 'search', icon: igIcon.search }, ]; return (
{items.map(it => ( ))}
); } // ─── Story ring ─── function StoryRing({ name, you, viewed, src }) { return (
{you && (
+
)}
{you ? 'Your story' : name}
); } // ─── Home Feed ─── function IGHome() { return (
{/* header */}
Instagram
{/* stories rail */}
{/* one post */}
saahilmishra20
···
{/* actions */}
1,247 likes
saahilmishra20 just got massages with mom!
2 HOURS AGO
); } // ─── Reels ─── function IGReels() { return (
{/* top header */}
Reels Friends
{/* on-screen joke text */}
Studies show crime rates are the lowest on Mother's Day.
I think that says a lot about how many moms are out there committing crimes but can't today to have brunch with their kids.
{/* caption */}
tracybordewyk Follow
happy mother's day to all the law-abiding moms out there 💐
{/* right rail */}
{[['♡', '115K'], ['💬', '923'], ['↻', '3.1K'], ['↗', '134K']].map(([i, n]) => (
{i}
{n}
))}
); } // ─── Messages ─── function IGMessages() { const dms = [ { name: 'Pooja Aswani', msg: 'Sent 2h ago', src: PHOTOS.pooja }, { name: 'Inder OG', msg: 'Sent 5h ago', src: PHOTOS.inder }, { name: 'UCSF', msg: 'Seen 1d ago', src: PHOTOS.ucsf }, { name: 'Osher Center', msg: 'You\'re now friends. Say hi!', src: PHOTOS.osher }, { name: 'Saahil ♥', msg: 'love you mom!', src: PHOTOS.saahil }, ]; return (
lebron_of_moms ▾
Search or ask Meta AI
{/* notes / friend stories */}
{[ { n: 'You', src: PHOTOS.mom }, { n: 'Pooja', src: PHOTOS.pooja }, { n: 'Inder', src: PHOTOS.inder }, { n: 'Map', src: null }, ].map(({ n, src }, i) => (
{n}
))}
Messages
Requests
{dms.map((d, i) => (
{d.name}
{d.msg}
))}
); } // ─── Search / Explore grid ─── function IGSearch() { const labels = ['904K','148K','1.9M','224K','720K','511K','252K','789K','1.2M']; const tiles = labels.map((l, i) => ({ src: EXPLORE_PHOTOS[i], l })); return (
Search with Meta AI
{['For you', '+', 'Eyes', 'Healing', 'Yoga'].map((t, i) => (
{t}
))}
{tiles.map((t, i) => (
▶ {t.l}
))}
); } // ─── Profile ─── function IGProfile({ momName }) { return (
🔒 lebron_of_moms ▾
+
{[['12', 'posts'], ['1,279', 'followers'], ['1,326', 'following']].map(([n, l]) => (
{n}
{l}
))}
{momName}
SF · radiation oncologist · Osher Center · ♥
Edit profile
Share profile
{PROFILE_PHOTOS.map((src, i) => (
))}
); } // ─── Concept card: posts vs stories vs reels ─── function ContentTypesCard() { const types = [ { name: 'Posts', desc: 'Photos or videos that live on your profile forever. People can like and comment.', accent: '#d4665a', icon: '◧' }, { name: 'Stories', desc: 'Photos or videos that disappear after 24 hours. Casual — like a daily diary.', accent: '#7d8c6a', icon: '○' }, { name: 'Reels', desc: 'Short vertical videos meant to entertain — like TikToks. Anyone can see them.', accent: '#1f1a14', icon: '▶' }, ]; return (
Cheat sheet
Posts vs Stories vs Reels
{types.map(t => (
{t.icon}
{t.name}
{t.desc}
))}
); } // ─── Main ─── function InstagramLesson() { const [step, setStep] = React.useState(0); const [tab, setTab] = React.useState('home'); const steps = [ { title: 'The five tabs', desc: 'Instagram has five main pages, all reachable from the bar at the bottom. Tap any one to switch.', tab: 'home' }, { title: 'Home — your feed', desc: 'Posts and stories from people you follow. Stories sit in a row up top; posts scroll below.', tab: 'home' }, { title: 'Reels — short videos', desc: 'Bite-sized vertical videos. Swipe up for the next one. Anyone\'s reel can show up here.', tab: 'reels' }, { title: 'Messages — DMs', desc: 'Texts with friends, plus their "notes" up top. Tap the camera icon next to a name to send a photo.', tab: 'msg' }, { title: 'Search — the explore page', desc: 'A grid of posts and reels Instagram thinks you\'ll like. Search a username at the top to find someone.', tab: 'search' }, { title: 'Profile — your space', desc: 'Your posts, follower count, and bio. Tap Edit profile to change your name, photo, or bio.', tab: 'profile' }, { title: 'Posts vs Stories vs Reels', desc: 'These are the three things you can post. They live in different places and last for different times — see the card on the right.', tab: 'concept' }, ]; React.useEffect(() => { if (steps[step].tab !== 'concept') setTab(steps[step].tab); }, [step]); const screen = tab === 'home' ? : tab === 'reels' ? : tab === 'msg' ? : tab === 'search' ? : ; const isConcept = steps[step].tab === 'concept'; return (
Instagram, without the noise.} sub="Five tabs, three kinds of posts. Once you know those, the whole app makes sense." eyebrow="Approx · 4 min" time="iPhone · iOS 26"/>
{isConcept ? ( ) : (
{screen}
)}
); } Object.assign(window, { InstagramLesson });