Build a Markdown Notes app with Electron, React, Typescript, Tailwind and Jotai
Vložit
- čas přidán 11. 07. 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 - Věda a technologie
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 CZcams. Thank you
This video pops up in my recommendation, exactly when I needed this, thanks
Great video. Original and useful content. Well done 🎉
really liked it, gonna make this in couple of days
thanks man
This tutorial is gold 🔥 Thank you for sharing
Very interesting project, just what I was looking for thanks!
This is really cool and unique project !
Thanks gionatha you helped me alot, I wish you good luck for your channel!
Great great job!! Thanks for sharing, this was super helpful!
This is amazing, thanks for your sharing!
You are just awesome man : ) keep going 👍👍
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.
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.
Great Video!
Already subscribed to your channel! I noticed you make a effort to offer content based on the best technologies nowadays!
Thank you very much for your tutorial. You have opened my door to a new world.
Thank you so much, Extremely useful video
Thank for this video 🙏🙏
Useful stuff! Thanks :)
thanks for the tutorial, it is very detailed and helpful.👍
This video is pure Gold!!!!!!
Nice channel.
Thanks for the inspiration
amazing tutorial! just finished it
You are a life saver ;)
Awesome video!
thanks for share this video, i love it💖
It was good, thank you for video!
Awesome bro.. unique content
Oh my... Awesome project
Unique and useful 👍👍👍
Great buddy; this is good
Great video! GJ!🤓
Thanks so much 🙏🏻
This is great
appreciated I am looking to learn how to make my own software.
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
dude can we get some more electronjs projects?
Please extend this video 👍
But, anyway, is this app supported by windows?
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 ?
I have created a child window above the parent window.
how can i display componet on it
Hi, what is your theme ?
How do u get so smooth cursor movement bro?
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?
What mouse and keyboard are u using for coding?
Looks like dev as life :)
Yes 😀 I took so much inspiration from @devaslife video
what extension are you using to sort the import modules order
It's a VScode setting feature (settings.json file)
"editor.codeActionsOnSave": {
"source.organizeImports": "always",
},
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
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
@@ILevizzz Puedes mostrar la alternativa para windows?
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. 👍
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
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 😊😊
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
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
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.
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.
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
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",
I think it's better to create css class draggable, instead of apply it to header
.draggable {
-webkit-app-region: drag;
}
also you can apply no-drag to all body to make sure no other element will be draggable. What do you think?
If only the header is supposed to be draggable I don't really see the point of making the entire window draggable and then disabling it with no drag 🤔
Anyway both ways are valid IMHO.
Could you please share your vscode configs setup
Should be good to follow the code now the theme
subscribed please bring some compllex apps on electron too pls there's no one on yt who does that yet
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'.
20:04 -> i m just bookmarking n will rm my comment later.
38:54 HOW?
Are you inkdrop user？
I'm not, but I took inspiration from @devaslife's video 😃
40:40
volume is just too low,
Bloody complicated