Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vicba/in-browser-markdown-editor
In-browser markdown editor from frontendmentor.io but added my own touch :-)
https://github.com/vicba/in-browser-markdown-editor
chadcnui nextjs tailwindcss typescript
Last synced: about 10 hours ago
JSON representation
In-browser markdown editor from frontendmentor.io but added my own touch :-)
- Host: GitHub
- URL: https://github.com/vicba/in-browser-markdown-editor
- Owner: Vicba
- Created: 2024-02-26T20:28:12.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-03-07T19:35:40.000Z (8 months ago)
- Last Synced: 2024-03-07T21:10:26.817Z (8 months ago)
- Topics: chadcnui, nextjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://markdown-editor-vicba.vercel.app
- Size: 486 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
I found this challenge at frontendmentor.io [here](https://www.frontendmentor.io/challenges/inbrowser-markdown-editor-r16TrrQX9).
I personally use this project as an open browser tab to quickly make personal notes or things to remember while browsing other tabs.
I didn't want to spend a monthly subscription for this on the platform because I'm a broke student. So I took the idea and build it with my own twist. (Which is way more fun) 🙃
Right now, I like the current project state. It's quick and easy to use. I might add more features later if I change my mind.
- [🚀 Usage](#-usage)
- [🌟 Tools](#-tools)
- [🎓 What I learned](#-what-i-learned)
- [😮 Features](#-features)
## 🚀 Usage
1. Clone the repository
```bash
git clone https://github.com/Vicba/In-browser-markdown-editor.git
```
2. Install the dependencies
```bash
npm install
```
3. Run the development server
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## 🌟 Tools
- Next.js 13 App Directory
- Chadcn UI
- Tailwind CSS
- Icons from [Lucide](https://lucide.dev)
- Dark mode with `next-themes`
## 🎓 What I learned
- Learned chadcn ui components like: sheet, resizable, ...
- Doing side projects one hour a day after work isn't that hard, at the end of the week you see big results.
- Adding markdown to a project is easier then I thought.
- Refreshed my knowledge of Tailwind CSS and react context
- "Failing to plan is planning to fail." - Benjamin Franklin (but made it 😃)
- KISS -> keep it stupid simple
## 😮 Features
Features that I could add if i had more time. Maybe some of them are too complex for the use case.
- auth
- making it full stack
- editing the file name (now only possible if you download file)