in-browser-markdown-editor

📚 Project Description

In this project, I developed a fully-functional in-browser markdown editor application with a light/dark mode toggle. The application includes the following features.

• 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
• Use localStorage to save the current state in the browser that persists when the browser is refreshed

📌 What did I learn?

This project provided an excellent opportunity to utilize the react-markdown library for converting markdown texts into HTML code. Additionally, I gained experience in data storage using localStorage and organizing CRUD operations within a context, which facilitated communication between components. To enhance user experience, I implemented toasts to provide feedback after saving and deleting a document.

The project also presented CSS challenges in designing various layouts based on different screen sizes. To overcome these challenges, I leveraged componentization, utilized styled-components, and followed a mobile-first approach, which greatly assisted in resolving these issues.

🔍 Links

Preview Site

💻 My Process

Built with:

• React
• Typescript
• Vite
• phosphor-react
• react-markdown
• react-toastify
• radix-ui
• styled-components
• ESLint
• Prettier

ℹ️ How to run the application?

Clone the repository:

git clone https://github.com/maricastroc/in-browser-markdown-editor

Install the dependencies:

npm install

Start the service:

npm run dev

⏩ Access http://localhost:3000 to view the web application.