Skip to content

feat: initialize SmartNotes with Electron + React + Tailwind setup #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sarthakkad05 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: initialize SmartNotes with Electron + React + Tailwind setup #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eff11a4
feat: initialize SmartNotes with Electron + React + Tailwind setup
Sarthakkad05 Feb 27, 2026
a81b21d
fix: gate DevTools to development and improve HTML accessibility
Sarthakkad05 Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/electron",
"plugin:import/typescript"
],
Comment on lines +7 to +14
Copy link

@coderabbitai coderabbitai bot Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider adding React-specific ESLint plugins for a React project.

This is a React + Electron application, but the ESLint configuration doesn't include eslint-plugin-react or eslint-plugin-react-hooks. These plugins enforce React best practices such as rules of hooks, component naming, and JSX-specific patterns.

♻️ Proposed enhancement

Add the plugins to devDependencies:

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

Then update .eslintrc.json:

   "extends": [
     "eslint:recommended",
     "plugin:`@typescript-eslint/eslint-recommended`",
     "plugin:`@typescript-eslint/recommended`",
     "plugin:import/recommended",
     "plugin:import/electron",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
   ],
-  "parser": "@typescript-eslint/parser"
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.eslintrc.json around lines 7 - 14, The ESLint config (.eslintrc.json) is
missing React-specific plugins; install eslint-plugin-react and
eslint-plugin-react-hooks as devDependencies (npm install --save-dev
eslint-plugin-react eslint-plugin-react-hooks) and update the ESLint config by
adding "react" and "react-hooks" to the "plugins" array and adding recommended
React configs (e.g., "plugin:react/recommended" and
"plugin:react-hooks/recommended") to the "extends" array and include the React
settings (such as "settings": { "react": { "version": "detect" } }) so rules
like the Hooks rules and JSX/component checks are enforced.

"parser": "@typescript-eslint/parser"
}
39 changes: 39 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,3 +324,42 @@ TSWLatexianTemp*
# option is specified. Footnotes are the stored in a file with suffix Notes.bib.
# Uncomment the next line to have this generated file ignored.
#*Notes.bib


# =========================
# Node / Electron / Vite
# =========================

# Dependencies
node_modules/

# Vite
.vite/
dist/

# Electron Forge
out/
.make/

# TypeScript
*.tsbuildinfo

# Environment files
.env
.env.*
!.env.example

# Logs
logs/
npm-debug.log*
yarn-debug.log*
pnpm-debug.log*

# OS
.DS_Store
Thumbs.db

# Editors
.vscode/
.idea/
.eslintcache
59 changes: 59 additions & 0 deletions forge.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import type { ForgeConfig } from '@electron-forge/shared-types';
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
import { MakerZIP } from '@electron-forge/maker-zip';
import { MakerDeb } from '@electron-forge/maker-deb';
import { MakerRpm } from '@electron-forge/maker-rpm';
import { VitePlugin } from '@electron-forge/plugin-vite';
import { FusesPlugin } from '@electron-forge/plugin-fuses';
import { FuseV1Options, FuseVersion } from '@electron/fuses';

const config: ForgeConfig = {
packagerConfig: {
asar: true,
},
rebuildConfig: {},
makers: [
new MakerSquirrel({}),
new MakerZIP({}, ['darwin']),
new MakerRpm({}),
new MakerDeb({}),
],
plugins: [
new VitePlugin({
// `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
// If you are familiar with Vite configuration, it will look really familiar.
build: [
{
// `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
entry: 'src/main/main.ts',
config: 'vite.main.config.mts',
target: 'main',
},
{
entry: 'src/preload/preload.ts',
config: 'vite.preload.config.mts',
target: 'preload',
},
],
renderer: [
{
name: 'main_window',
config: 'vite.renderer.config.mts',
},
],
}),
// Fuses are used to enable/disable various Electron functionality
// at package time, before code signing the application
new FusesPlugin({
version: FuseVersion.V1,
[FuseV1Options.RunAsNode]: false,
[FuseV1Options.EnableCookieEncryption]: true,
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
[FuseV1Options.EnableNodeCliInspectArguments]: false,
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
[FuseV1Options.OnlyLoadAppFromAsar]: true,
}),
],
};

export default config;
1 change: 1 addition & 0 deletions forge.env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="@electron-forge/plugin-vite/forge-vite-env" />
12 changes: 12 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Smart Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Comment on lines 3 to 7
Copy link

@coderabbitai coderabbitai bot Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider adding a Content-Security-Policy meta tag for Electron security.

Electron applications benefit from strict CSP to mitigate XSS attacks. While this can also be set in the main process, a meta tag provides defense-in-depth.

🛡️ Example CSP for development 
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'" />
     <title>Smart Notes</title>
   </head>

Note: Adjust the CSP directives based on your application's requirements. For development with Vite HMR, you may need to temporarily relax some restrictions.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<head>
<meta charset="UTF-8" />
<title>Smart Notes</title>
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'" />
<title>Smart Notes</title>
</head>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 3 - 7, Add a Content-Security-Policy meta tag inside
the <head> of index.html to provide defense-in-depth for the Electron app;
update the <head> section (where <meta charset="UTF-8" /> and <title>Smart
Notes</title> are defined) to include a CSP meta element with appropriate
directives for your app (adjusting script, style, and connection policies for
dev vs production and Vite HMR) so the page enforces stricter resource loading
and mitigates XSS risks.

<body>
<div id="root"></div>
<script type="module" src="/src/renderer/renderer.tsx"></script>
</body>
</html>
Loading