Notes Desktop App With Electron JS, SQLite3, React JS, TailwindCSS, Shadcn & Zustand

Notes Desktop App With Electron JS, SQLite3, React JS, TailwindCSS, Shadcn & Zustand

Notes Desktop App With Electron JS, SQLite3, React JS, TailwindCSS, Shadcn & Zustand In this tutorial I showed how to build a working notes app using Electron JS, SQLite3, React JS, TailwindCSS, Shadcn & Zustand Please don't forget to subscribe, it motivates me to do more tutorials like this Buy me a coffee: https://buymeacoffee.com/paulosab In this tutorial you will learn How to configure TailwindCSS in ElectronForge How to configure Shacdn in ElectronForge How to use persistent zustand state management library in Electron JS apps How to use SQLite3 in Electron JS app How to communicated bi-directionally between the main and renderer process using the inter-process communicator (IPC) About the preload.ts and how to expose the preload object to the renderer process using the contextBridge How to create, broadcast, and listen for window custom events How to emit events within the main process How to create a frameless window How to create a custom app dragger How to create a functional context menu and app menu How to create and open a child window Chapters 00:00 - 02:00 - introduction 02:00 - 06:33 - Installation of the app and dependencies 06:33 - 15:02 - Configuration 15:02 - 3:16:00 - App development, Interprocess communication, SQLIte3 3:16:00 - End - Context menu, app menu, child window, emitting events within the main process, and dark mode Links The sources on my github repo: please star and fork https://github.com/paulosabayomi/note... OR Clone it on the CLI with git clone https://github.com/paulosabayomi/note... Electron JS documentation https://www.electronjs.org/docs/latest/ Menu https://www.electronjs.org/docs/lates... Shadcn manual installation https://ui.shadcn.com/docs/installati... ElectronForge https://www.electronforge.io/ Webpack & TypeScript https://www.electronforge.io/template... React & TypeScript https://www.electronforge.io/guides/f... TailwindCSS https://tailwindcss.com/docs/ TailwindCSS/PostCSS installation https://tailwindcss.com/docs/installa... SQLite3 https://www.npmjs.com/package/sqlite3 Zustand https://www.npmjs.com/package/zustand Zustand TypeScript usage https://www.npmjs.com/package/zustand... EditorJS https://editorjs.io/getting-started/ Lucide icons https://lucide.dev/icons/ Create resumes and cover letters just by describing yourself and your professional experience on CareerDolphin.com Also boost your interview confidence by taking free professional mock interviews on CareerDolphin.com, review your resumes and get instant reviews Try it out https://careerdolphin.com #electronjs #sqlite3 #tailwindcss #zustand #shacdn #electronforge