{"id":23071582,"url":"https://github.com/lloydlobo/markdown-previewer","last_synced_at":"2026-04-13T00:39:12.808Z","repository":{"id":149365305,"uuid":"620731523","full_name":"lloydlobo/markdown-previewer","owner":"lloydlobo","description":"An intuitive note-taking app to easily create, edit, and preview notes in Markdown","archived":false,"fork":false,"pushed_at":"2023-10-25T05:06:58.000Z","size":226,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T10:44:06.201Z","etag":null,"topics":["edit-files-in-browser","markdown","markdown-editor","markdown-previewer"],"latest_commit_sha":null,"homepage":"https://markdown-editor-coral.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lloydlobo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-29T09:06:02.000Z","updated_at":"2024-08-09T11:40:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"a8ed5b70-e9c1-494c-b7cf-f042387fbea4","html_url":"https://github.com/lloydlobo/markdown-previewer","commit_stats":null,"previous_names":["lloydlobo/markdown-previewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lloydlobo/markdown-previewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydlobo%2Fmarkdown-previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydlobo%2Fmarkdown-previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydlobo%2Fmarkdown-previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydlobo%2Fmarkdown-previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lloydlobo","download_url":"https://codeload.github.com/lloydlobo/markdown-previewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydlobo%2Fmarkdown-previewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264922866,"owners_count":23683701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["edit-files-in-browser","markdown","markdown-editor","markdown-previewer"],"created_at":"2024-12-16T07:16:00.933Z","updated_at":"2026-04-13T00:39:07.755Z","avatar_url":"https://github.com/lloydlobo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Markdown Editor\n\n\u003c!--toc:start--\u003e\n\n- [Markdown Editor](#markdown-editor)\n  - [Description](#description)\n  - [Overview](#overview)\n    - [Features](#features)\n    - [File Structure](#file-structure)\n    - [Future](#future)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Contributing](#contributing)\n  - [License](#license)\n  \u003c!--toc:end--\u003e\n\n\u003ca href=\"https://opensource.org/licenses/MIT\" target=\"_new\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\"\n  alt=\"License: MIT\"\u003e\n\u003c/a\u003e\n\n## Description\n\nThis project uses the React framework, specifically with\nthe Next.js library for server-side rendering and routing. It also uses\nthe Chakra UI component library for its styling and user interface.\n\nThe goal of this project is to provide a simple and intuitive note-taking\napp that allows users to easily create and edit notes in Markdown\nformat. The app is designed to be customizable with its light and dark\nthemes and provides user-friendly features such as local storage, copy\nmarkdown button, and human-readable note creation dates.\n\nIn addition to the future tasks mentioned, another potential improvement\ncould be implementing a syncing feature with cloud storage or other\ndevices for seamless note-taking across platforms.\n\nThis is a note-taking app that allows users to create and edit notes in\nMarkdown format. The app has a sidebar with a list of notes, a navbar,\nand an editor/preview section.\n\n## Overview\n\nThe app uses a custom Chakra UI theme and allows users to switch between\nlight and dark modes. The notes are stored locally using the browser's\nlocalStorage API.\n\n### Features\n\n- Sidebar with a list of notes\n- Editor and preview sections for note-taking\n- Custom Chakra UI theme with light and dark mode\n- LocalStorage API for storing notes\n- Ability to create and delete notes\n- Markdown formatting in the editor section\n- Copy markdown button\n- User action messages\n- Tooltip with delay on title and copy markdown button\n- Human-readable note creation dates\n- Keyboard shortcuts for improved\n  user experience (future task)\n\n### File Structure\n\nThe file structure is as follows:\n\n- `components`: Contains all the components used in the app, such as the\n  navbar, sidebar, editor and preview components.\n- `hooks`: Contains the useLocalStorage hook for accessing and storing notes locally.\n- `lib`: Contains constants, and the custom Chakra UI theme.\n- `pages`: Contains the main pages of the app, such as the home page and the API endpoint.\n- `store`: Contains the AppContext and note-reducer used for state management.\n- `styles`: Contains global CSS styles.\n- `tests`: Contains utility tests.\n- `types`: Contains type definitions for the app.\n- `utils`: Contains utility functions for accessing and manipulating data.\n\n### Future\n\nFuture tasks include implementing a search function and adhering to the\ndesign's color scheme.\n\n## Installation\n\nTo install this project, [insert steps on how to install or link to\ninstallation documentation].\n\n## Usage\n\nTo use this project, [insert instructions on how to use or link to\nusage documentation].\n\nTo run the app, clone the repository and run the following commands:\n\n```shell\nnpm install npm run dev\n```\n\nTo use this project, follow the steps below:\n\nClone the repository to your local machine using the command:\n\n```shell\ngit clone \u003crepository-url\u003e\n```\n\nNavigate to the project directory:\n\n```shell\ncd markdown-editor\n```\n\nInstall the project dependencies using npm:\n\n```shell\nnpm install\n```\n\nStart the development server:\n\n```shell\nnpm run dev\n```\n\nAccess the app in your browser at `http://localhost:3000`\n\nYou can create a new note by clicking on the \"+\" icon in the sidebar.\nTo edit a note, simply click on its title in the sidebar. The editor\nsection will appear with the note's content. You can format the note\nusing Markdown syntax.\n\nThe app also provides a copy markdown button for each note, allowing\nyou to easily copy its content to your clipboard.\n\nTo delete a note, click on the trash icon next to its title in the\nsidebar.\n\n## Contributing\n\nContributions to this project are welcome. To contribute, please follow\nthese steps:\n\nFork the repository Create a new branch for your feature or bug fix:\n\n```shell\ngit checkout -b my-feature-branch\n```\n\nMake your changes and commit them:\n\n```shell\ngit commit -m \"Added new feature\"\n```\n\nPush your changes to your forked repository:\n\n```shell\ngit push origin my-feature-branch\n```\n\nCreate a pull request against the main repository.\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](LICENSE) file\nfor details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydlobo%2Fmarkdown-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flloydlobo%2Fmarkdown-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydlobo%2Fmarkdown-previewer/lists"}