Skip to content

Commit 21e6030

Browse files
Update README.md
1 parent cf90fa0 commit 21e6030

File tree

1 file changed

+55
-23
lines changed

1 file changed

+55
-23
lines changed

README.md

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,68 @@
1-
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
1+
# Follow Diff
22

3-
## Getting Started
3+
A privacy-first web application that allows you to see which Instagram users you follow who don't follow you back. This tool is designed with security in mind; all data processing happens directly in your browser. Your Instagram data is never uploaded to any server.
44

5-
First, run the development server:
5+
## Overview
66

7-
```bash
8-
npm run dev
9-
# or
10-
yarn dev
11-
# or
12-
pnpm dev
13-
# or
14-
bun dev
15-
```
7+
Follow Diff provides a simple and secure way to analyze your Instagram follower relationships using your official data export. By processing your `followers.json` and `following.json` files directly in the browser, this tool ensures that your data remains completely private and never leaves your computer.
168

17-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
9+
The core comparison logic is implemented efficiently using a Set, which provides a time complexity of O(n + m), a significant improvement over a less optimal O(n\*m) approach, ensuring a fast and responsive experience even with large datasets.
1810

19-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
11+
## Live Demo
2012

21-
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
13+
You can try out the application here: [https://follow-diff.vercel.app/](https://follow-diff-theta.vercel.app/)
2214

23-
## Learn More
15+
## How It Works
2416

25-
To learn more about Next.js, take a look at the following resources:
17+
1. **Request Your Data**: First, you'll need to request your data from Instagram. A tutorial on how to do this is available on the application's website.
18+
2. **Upload Your Files**: Once you have your `followers.json` and `following.json` files, you can drag and drop them into the application.
19+
3. **See the Difference**: The application will then process the files and display a list of users who do not follow you back.
2620

27-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
21+
## Key Features
2922

30-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
23+
* **Client-Side Processing**: All file processing and data analysis happen in the browser. No user data is ever sent to a server, guaranteeing privacy.
3124

32-
## Deploy on Vercel
25+
* **Efficient Comparison Algorithm**: Utilizes a JavaScript `Set` for fast and efficient comparison of follower and following lists.
3326

34-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
27+
* **Robust Type-Safety**: Employs TypeScript and Zod for schema validation to ensure the data from Instagram's export files is correctly parsed and handled, preventing runtime errors and improving maintainability.
3528

36-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
29+
* **Comprehensive Testing**: Includes a suite of tests using Jest and React Testing Library to ensure the reliability of core logic and UI components. The test suites achieve the following coverage:
30+
* **Statements**: 94.64%
31+
* **Branches**: 88.88%
32+
* **Functions**: 83.33%
33+
* **Lines**: 98.03%
34+
35+
36+
## Setup
37+
38+
To run this project locally:
39+
40+
1. Navigate to the project directory:
41+
```bash
42+
cd follow-diff
43+
```
44+
2. Install dependencies:
45+
```bash
46+
npm install
47+
```
48+
3. Run the development server:
49+
```bash
50+
npm run dev
51+
```
52+
53+
## Tech Stack
54+
55+
### Frontend
56+
57+
* **React**
58+
* **Next.js**
59+
* **TypeScript**
60+
* **TailwindCSS**
61+
* **Zod** (for schema validation)
62+
* **React-Dropzone** (for file uploads)
63+
* **Jest & React Testing Library** (for testing)
64+
* **Vercel** (for deployment)
65+
66+
### Backend
67+
68+
This project is a pure frontend application and does not have a backend.

0 commit comments

Comments
 (0)