The Text Editor Web App is a progressive web application designed to provide users with a seamless text editing experience. It combines the convenience of online accessibility with offline capabilities. Users can create and edit text documents, which are automatically saved to the IndexedDB for local storage and can be accessed even when offline.
The app also offers the option to download and install it as a standalone application for a more native-like experience. Additionally, it employs caching to enhance performance and load times.
- Key Features 🔑
- Installation 🛠️
- Usage 📘
- Contributing 🤝
- Tests 🧪
- License 📜
- Credits 🙏
- Questions ❓
- Deployed Application 🚀
PWA: A Progressive Web Application, offering an engaging user experience even offline.
IndexedDB: Local storage powered by IndexedDB ensures content access without an internet connection.
Offline Access: Users can edit and access content, whether online or offline.
Cross-Platform: A consistent experience across different devices and platforms.
User-Friendly: The app offers an intuitive and easy-to-use text editing interface.
Downloadable: Users can install the app for quick offline access.
Caching: Content loads swiftly, enhancing performance, especially when offline.
To install the Text Editor Web App, follow these steps:
- Clone this repository to your local machine.
- Navigate to the app's directory.
- Install the necessary dependencies using the following command:
npm install
- Create the dist folder using the following command:
npm run start:dev
- Navigate to the dist folder and start
index.html
- Create a new text document or open an existing one.
- Edit the document using the user-friendly text editing interface.
- The content is automatically saved to the IndexedDB, allowing access even when offline.
- Download and install the app for offline use.
Contributions to this API project are welcome. If you encounter issues, have suggestions for improvements, or would like to contribute, please open an issue or submit a pull request.
This project currently doesn't have specific test cases, but you can manually test its functionality by following the usage instructions.
This project is licensed under The MIT License. Here is the link to the license to access more information for your reference: https://opensource.org/licenses/MIT
I utilized the study material provided by the institution as a reference to complete my application.
Following are the documents I used to help me write code:
- Lighthouse Chrome extension
- webpack docs on getting started
- webpack docs on loading images
- webpack docs on MiniCssExtractPlugin
- NPM docs on concurrently
- MDN web docs client-server overview
- Installing Express.js server
- Express.js routing
- Installing Express.js server
- Workbox docs on generating a service worker with webpack using GenerateSW
- Workbox docs on GenerateSW
- Simulate offline behavior with Chrome DevTools
- Interact with service workers with Chrome DevTools
- Workbox docs on configuring GenerateSW
- Workbox docs on InjectManifest
- Differences between InjestManifest and GenerateSW
- NPM docs on IndexedDB
- MDN Web Docs on the IndexedDB API
- Webpack PWA Manifest plugin documentation.
If you have further questions, you are welcome to reach me through my email at hazkeel27@gmail.com.
You can view my projects by going through my GitHub profile at https://github.com/hazkeel27.