https://github.com/mohamedsamara/react-offline-sync
🌀 PWA Offline React App with Sync
https://github.com/mohamedsamara/react-offline-sync
background-sync offline push-notifications pwa service-worker
Last synced: about 1 year ago
JSON representation
🌀 PWA Offline React App with Sync
- Host: GitHub
- URL: https://github.com/mohamedsamara/react-offline-sync
- Owner: mohamedsamara
- License: mit
- Created: 2024-11-22T20:49:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-26T12:48:08.000Z (over 1 year ago)
- Last Synced: 2025-01-26T13:37:24.756Z (over 1 year ago)
- Topics: background-sync, offline, push-notifications, pwa, service-worker
- Language: TypeScript
- Homepage:
- Size: 442 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Offline Sync
React Offline Sync is a web application built with React for managing notes. It includes core features for creating, editing, and organizing notes, along with support for offline access and automatic syncing when back online. The app leverages service workers and websockets for real-time updates and background processes.
## Features
- Progressive Web App (PWA): Works offline and can be installed for use on mobile and desktop.
- Offline Functionality: Create, edit, and delete notes without an internet connection. Data is stored using IndexedDB.
- Background Syncing: Changes are synced automatically when the device is online. The app uses a Last Write Wins approach to apply the most recent changes.
- Push Notifications: Notifications alert users to updates on their notes.
- Real-Time Updates with WebSocket: Provides real-time updates and collaboration.
- Code Splitting: Improves initial load performance by loading only the necessary code.
## Setup Instructions
1. Start the Backend Server and Frontend
To start the server and frontend together, use the following steps:
1. Install dependencies: First, navigate to your project directory and install the required dependencies for both the client and server.
```bash
yarn install
```
2. Start both server and frontend: To start both the backend and frontend at the same time, run the dev script from your root project directory. This will run the server (Express API) and the frontend (React app) concurrently.
```bash
yarn dev
```
2. Build the Application for Production
To create a production build of the app (both frontend and backend), run:
```bash
yarn build
```
After building the app, you can start both the server and frontend in production mode using:
```bash
yarn start
```
3. Generate VAPID Keys for Web Push
First, navigate to server directory and run the command:
```bash
npx web-push generate-vapid-keys
```
4. ENV
Create `.env` file for both client and server. See examples:
[Frontend ENV](client/.env.example)
[Backend ENV](server/.env.example)