Social Network Project

This project is created with React+Vite in frontend and NestJS in the backend.

The goal of this project is to simulate a simple social media network like Instagram or Twitter, where we can implement some technologies like Websocket and PWA credentials such as service workers, caching, offline experience etc.

I have implemented a simple websocket capability where you receive notifications after running the app.

Also, PWA credentials are implemented with vite-plugin-pwa. Caching utilizes workbox. In order to see the caching in action after working with the app a little bit, turn off the network from:

browser devtools > application > service worker > offline checkbox

How to run the app

This application has both backend and frontend. So we are going run both.

Backend

After opening the project files in your IDE or code editor open a terminal and: cd server make sure you are in the server directory, then: yarn install yarn start

Important Note: I have used mastodon social public API to have data for this project. As this website is blocked in Iran, you need to set a proxy to be able to access this website's API. Otherwise, you won't need any proxy.

How to set an OS system-wide proxy

In time of development I used Psiphon3. You can use your own proxy that should be OS wide. After establishing connection, you need to embed the IP and PORT of your proxy in the .env file. You can see .env file in the server directory. IP and PORT can be found in the network proxy section of any OS. the structure of the env file is like this:

USE_PROXY=true
PROXY_HOST=127.0.0.1
PROXY_PORT=49886

So if you want to use the proxy USE_PROXY should be true and other fields correctly filled.

Frontend

Open another terminal instance and make sure you are in the root of the project. Then run: yarn install then: yarn run build yarn run preview

Running the app in production mode gives you the ability to utilize the full potential of PWA features.

---

That's all you need to run the app and see it in the browser. You can test websocket by the notifications you receive. And service worker caching and offline mode by enabling offline in devtools.