Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai
HTML-код
- Опубликовано: 14 июн 2024
- 🌱 Source Code: www.codewithgionatha.com/repo...
💬 Discord: / discord
📚 Resources
electron-vite: electron-vite.org/
In this video, we are going to build a Markdown Notes desktop application using Electron, React, Typescript, Tailwind, and Jotai.
Timestamps
00:00:00 Intro
00:02:16 Creating an Electron Project
00:09:38 Codebase configuration (Prettier, eslint, tsconfig)
00:19:08 Project structure
00:26:48 Styling setup
00:33:08 Creating the UI
01:11:22 Adding the Editor
01:23:30 Adding Jotai
01:49:45 File system integration
01:55:44 Reading the notes from fs
02:14:50 Reading the content of the note
02:25:00 Saving the note content
02:32:45 Implementing auto saving
02:42:19 Creating new notes
02:55:00 Deleting the notes
03:09:09 App bundling
03:13:42 Outro 
Наука
Unfortunately, I discovered later that Windows has some compatibility problems. Specifically, the background blur effect seems to be supported only on MacOS.
Also path separators are different: on Windows you should use `\` instead of `/`.
this solution is:
export const getRootDir = () =>{
return `${homedir()\\${appDirectoryName}}`
}
And styles:
body {
@apply h-full;
@apply select-none;
@apply bg-slate-900;
@apply font-mono antialiased text-white;
@apply overflow-hidden;
}
@@vmaspadlegion8215 I added it at 00:28:38
@@gionatha Oh yes I saw it, I just added the version for those who are windows users.
set backgroundMaterial to 'acrylic' will make the background blur take effect on windows11
const window = new BrowserWindow({
backgroundMaterial: 'acrylic' // on Windows 11
})
Really cool and original project!
Hey Antonio 👋
So awesome to hear from you! Your channel was super inspiring, and it really got me pumped up to try doing the same thing.
Thanks a bunch for being such a positive influence! 🌟
I wouldn't really call it original when devaslife already made it 2 years ago. Not the mention the vibrancy design is quite similar.
@@OmniOmnium no one asked
@@OmniOmnium did u do also ?
Hey Antonio, Don't you have any plans for creating an electron project tutorial?
Thank god dude. There are almost no react electron projects on RUclips. Thank you
Finally someone with something new & unique. Please bring more Electron content if possible.
Btw have you ever tried Tauri with Solid or React ?
Hey, thanks so much!
Yes, I heard that Tauri is the next big thing after Electron for his performances. Never had the chance to test it with React or Solid.
This video pops up in my recommendation, exactly when I needed this, thanks
This is amazing, youtube instructors hardly make full projects with electron js, Thank you so much. I am definitely working on this and adding it to my portfolio🙏🏽🙏🏽🙏🏽
I was thinking the exact same thing.
Thanks gionatha you helped me alot, I wish you good luck for your channel!
Very interesting project, just what I was looking for thanks!
This tutorial is gold 🔥 Thank you for sharing
Great video. Original and useful content. Well done 🎉
This is really cool and unique project !
Already subscribed to your channel! I noticed you make a effort to offer content based on the best technologies nowadays!
Thank you so much, Extremely useful video
really liked it, gonna make this in couple of days
thanks man
You are just awesome man : ) keep going 👍👍
Great great job!! Thanks for sharing, this was super helpful!
Thank you very much for your tutorial. You have opened my door to a new world.
This is amazing, thanks for your sharing!
This video is pure Gold!!!!!!
Useful stuff! Thanks :)
thanks for the tutorial, it is very detailed and helpful.👍
Great video! GJ!🤓
Thanks so much 🙏🏻
amazing tutorial! just finished it
You are a life saver ;)
Nice channel.
Thanks for the inspiration
thanks for share this video, i love it💖
Awesome video!
Awesome bro.. unique content
It was good, thank you for video!
Oh my... Awesome project
Great buddy; this is good
Unique and useful 👍👍👍
This is great
Please extend this video 👍
But, anyway, is this app supported by windows?
This is amazing bro would try this with tauri :D
Awesome, Tauri is a great alternative to Electron :)
Im following this and trying to use Tauri instead of Electron
appreciated I am looking to learn how to make my own software.
In electron vite using react, how do I pass data from main to renderer?
Hey, if we are using something like firebase (in my case appwrite) how to configure it ?
Hi, what is your theme ?
What mouse and keyboard are u using for coding?
Hello. I use your github code and use the `@shared/types` alias in `main.ts` in the project to import the types in the shared folder. When webstorm moves the mouse over the imported type, the type is not recognized and vscode is normal. Thank you
How would this be possible with Nuxt instead of React?
Looks like dev as life :)
Yes 😀 I took so much inspiration from @devaslife video
How do u get so smooth cursor movement bro?
How will the folder structure change if we have more windows in the application ? As there is preload and renderer for every window right?
Hey, I found some info regarding having multiple windows, in the official electron-vite doc, here you go: electron-vite.org/guide/dev#multiple-windows-app
Is it possible to use a .rtf instead of a .txt?
Also is it possible to have formatting stack? e.g bold and italic
Great video!
Thanks! I think it should be possible but you would need to update the file extension to look for .rtf instead of .txt. Also the enconding of those file should be kept to utf-8.
As for the formatting abilities take a look at the library plugins: mdxeditor.dev/editor/docs/getting-started
@@gionatha Thank you.
What would the name be changed to in the file filter. Is it 'RTF.'? And would this allow underline since currently with markdown there is no underlining but it says it's possible in the MDXEditor docs.
A great Project To Have in the resume. Can I use this project and add some modification with some extra features and publish it as a open source project. If you have permission
Sure, no problem 😄
@@gionathaThanks 😊😊
it looks really cool but unluckily there are some fancy options I can't use in Windows. For example the background can't be transparent, so there are some CSS I have to change.
add the following line in the browesr window instance backgroundMaterial: "acrylic",
Im having problems with the imports on the index file in the lib folder, it doesn't let me import NoteInfo or variables for constants, if you can help me i really appreciates it
Hey, maybe we can discuss this on the Discord server. Find the link in the desc. 👍
I always get window equal to undefined, did you do anything to avoid this error?
Did you define this file 👇 github.com/gionathas/NoteMark/blob/a679397cc887db257487e1ea22ff98a585f80443/src/preload/index.d.ts
Also you get window = undefined at static time (ts complaining) or at runtime?
Btw we can discuss further on discord: discord.com/invite/mN8WD6M4dR
Thank you. Could you implement a simple plugin system into this electron project and make a video.
Hey @Namal, what do you mean by plugin system?
@@gionatha install third party extension. Then other devs can write own logics into this electron app. Ex: vscode's todo, bookmark, prettier extension.
@@NamalJayathunga Still I don't get it, maybe we can discuss it later on Discord, you can find me here: discord.com/invite/mN8WD6M4dR
Hey I'm stuck on installing the tailwind for this project. I've rewatched "styling setup" 3 times now and I'm not going anywhere. Any fix? I'm on windows. Please and thanks
Discord
I am trying to use MDXEditor in a different project but the markdown is not working even after importing the plugins. Any solutions?
I think you are missing the prosing styling. What MDX does is injecting the corresponding markdown as html into your document, and that html needs to be styled properly to look nice.
For example if you insert an heading1, your html will then contain a corresponding h1 element (but unstyled)
I resolved that problem by using tailwind-typography on the root of my markdown editor.
@@gionatha I configured tailwind typography as well but it still didn’t work
1:55:00 I think I have follow all of the steps, but idk why I can't import the constant from the shared folder to the main/lib folder. The shared alias working fine on renderer though. Does anybody have a clue on how to fix this? This is actually the first time I'm trying react.js so yeah.
Hey if you have more info we can discuss it on Discord. Link in the description.
Transparency doesn't work in linux, but it doesn't affect the quality of the video thanks for the content.
Hey soner, thanks for letting me know 🙏
I actually didn't try it on Linux environment and unfortunately, the tutorial is heavily based on a MacOS
@@gionatha it doesn't work on windows neither
@@ILevizzzUnfortunately I think that the properties to make the window blurred work only on MacOS.
I'll see if there is a way to make it work cross-platform.
@@gionatha dont worry! I found a solution in the docs, its not the same as the video, but it works for me, thanks for the response
Could you please share your vscode configs setup
Should be good to follow the code now the theme
Hello, dude. I attempted this project with my Windows 11, but the blur effect does not appear.
Obviously, because the property trafficLightPosition, vibrancy, and visualEffectState only works on macOS. I suggest you to read the Electron.js documentation.
@@MRNandemoari ohh! okay! thanks for the info :)
@@techh4ck936 No problem.
You should try this: in the src/main/index.ts, at line 17 (33:46), change 'vibrancy: 'under-window' to backgroundMaterial: 'acrylic'.
subscribed please bring some compllex apps on electron too pls there's no one on yt who does that yet
20:04 -> i m just bookmarking n will rm my comment later.
40:40
Are you inkdrop user？
I'm not, but I took inspiration from @devaslife's video 😃
volume is just too low,
Bloody complicated