Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredm23579/pwa-text-edit
https://github.com/fredm23579/pwa-text-edit
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/fredm23579/pwa-text-edit
- Owner: fredm23579
- Created: 2024-06-16T20:55:06.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-17T00:21:04.000Z (6 months ago)
- Last Synced: 2024-06-17T22:37:42.211Z (6 months ago)
- Language: JavaScript
- Size: 4.71 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
PWA Text Editor
Codebase for the pwa-text-edit platform
◦ Developed with the software and tools below.
---
## 📚 Table of Contents
- [📚 Table of Contents](#-table-of-contents)
- [🔍 Description](#-description)
- [🌟 Features](#-features)
- [📁 Repository Structure](#-repository-structure)
- [ Repo Link](#-repo-link)
- [💻 Code Summary](#-code-summary)
- [🚀 Getting Started](#-getting-started)
---
## 🔍 Description
This project is a full-stack web application with a client and server directory structure. The client directory contains the frontend code, while the server directory contains the backend code. The project uses Node.js and Express.js for the server, and React for the client. The project also includes a webpack configuration file for building the client-side code.
---
## 🌟 Features
Full-stack web application, PWA, Node.js, Express.js, webpack, frontend, backend, client-side, server-side, directory structure, package.json, server, routes, htmlRoutes.js, server.js
---
## 📁 Repository Structure
```sh
├── .gitignore
├── .npmrc
├── client
│ ├── .eslintrc
│ ├── .gitignore
│ ├── favicon.ico
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── css
│ │ │ └── style.css
│ │ ├── images
│ │ │ └── logo.png
│ │ └── js
│ │ ├── database.js
│ │ ├── editor.js
│ │ ├── header.js
│ │ ├── index.js
│ │ └── install.js
│ ├── src-sw.js
│ └── webpack.config.js
├── package.json
└── server
├── package.json
├── routes
│ └── htmlRoutes.js
└── server.js
```
---
## Repo Link
- [pwa-text-edit](https://github.com/fredm23579/pwa-text-edit)
## 💻 Code Summary
\client\src\js
| File | Summary |
| ---- | ------- |
| database.js | The code initializes an IndexedDB database called jate and provides methods for adding and retrieving data from the database. |
| editor.js | The code defines a class that initializes a CodeMirror editor and sets its value to the content of IndexedDB or localStorage, with a fallback to a default header. It also listens for changes to the editor's value and saves it to localStorage when the editor loses focus. |
| header.js | The code defines a constant variable `header` that stores a string containing a header for a text editor, with the purpose of being exported for use in other parts of the program. |
| index.js | The code initializes an editor instance and sets its content from a database, using a spinner to indicate loading. It also registers a service worker for offline support. |
| install.js | The code adds an event listener to the `beforeinstallprompt` event, which is triggered when a user attempts to add a PWA to their home screen. It also adds a click event listener to an element with the ID buttonInstall that shows the install prompt and logs the user's response to the install prompt. |
---
\client
| File | Summary |
| ---- | ------- |
| src-sw.js | The code defines a service worker that caches pages, assets, and images using Workbox libraries. It pre-caches the app's assets and routes requests to the appropriate cache based on the request mode and destination. |
| webpack.config.js | The code defines a Webpack configuration file for a Progressive Web App (PWA) that generates an HTML file, injects a custom service worker, and generates a manifest file. |
---
\server\routes
| File | Summary |
| ---- | ------- |
| htmlRoutes.js | The code exports a function that sets up a route for the root URL ('/') and sends an HTML file located in the '../client/dist' directory as a response. |
---
\server
| File | Summary |
| ---- | ------- |
| server.js | The code sets up an Express.js server on port 3000 and serves static files from the ../client/dist directory, as well as parsing URL-encoded and JSON data using middleware functions. |
---
## 🚀 Getting Started
To get started with this project, follow these steps:
```bash
git clone https://github.com/fredm23579/pwa-text-edit.git
```
1. Install the necessary dependencies by running `npm install` in both the client and server directories.
2. Start the development server by running `npm run start:dev` in the root directory. This will start both the client and server development servers simultaneously.
3. In a separate terminal window, navigate to the client directory and start the client development server by running `npm run client`.
4. Open your web browser and navigate to `http://localhost:3000` to view the application.
5. Make changes to the code as needed, and the client and server development servers will automatically reload the application with the latest changes.
6. When you are ready to build the application for production, run `npm run build` in the client directory to generate a production-ready bundle of JavaScript files.
7. Copy the contents of the `client/build` directory to the `server/public` directory.
8. Start the production server by running `npm run start` in the root directory. This will start the server and serve the application on `http://localhost:5000`.
That's it! You should now have a fully functional full-stack web application using Node.js, Express.js, React, and Webpack.