MarkUp: Notes Simplified

MarkUp is a local-first note-taking application. It features a clean and simple interface for creating and managing notes, with full support for Markdown formatting.

Note

This is my personal hobby project, where I explore and experiment with new technologies and ideas. Feel free to browse the code and follow along with my learning journey.

Table of contents

• Features
• Technologies
• Demo
• Screenshots
• License
• Contact

Features

• Create and Capture: Seamlessly create new notes by providing a title and content. Capture your thoughts, ideas, and important information effortlessly.

• Local-First Data Storage: MarkUp adopts a local-first approach for data storage, ensuring your notes are securely saved locally. Benefit from enhanced privacy and accessibility, even without an internet connection.

• Effortless Editing: Edit your existing notes with ease. Update the title or content of a note anytime you need to refine or expand your thoughts.

• Smart Organization: Assign tags to your notes for smart organization. Categorize your notes into custom tags to easily classify and retrieve them later.

• Filter with Precision: Quickly find the notes you need using the advanced filtering feature. Filter notes based on titles, tags, or a combination of both, ensuring you find the right information in no time.

• Real-time Markdown Preview: See a live preview of your notes as you write them in Markdown. Instantly visualize how your formatted text will look, making it easier to create well-structured content.

• Automatic Tag Updates: Enjoy seamless tag management. When you update a tag, MarkUp automatically reflects the changes across all notes tagged with that specific tag. Say goodbye to manual tag updates and save valuable time.

• Intuitive User Interface: MarkUp boasts an intuitive and user-friendly interface. With its clean design and straightforward navigation, you can focus on your notes without any distractions.

• Responsive and Fast: Whether you're accessing MarkUp from your desktop or mobile device, it offers a responsive experience. Enjoy fast performance, ensuring smooth note-taking and effortless interaction.

• Dark Mode: Customize your note-taking experience with Dark Mode. Easily switch between light and dark themes to suit your preference.

Technologies Used

• 🏷️ TypeScript v5
• ⚛️ React v18
• 🔗 React Router v6
• 🗄️ RxDB (Database)
• 🎨 Bootstrap v5 Chakra UI v2.8
• 🐻 Zustand v4
• ⬇️ React Select v5.7
• 📝 React Markdown v8.0
• 🔑 uuid v9.0

Demo

Check out the live demo of MarkUp:

• 🌐 Live Page: https://idrisgit.github.io/MarkUp

Screenshots

1. Homepage:

   

2. Create New Note:

   

3. Edit Note:

   

4. Color Modes:

   Dark Mode	Light Mode

5. Edit Tags:

   

6. Mobile Responsive:

Version 1

• Title and Tags
• Markdown Support
• Title Search and Tags Filter
• Create Note
• Edit Note
• Ability to edit Tags and auto update
• Logo
• Homepage
• Responsive Design
• Pretty Markdown
• Markdown Editor Syntax Highlighting
• Local Database
• Support Picture Uploading
• Guided Tour
• Unit Test
• Integration Test
• Storybook Integration
• PWA

License

MarkUp is licensed under the MIT License.

Contact

If you have any questions, suggestions, or feedback, please feel free to contact me.

Email: [email protected]
GitHub: https://github.com/IdrisGit
LinkedIn: https://www.linkedin.com/in/idris-gadi/
Twitter/𝕏: https://x.com/idrisGadiX

Thank you for using MarkUp!