Skip to content

Latest commit

 

History

History
85 lines (79 loc) · 5.67 KB

README.md

File metadata and controls

85 lines (79 loc) · 5.67 KB
Raw

Manna Jar

A note-taking website/application for Chinese Christians. Support size: 360px-1920px

  • AutoVerse: An automatic biblical scripture input feature with an open API, supporting various biblical abbreviation formats.
  • BackLinks: Broaden your view to see this note in other contexts. Link relevant pages with one click.
  • GraphView: The graph is your knowledge at a glance, lets you visualize the relationships between the notes in your vault and enabling navigate corresponding notes by clicking nodes.
  • AI summary: Generates belief summaries based on recent notes and recommends review-worthy notes.
  • Share Via Links: Enabled sharing articles with a link, with safeguards against duplicate collections and self-sharing.
  • Fontsize Switch: Switch display fontsize of note for better reading experience.

Link

manna-jar.web.app

---Experience Manna Jar without sign up---

Id: [email protected] / Password: john12345

About

  • Utilized Redux / RTK for systematic state management, separated sync/async event logic with Thunk.
  • Implemented TypeScript to ensure strict type checking to prevent development issues.
  • Collaborated with chatGPT to develop AutoVerse, an automatic biblical scripture input feature using Regex and an open API.
  • Integrated BackLinks, a bidirectional note references using Quill-mention, a well-designed data structure, and Firestore database, allowing for the creation of referenced lists on the front-end.
  • Generated GraphView using React graph vis and a designed data structure. Enabling users to navigate corresponding notes by clicking nodes. Handled node size and relevance filtering on the front-end.
  • Integrated AI summary feature with OpenAI API.
  • Enabled article sharing via links, including note data from the sharer through URLs.
  • Implemented font size switching by updating CSS variables with setProperty API.
  • Maintained user login status using Firebase Auth and localStorage.
  • Employed TailwindCSS and ClassNames for efficient CSS management.

Tech Stack

React TypeScript Redux React Router TailwindCSS Firebase NPM CSS3 HTML5 JavaScript Quill ESLint Prettier Git GitHub

Flow Chart

flowchart TB
A{Index} 
A -->|not login| B{Landing}
B --> E[About]
B --> F(Login/Signup)
A -->|login| C{Home}
C --> D[Profile/Logout]
C --> J[GraphView] -->|Navigate| K
K{Note} --> L(Editor) -->|Create Link|J
C --> G[Sermon notes] --> K
C --> H[Devotion notes] --> K
C --> I[Shared notes] --> K
Loading

Demo

  1. AutoVerse:Insert Bible Verse's easily into your notes just by typing them out. supporting various biblical abbreviation formats. autoVerse
  2. BackLinks: A bidirectional note referencing, allowing users to easily create references by typing "#" and selecting note titles from a dropdown. The feature also supports searching for specific notes. backLinks
  3. GraphView: The graph is your knowledge at a glance, lets you visualize the relationships between the notes in your vault and enabling navigate corresponding notes by clicking nodes. GraphView
  4. Fontsize Switch: Switch display fontsize of note for better reading experience. Fontsize
  5. Share Via Links: Enabled sharing articles with a link, with safeguards against duplicate collections and self-sharing. Share