Skip to content

Commit 3937d41

Browse files
Eric-Zhang-DeveloperEric-Zhang-Developer
authored
Merge pull request #26 from Eric-Zhang-Developer/feature/tutorial-page
Feature/tutorial page
2 parents 22d2a14 + 7c96b7e commit 3937d41

File tree

1 file changed

+132
-5
lines changed

1 file changed

+132
-5
lines changed

‎src/app/tutorial/page.tsx‎

Lines changed: 132 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,137 @@
1-
import Link from "next/link"
1+
import Link from "next/link";
2+
import { ArrowLeft } from "lucide-react";
23

34
export default function Tutorial() {
45
return (
5-
<main className="mx-auto container flex flex-col items-center">
6-
<h1 className="text-xl">Tutorial Page</h1>
7-
<Link href="/" className="text-lg bg-slate-300 p-4 border-2"> Go Back</Link>
8-
</main>
6+
<div className="font-text text-primary flex min-h-screen flex-col px-2 pt-5 pb-4 md:px-4 md:pt-10">
7+
<main className="container mx-auto flex flex-grow flex-col items-start gap-8 px-2 md:px-24">
8+
<Link
9+
href="/"
10+
className="text-secondary inline-flex items-center space-x-1 self-start py-2 pr-3 text-lg transition hover:scale-105"
11+
>
12+
<ArrowLeft></ArrowLeft>
13+
<p>Go Back</p>
14+
</Link>
15+
16+
<h1 className="font-main text-3xl md:text-5xl">
17+
How to Get Your Instagram Data Files
18+
</h1>
19+
20+
<section className="space-y-4">
21+
<h2 className="font-main text-2xl font-semibold">Step 1</h2>
22+
<ol className="text-secondary list-decimal space-y-2 pl-6 text-lg">
23+
<li>Open Instagram on your mobile device or web browser</li>
24+
<li>Go to your profile and tap the menu icon (three lines)</li>
25+
<li>
26+
Select <strong>Accounts Center</strong>
27+
</li>
28+
<li>
29+
Scroll down to <strong>Account settings</strong> and tap{" "}
30+
<strong>Your information and permissions</strong>
31+
</li>
32+
<li>
33+
Select <strong>Download your information</strong>
34+
</li>
35+
<li>
36+
Tap the <strong>Download or transfer information</strong> button
37+
</li>
38+
<li>
39+
Select the <strong>Some of your information</strong> button
40+
</li>
41+
<li>
42+
Scroll down to the <strong>Connections</strong> section and select{" "}
43+
<strong>Followers and following</strong>
44+
</li>
45+
<li>
46+
Select the <strong>Download to device</strong> option
47+
</li>
48+
<li>
49+
Select the <strong>JSON</strong> file option in <strong>Format</strong>
50+
</li>
51+
<li>
52+
In <strong>Date range</strong>, select <strong>All time</strong>
53+
</li>
54+
<li>
55+
Tap <strong>Create files</strong> to request your information
56+
</li>
57+
</ol>
58+
</section>
59+
<section className="bg-light-accent border-accent space-y-2 rounded-3xl border-1 px-4 py-6 shadow-md">
60+
<p className="font-main text-2xl font-semibold">
61+
⚠️ Critical step
62+
</p>
63+
<p className="text-secondary text-lg">
64+
You must select the <strong>JSON</strong> format and <strong>All Time</strong> date range or the app will not work properly
65+
</p>
66+
</section>
67+
68+
<section className="space-y-4">
69+
<h2 className="font-main text-2xl font-semibold">Step 2</h2>
70+
<p className="text-secondary text-lg">
71+
Instagram will now process your request. While their official notice
72+
says this can take up to 48 hours, it&apos;s usually ready in about
73+
<strong> 15 minutes</strong>. You&apos;ll receive an email and a
74+
notification from Instagram when your data is ready to download.
75+
</p>
76+
</section>
77+
78+
<section className="space-y-4">
79+
<h2 className="font-main text-2xl font-semibold">Step 3</h2>
80+
<ol className="text-secondary list-decimal space-y-2 pl-6 text-lg">
81+
<li>
82+
Once notified, go back to{" "}
83+
<strong>
84+
Accounts Center → Your information and permissions → Download
85+
your information{" "}
86+
</strong>
87+
</li>
88+
<li>Under <strong>Available downloads</strong>, download your data package</li>
89+
<li>Unzip the downloaded file</li>
90+
<li>
91+
There should be a
92+
<span className="mx-1 rounded-lg bg-slate-100 px-2 py-1 font-mono text-sm break-all">
93+
followers_1.json
94+
</span>
95+
and
96+
<span className="mx-1 rounded-lg bg-slate-100 px-2 py-1 font-mono text-sm break-all">
97+
following.json
98+
</span>
99+
, those are your files
100+
</li>
101+
</ol>
102+
</section>
103+
104+
<section className="bg-light-accent border-accent space-y-2 rounded-3xl border-1 px-4 py-6 shadow-md">
105+
<p className="font-main text-2xl font-semibold">
106+
Pro Tip - Finding Your Files
107+
</p>
108+
<p className="text-secondary text-lg">
109+
When you go back to upload, your device&apos;s file browser will
110+
open. The folder you just unzipped can be tricky to find.
111+
</p>
112+
<p className="text-secondary text-lg">
113+
The easiest way to locate it is to use the search bar and type{" "}
114+
<strong>followers_and_following</strong>. This will take you
115+
directly to the folder containing the files required
116+
</p>
117+
</section>
118+
119+
<section className="bg-light-accent border-accent space-y-2 rounded-3xl border-1 px-4 py-6 shadow-md">
120+
<p className="font-main text-2xl font-semibold">Privacy Note</p>
121+
<p className="text-secondary text-lg">
122+
Remember, this application processes these files entirely in your
123+
browser. Your data is never uploaded to any server or stored
124+
anywhere else.
125+
</p>
126+
</section>
127+
128+
<Link
129+
href="/"
130+
className="text-accent bg-light-accent self-center rounded-2xl border-1 px-5 py-3 text-lg shadow-sm transition hover:scale-105 hover:cursor-pointer sm:self-auto"
131+
>
132+
Return to Home
133+
</Link>
134+
</main>
135+
</div>
9136
);
10137
}

0 commit comments

Comments
 (0)