Upgrade to React 19 and integrate shadcn/ui component library

Readme.md

@@ -1,38 +1,84 @@
 # Notepad
 
-A Simple realtime note taking application and sharing platform.
+A modern, realtime note taking application and sharing platform built with React 19 and shadcn/ui.
 
 ![Notepad](./public/screenshot.png)
 
-## Available Scripts
+## ✨ Features
 
-Before run create a new firebase project and add the firebase config to the .env file.
+- 📝 Rich text editor powered by Tiptap
+- 🔄 Real-time note saving with Firebase
+- 🌙 Dark mode support
+- 🔐 Encrypted note sharing
+- 📱 Fully responsive design
+- ♿ Accessible UI components (WCAG compliant)
+- ⌨️ Keyboard shortcuts support
+- 🎨 Modern UI with shadcn/ui components
 
-In the project directory, you can run:
+## 🚀 Tech Stack
 
-### `yarn start`
+- **React 19.2.3** - Latest React with improved performance
+- **TypeScript** - Type-safe code
+- **Vite** - Fast build tool
+- **shadcn/ui** - Modern, accessible UI components
+- **Tailwind CSS** - Utility-first CSS framework
+- **Tiptap** - Headless rich text editor
+- **Firebase** - Backend and real-time database
+- **Sonner** - Toast notifications
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+## 📦 Installation
+
+Before running, create a new Firebase project and add the Firebase config to the `.env` file:
+
+```bash
+npm install
+```
+
+## 🛠️ Available Scripts
+
+### `npm run dev`
+
+Runs the app in development mode.\
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn build`
+### `npm run build`
 
-Builds the app for production to the `build` folder.\
+Builds the app for production to the `dist` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+The build is minified and the filenames include the hashes.
+
+### `npm run lint`
+
+Runs ESLint to check for code quality issues.
+
+### `npm run preview`
+
+Preview the production build locally.
+
+## 🎯 Recent Updates
+
+- ✅ Upgraded to React 19.2.3
+- ✅ Integrated shadcn/ui for modern UI components
+- ✅ Replaced all native dialogs with accessible components
+- ✅ Added proper error handling throughout
+- ✅ Improved code quality and type safety
+- ✅ Enhanced user experience with smooth animations
+
+## 📝 ToDo
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+- [x] Add Firebase
+- [x] Convert the project to TypeScript
+- [x] Modern UI with shadcn/ui
+- [ ] Encrypt Notes (end-to-end)
+- [ ] Add User Authentication
+- [ ] Add User Profile
+- [ ] Add User Settings
+- [ ] Collaborative editing
 
-### ToDo
+## 📄 License
 
--   [x] Add Firebase
--   [ ] Encrypt Notes
--   [ ] Convert the project to typescript
--   [ ] Add User Authentication
--   [ ] Add User Profile
--   [ ] Add User Settings
+MIT

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils",
+    "ui": "src/components/ui",
+    "lib": "src/lib",
+    "hooks": "src/hooks"
+  }
+}