https://github.com/Yukaii/messenger-JSON-viewer

Browse and view the exported Facebook Messenger data / messages.
https://github.com/Yukaii/messenger-JSON-viewer

facebook facebook-messenger messenger nextjs offline react react-virtuoso window-controls-overlay

Last synced: about 2 months ago
JSON representation

Browse and view the exported Facebook Messenger data / messages.

• Host: GitHub
• URL: https://github.com/Yukaii/messenger-JSON-viewer
• Owner: Yukaii
• Created: 2022-04-01T13:58:34.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-09T07:51:57.000Z (over 1 year ago)
• Last Synced: 2024-11-15T15:06:32.775Z (about 2 months ago)
• Topics: facebook, facebook-messenger, messenger, nextjs, offline, react, react-virtuoso, window-controls-overlay
• Language: TypeScript
• Homepage: https://messenger-json-viewer.vercel.app/
• Size: 6.55 MB
• Stars: 36
• Watchers: 3
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• project-awesome - Yukaii/messenger-JSON-viewer - Browse and view the exported Facebook Messenger data / messages. (TypeScript)

README

        
# Facebook Messenger exported JSON viewer



  



![messenger-viewer](./docs/images/messenger-viewer.png)

## What's this?

This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messenger clone, just for fun and to see what Tailwind CSS can do. Another reason is that I want to try out the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API), knowing that it can be used to access the file in a folder just in the browser.

### Technical Stack

- Next.JS + TailwindCSS

- [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)

## How to use

1. Open [the Tool](https://messenger-json-viewer.vercel.app/)

2. Click the Button and select the folder you [downloaded from Facebook](https://www.remote.tools/remote-work/download-facebook-messenger-conversation).

   ![start-screen](./docs/images/start.png)

   > The contents of the folder should look like this

   > ![folder](./docs/images/folder.png)

3. Wait a few seconds, sometimes it takes one minute to load.

4. Tada!

   ![offline-viewer](./docs/images/messenger-viewer-white.png)

## Features

### Simple statistic

![statistic](./docs/images/statistic.png)

### View chatroom just as what you can do on Messenger

![offline-viewer](./docs/images/messenger-viewer-white.png)

### Window Controls Overlay as PWA (actually not a feature :p)

![wco](./docs/images/window-controls-overlay.png)

## Development (Running locally)

Before you start, make sure you have [Node.js](https://nodejs.org/) and [Yarn](https://yarnpkg.com/) installed.

First, clone the repository:

```bash

git clone https://github.com/Yukaii/messenger-JSON-viewer.git

```

Then, install the dependencies:

```bash

cd messenger-JSON-viewer

yarn install

```

Finally, run the development server:

```bash

yarn dev

```

The server should be running at http://localhost:3000.

## TODOs

If they should be done, then they will be done.

- [x] Image type message

- [x] Link

- [x] Reactions

- [x] Stickers

- [ ] Subscribe/Unsubscribe events

- [ ] Attachments

- [ ] Photos View

- [ ] Calendar to jump to specific date

- Date

  - [x] Sent at for each message

  - [ ] Date/Time separator

- Info Panel

  - Statistic

    - [x] message count (from both side)

  

## Previous works

- 

## Credits

The application icon is modified from Heroicons.

## 其它

翻閱數年前的訊息實在是不忍直視......