Skip to content

An intuitive note-taking app to easily create, edit, and preview notes in Markdown

License

Notifications You must be signed in to change notification settings

lloydlobo/markdown-previewer

Repository files navigation

Markdown Editor

License: MIT

Description

This project uses the React framework, specifically with the Next.js library for server-side rendering and routing. It also uses the Chakra UI component library for its styling and user interface.

The goal of this project is to provide a simple and intuitive note-taking app that allows users to easily create and edit notes in Markdown format. The app is designed to be customizable with its light and dark themes and provides user-friendly features such as local storage, copy markdown button, and human-readable note creation dates.

In addition to the future tasks mentioned, another potential improvement could be implementing a syncing feature with cloud storage or other devices for seamless note-taking across platforms.

This is a note-taking app that allows users to create and edit notes in Markdown format. The app has a sidebar with a list of notes, a navbar, and an editor/preview section.

Overview

The app uses a custom Chakra UI theme and allows users to switch between light and dark modes. The notes are stored locally using the browser's localStorage API.

Features

  • Sidebar with a list of notes
  • Editor and preview sections for note-taking
  • Custom Chakra UI theme with light and dark mode
  • LocalStorage API for storing notes
  • Ability to create and delete notes
  • Markdown formatting in the editor section
  • Copy markdown button
  • User action messages
  • Tooltip with delay on title and copy markdown button
  • Human-readable note creation dates
  • Keyboard shortcuts for improved user experience (future task)

File Structure

The file structure is as follows:

  • components: Contains all the components used in the app, such as the navbar, sidebar, editor and preview components.
  • hooks: Contains the useLocalStorage hook for accessing and storing notes locally.
  • lib: Contains constants, and the custom Chakra UI theme.
  • pages: Contains the main pages of the app, such as the home page and the API endpoint.
  • store: Contains the AppContext and note-reducer used for state management.
  • styles: Contains global CSS styles.
  • tests: Contains utility tests.
  • types: Contains type definitions for the app.
  • utils: Contains utility functions for accessing and manipulating data.

Future

Future tasks include implementing a search function and adhering to the design's color scheme.

Installation

To install this project, [insert steps on how to install or link to installation documentation].

Usage

To use this project, [insert instructions on how to use or link to usage documentation].

To run the app, clone the repository and run the following commands:

npm install npm run dev

To use this project, follow the steps below:

Clone the repository to your local machine using the command:

git clone <repository-url>

Navigate to the project directory:

cd markdown-editor

Install the project dependencies using npm:

npm install

Start the development server:

npm run dev

Access the app in your browser at http://localhost:3000

You can create a new note by clicking on the "+" icon in the sidebar. To edit a note, simply click on its title in the sidebar. The editor section will appear with the note's content. You can format the note using Markdown syntax.

The app also provides a copy markdown button for each note, allowing you to easily copy its content to your clipboard.

To delete a note, click on the trash icon next to its title in the sidebar.

Contributing

Contributions to this project are welcome. To contribute, please follow these steps:

Fork the repository Create a new branch for your feature or bug fix:

git checkout -b my-feature-branch

Make your changes and commit them:

git commit -m "Added new feature"

Push your changes to your forked repository:

git push origin my-feature-branch

Create a pull request against the main repository.

License

This project is licensed under the MIT license. See the LICENSE file for details.

About

An intuitive note-taking app to easily create, edit, and preview notes in Markdown

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •