https://github.com/aayush895/markdown-editor

A full-stack application that allows user to create, read, edit and delete markdown files on the browser itself. Built with MERN stack.
https://github.com/aayush895/markdown-editor

express mongodb nodejs reactjs responsive-web-design rest-api tailwindcss

Last synced: 3 months ago
JSON representation

A full-stack application that allows user to create, read, edit and delete markdown files on the browser itself. Built with MERN stack.

• Host: GitHub
• URL: https://github.com/aayush895/markdown-editor
• Owner: Aayush895
• Created: 2024-10-31T12:49:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-12T06:46:04.000Z (over 1 year ago)
• Last Synced: 2025-03-01T23:09:53.206Z (over 1 year ago)
• Topics: express, mongodb, nodejs, reactjs, responsive-web-design, rest-api, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 701 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# In-browser markdown editor solution

This is a solution to the [In-browser markdown editor](https://github.com/Aayush895/Markdown-Editor).

## Table of contents

- [In-browser markdown editor solution](#in-browser-markdown-editor-solution)

  - [Table of contents](#table-of-contents)

  - [Overview](#overview)

    - [The challenge](#the-challenge)

    - [Screenshot](#screenshot)

    - [Links](#links)

  - [My process](#my-process)

    - [Built with](#built-with)

    - [What I learned](#what-i-learned)

  - [Author](#author)

## Overview

### The challenge

Users should be able to:

- Create, Read, Update, and Delete markdown documents

- Name and save documents to be accessed as needed

- Edit the markdown of a document and see the formatted preview of the content

- View a full-page preview of the formatted content

- View the optimal layout for the app depending on their device's screen size

- See hover states for all interactive elements on the page

- This project is built as a full-stack application

### Screenshot

![Desktop 1](./Screenshots/desktop-1.png)

![Desktop 2](./Screenshots/desktop-2.png)

![Desktop 3](./Screenshots/desktop-3.png)

![Mobile 1](./Screenshots/mobile-1.png)

![Mobile 2](./Screenshots/mobile-2.png)

![Mobile 3](./Screenshots/mobile-3.png)

![Tablet 1](./Screenshots/tablet-1.png)

![Tablet 2](./Screenshots/tablet-2.png)

![Tablet 3](./Screenshots/tablet-3.png)

![Tablet 4](./Screenshots/tablet-4.png)

### Links

- Solution URL: [Github](https://github.com/Aayush895/Markdown-Editor)

- Live Site URL: [Add live site URL here](https://your-live-site-url.com)

## My process

### Built with

- Semantic HTML5 markup

- CSS

- Flexbox

- CSS modules

- Mobile-first workflow

- [React](https://reactjs.org/) - JS library

- Express

- Node

- Mongodb

### What I learned

- Learned how to create an entire full-stack application that can perform CRUD operations.

- Learned how to setup an express server along with database.

- Learned how to create a fully responsve react application and merge it with backend server.

- Learned how to make my application modular.

## Author

- Github - [@Aayush895](https://github.com/Aayush895)