PWA Text Editor is a project that harnesses the power of Progressive Web Applications (PWA) to offer a seamless, offline-capable text editing experience. This application encapsulates advanced data persistence techniques and offline functionality. Dive into building a browser-based text editor that not only meets PWA criteria but also ensures your notes and code snippets are accessible anytime, anywhere.
- Demo
- Features
- Technology Stack
- Getting Started
- Usage
- Screenshots
- Deployment
- Development Guidelines
- Starter Code
- Contributing
- Questions
- License
You can simply visit the link PWA Text Editor
- Single-Page Application: Crafted as a SPA, the text editor ensures a smooth, uninterrupted user experience.
- PWA Compliance: Adheres to PWA standards, offering functionalities like offline availability and app-like experience.
- Data Persistence: Utilizes IndexedDB with the
idbpackage for robust data storage and retrieval. - Offline Functionality: With service workers, you can edit, save, and access your notes or code snippets without an internet connection.
- Deployment: Fully deployable via Render, ensuring a wide reach and easy access.
- IndexedDB & idb Package: For data persistence and storage.
- Webpack: For bundling JavaScript files and plugin management.
- Service Workers & Workbox: For offline functionality and resource caching.
- Render: For deploying the full-stack application.
Before diving into development, ensure you've cloned the starter code repository to your local machine. Do not fork the starter code; instead, clone it directly to maintain a separate version control history.
- Node.js installed on your local machine.
- Basic understanding of JavaScript, HTML, and CSS.
- Clone the Repository: Start by cloning this repository to your local machine to get access to all necessary files.
git clone https://github.com/naturuplift/PWATextEditor.git- Install Dependencies: Navigate to the project directory and run
npm installto install dependencies.
cd pwa-text-editor
npm install- Start the Application: Once the dependencies are installed, you can start the application using the following command:
npm run startThis will launch both the backend and frontend portions of the application, making it accessible via your browser.
-
Editing: Simply type in the text editor to begin creating your notes or code snippets.
-
Saving: Your work is automatically saved to IndexedDB, ensuring you won't lose your progress, even if you go offline.
-
Accessing Offline: Thanks to the PWA functionality, you can continue to use the text editor without an internet connection.
The following screenshot shows the application:
The following image shows the application's manifest.json file:
The following image shows the application's registered service worker:
The following image shows the application's IndexedDB storage:
This application is deployed on Render, showcasing its full-stack capabilities. For details on deploying your own version, refer to the Render Deployment Guide and ensure your project is configured for PWA standards.
- File Structure: Upon opening the application in your editor, you should observe a client-server folder structure.
- Webpack Usage: Ensure your JavaScript files are bundled using webpack, facilitating a streamlined development process.
- Service Worker Registration: Utilize Workbox to register your service worker, enabling offline capabilities and resource caching.
- Data Handling: Implement methods for storing and retrieving data with IndexedDB to ensure content persistence.
To start with this project we used the following Starter Code
I'm always open to contributions and collaboration. If you're interested in contributing to this project, please fork the repository and submit a pull request, or you can simply open an issue with the tag "enhancement".
For any questions about this project, please contact me via:
- Email: arnaldosepulveda@gmail.com
- GitHub: @naturuplift
- LinkedIn: LinkedIn Profile
This project is licensed under the MIT License. See the LICENSE file for more details.