l-note

A lightweight tool for publishing notes.

What is l-note?

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.

Getting Started

Prerequisites

Before running the application, make sure you have the following installed:

• node.js: v18.16.0
• npm: v9.5.1

Available Script

• 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.

Techniques

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.

Frontend

• HTML

• CSS

• Javascript: ES6(destructuring assignment, arrow functions...)

• React

• React Hooks (useState, useEffect, useContext, customized hooks)

• React Router: for implementing SPA

• styled-components: manage style for components

• react-markdown: supporting easy markdown

• crypto-js: using SHA256 to encrypt password value when send data to firestore

Data Storage

• firebase-firestore: cloud data storage
• local storage: web api, to store user's input in edit mode
• react-markdown: easy markdown type support

Testing

Easy components, feature, and context testing.

• Jest
• React Testing Library

Development Tools

• git/GitHub: version control and CI/CD
• Webpack: environment configure, bundle Javascript, optimization

Features

📝 Edit Mode

• 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.

📄 Note Mode

• Edit Verification: Users can re-edit the note if they have the correct password.

❌ Error Mode

• Error Page: Redirect to the edit page.

📱 Across Devices

• Implemented Responsive Web Design (RWD) for mobile users.

Development Diary

You can check the weekly diary here: development record