A lightweight tool for publishing notes.
l-note is a non-login lightweight note tool. The main idea is inspired by telegra.ph, building upon its anonymous publishing feature. l-note adds additional features like note deletion and password protection in parallel. Users can edit can remove notes across devices.
Before running the application, make sure you have the following installed:
- node.js: v18.16.0
- npm: v9.5.1
npm install
to install dependencies for the app after cloning the repository.npm start
to run the app in the development mode.npm test
to test the app.npm run build
to build the app in the production mode.
l-note uses React and Webpack to build the frontend environment, with certain features implemented using packages such as password encryption and SPA. Unpublished data is stored in local storage, while published notes are stored in the cloud database, firestore. Webpack and other plugins sourced from the community are utilized to address cross-browser compatibility issues, bundle modules, and optmize the project. For easy component and interface testing, Jest and React Testing Library are employed. Finally, the project is deployed to the internet with using Firebase Hosting.
-
HTML
-
CSS
-
Javascript: ES6(destructuring assignment, arrow functions...)
-
React Hooks (useState, useEffect, useContext, customized hooks)
-
react-markdown: supporting easy markdown
-
crypto-js: using SHA256 to encrypt password value when send data to firestore
- firebase-firestore: cloud data storage
- local storage: web api, to store user's input in edit mode
- react-markdown: easy markdown type support
Easy components, feature, and context testing.
- git/GitHub: version control and CI/CD
- Webpack: environment configure, bundle Javascript, optimization
- Edit: Before publishing, input can be stored in local storage.
- Password: To support editing on different devices.
- Delete: Enable to deletion of a note if the password is known.
- Edit Verification: Users can re-edit the note if they have the correct password.
- Error Page: Redirect to the edit page.
- Implemented Responsive Web Design (RWD) for mobile users.
You can check the weekly diary here: development record