Yukaii / messenger-JSON-viewer

Browse and view the exported Facebook Messenger data / messages.
https://messenger-json-viewer.vercel.app/
36 stars 9 forks source link
facebook facebook-messenger messenger nextjs offline react react-virtuoso window-controls-overlay

Facebook Messenger exported JSON viewer

Messenger Viewer

messenger-viewer

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, knowing that it can be used to access the file in a folder just in the browser.

Technical Stack

How to use

  1. Open the Tool
  2. Click the Button and select the folder you downloaded from Facebook. start-screen

    The contents of the folder should look like this folder

  3. Wait a few seconds, sometimes it takes one minute to load.
  4. Tada! offline-viewer

Features

Simple statistic

statistic

View chatroom just as what you can do on Messenger

offline-viewer

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

wco

Development (Running locally)

Before you start, make sure you have Node.js and Yarn installed.

First, clone the repository:

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

Then, install the dependencies:

cd messenger-JSON-viewer
yarn install

Finally, run the development server:

yarn dev

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

TODOs

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

Previous works

Credits

The application icon is modified from Heroicons.

其它

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