Markdown Editor
The project was created as a part of a Front End Mentor challenge. The goal was to create a full working Markdown editor app using any technology of choice and for user to be able to input Markdown text and see the rendered HTML output in real time.
I had a fully developed responsive design to work with and I decided to use React and Next.js to create the app.
I started building the basic logic of the app with header, sidebar and main content area. I used React and Express at first to build the CRUD (Create, Read, Update, Delete) functionality for the app.
The question was - where to store the markdown files? I decided to use the local storage for the files at first, then I moved to Express local server but I thought that if other people wanted to test this app - they would have to run the server locally. So I decided to use the Next.js API routes to store the files after all.
Structure
The project follows a well-organized component-based architecture:
Core Components
<MarkdownInput /> - textarea component for writing markdown content
<MarkdownPreview /> - component that renders the markdown as HTML
<Header /> - contains navigation controls, document management buttons, and theme toggling
<Sidebar /> - provides access to saved documents and creates new ones
<Wrapper /> - main layout container that organizes the editor interface
<Modal components /> - for confirmations and notifications
State Management
with Redux Toolkit - for centralized state management
markdownSlice - manages document content, title, theme settings, and document operations
sideBarSlice - controls sidebar visibility state
API Integration
RESTful API - endpoints for document operations
MongoDB - for persistent storage of documents
UI and Design
When all of the main functionality was done, I started to work on the design of the app. I used css modules to style the components and go with the design that was provided.
The dark/light mode was implemented right at the end, i decided to go with the fasted approach of conditional rendering for the css classes.
Challenges
The biggest challenge was to decide whether to store the files in the local storage, local server or in the database. I decided to go with the database in the end since it was my first time interacting with MongoDb. I felt that it was a good opportunity to learn something new and challenge myself.
Another challenge was to create a mobile version. According to designs, desktop and mobile functionality differed a lot so I intended to implement that an a most accurate way possible and not to sacrifice the design.
Conclusion
Throughout this project I have learned that the easiest way to approach the app is to start with the basic logic and architecture first, figure out the database and then move to the design.
I have also learned how to use Next.js API routes and how to interact with the MongoDB database.