├── .gitignore
├── README.md
├── next.config.mjs
├── package-lock.json
├── package.json
├── src
    ├── app
    │   ├── components
    │   │   ├── NewNoteForm.tsx
    │   │   └── NoteList.tsx
    │   ├── favicon.ico
    │   ├── layout.tsx
    │   └── page.tsx
    └── styles
    │   └── globals.css
├── tsconfig.json
└── types.d.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
37 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "notes_app",
  3 |   "version": "0.1.0",
  4 |   "lockfileVersion": 3,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "notes_app",
  9 |       "version": "0.1.0",
 10 |       "dependencies": {
 11 |         "@fortawesome/fontawesome-free": "^6.6.0",
 12 |         "@fortawesome/fontawesome-svg-core": "^6.6.0",
 13 |         "next": "14.2.11",
 14 |         "react": "^18",
 15 |         "react-dom": "^18"
 16 |       },
 17 |       "devDependencies": {
 18 |         "@types/node": "^20",
 19 |         "@types/react": "^18",
 20 |         "@types/react-dom": "^18",
 21 |         "typescript": "^5"
 22 |       }
 23 |     },
 24 |     "node_modules/@fortawesome/fontawesome-common-types": {
 25 |       "version": "6.6.0",
 26 |       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
 27 |       "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
 28 |       "engines": {
 29 |         "node": ">=6"
 30 |       }
 31 |     },
 32 |     "node_modules/@fortawesome/fontawesome-free": {
 33 |       "version": "6.6.0",
 34 |       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz",
 35 |       "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==",
 36 |       "engines": {
 37 |         "node": ">=6"
 38 |       }
 39 |     },
 40 |     "node_modules/@fortawesome/fontawesome-svg-core": {
 41 |       "version": "6.6.0",
 42 |       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
 43 |       "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
 44 |       "dependencies": {
 45 |         "@fortawesome/fontawesome-common-types": "6.6.0"
 46 |       },
 47 |       "engines": {
 48 |         "node": ">=6"
 49 |       }
 50 |     },
 51 |     "node_modules/@next/env": {
 52 |       "version": "14.2.11",
 53 |       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.11.tgz",
 54 |       "integrity": "sha512-HYsQRSIXwiNqvzzYThrBwq6RhXo3E0n8j8nQnAs8i4fCEo2Zf/3eS0IiRA8XnRg9Ha0YnpkyJZIZg1qEwemrHw=="
 55 |     },
 56 |     "node_modules/@next/swc-darwin-arm64": {
 57 |       "version": "14.2.11",
 58 |       "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.11.tgz",
 59 |       "integrity": "sha512-eiY9u7wEJZWp/Pga07Qy3ZmNEfALmmSS1HtsJF3y1QEyaExu7boENz11fWqDmZ3uvcyAxCMhTrA1jfVxITQW8g==",
 60 |       "cpu": [
 61 |         "arm64"
 62 |       ],
 63 |       "optional": true,
 64 |       "os": [
 65 |         "darwin"
 66 |       ],
 67 |       "engines": {
 68 |         "node": ">= 10"
 69 |       }
 70 |     },
 71 |     "node_modules/@next/swc-darwin-x64": {
 72 |       "version": "14.2.11",
 73 |       "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.11.tgz",
 74 |       "integrity": "sha512-lnB0zYCld4yE0IX3ANrVMmtAbziBb7MYekcmR6iE9bujmgERl6+FK+b0MBq0pl304lYe7zO4yxJus9H/Af8jbg==",
 75 |       "cpu": [
 76 |         "x64"
 77 |       ],
 78 |       "optional": true,
 79 |       "os": [
 80 |         "darwin"
 81 |       ],
 82 |       "engines": {
 83 |         "node": ">= 10"
 84 |       }
 85 |     },
 86 |     "node_modules/@next/swc-linux-arm64-gnu": {
 87 |       "version": "14.2.11",
 88 |       "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.11.tgz",
 89 |       "integrity": "sha512-Ulo9TZVocYmUAtzvZ7FfldtwUoQY0+9z3BiXZCLSUwU2bp7GqHA7/bqrfsArDlUb2xeGwn3ZuBbKtNK8TR0A8w==",
 90 |       "cpu": [
 91 |         "arm64"
 92 |       ],
 93 |       "optional": true,
 94 |       "os": [
 95 |         "linux"
 96 |       ],
 97 |       "engines": {
 98 |         "node": ">= 10"
 99 |       }
100 |     },
101 |     "node_modules/@next/swc-linux-arm64-musl": {
102 |       "version": "14.2.11",
103 |       "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.11.tgz",
104 |       "integrity": "sha512-fH377DnKGyUnkWlmUpFF1T90m0dADBfK11dF8sOQkiELF9M+YwDRCGe8ZyDzvQcUd20Rr5U7vpZRrAxKwd3Rzg==",
105 |       "cpu": [
106 |         "arm64"
107 |       ],
108 |       "optional": true,
109 |       "os": [
110 |         "linux"
111 |       ],
112 |       "engines": {
113 |         "node": ">= 10"
114 |       }
115 |     },
116 |     "node_modules/@next/swc-linux-x64-gnu": {
117 |       "version": "14.2.11",
118 |       "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.11.tgz",
119 |       "integrity": "sha512-a0TH4ZZp4NS0LgXP/488kgvWelNpwfgGTUCDXVhPGH6pInb7yIYNgM4kmNWOxBFt+TIuOH6Pi9NnGG4XWFUyXQ==",
120 |       "cpu": [
121 |         "x64"
122 |       ],
123 |       "optional": true,
124 |       "os": [
125 |         "linux"
126 |       ],
127 |       "engines": {
128 |         "node": ">= 10"
129 |       }
130 |     },
131 |     "node_modules/@next/swc-linux-x64-musl": {
132 |       "version": "14.2.11",
133 |       "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.11.tgz",
134 |       "integrity": "sha512-DYYZcO4Uir2gZxA4D2JcOAKVs8ZxbOFYPpXSVIgeoQbREbeEHxysVsg3nY4FrQy51e5opxt5mOHl/LzIyZBoKA==",
135 |       "cpu": [
136 |         "x64"
137 |       ],
138 |       "optional": true,
139 |       "os": [
140 |         "linux"
141 |       ],
142 |       "engines": {
143 |         "node": ">= 10"
144 |       }
145 |     },
146 |     "node_modules/@next/swc-win32-arm64-msvc": {
147 |       "version": "14.2.11",
148 |       "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.11.tgz",
149 |       "integrity": "sha512-PwqHeKG3/kKfPpM6of1B9UJ+Er6ySUy59PeFu0Un0LBzJTRKKAg2V6J60Yqzp99m55mLa+YTbU6xj61ImTv9mg==",
150 |       "cpu": [
151 |         "arm64"
152 |       ],
153 |       "optional": true,
154 |       "os": [
155 |         "win32"
156 |       ],
157 |       "engines": {
158 |         "node": ">= 10"
159 |       }
160 |     },
161 |     "node_modules/@next/swc-win32-ia32-msvc": {
162 |       "version": "14.2.11",
163 |       "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.11.tgz",
164 |       "integrity": "sha512-0U7PWMnOYIvM74GY6rbH6w7v+vNPDVH1gUhlwHpfInJnNe5LkmUZqhp7FNWeNa5wbVgRcRi1F1cyxp4dmeLLvA==",
165 |       "cpu": [
166 |         "ia32"
167 |       ],
168 |       "optional": true,
169 |       "os": [
170 |         "win32"
171 |       ],
172 |       "engines": {
173 |         "node": ">= 10"
174 |       }
175 |     },
176 |     "node_modules/@next/swc-win32-x64-msvc": {
177 |       "version": "14.2.11",
178 |       "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.11.tgz",
179 |       "integrity": "sha512-gQpS7mcgovWoaTG1FbS5/ojF7CGfql1Q0ZLsMrhcsi2Sr9HEqsUZ70MPJyaYBXbk6iEAP7UXMD9HC8KY1qNwvA==",
180 |       "cpu": [
181 |         "x64"
182 |       ],
183 |       "optional": true,
184 |       "os": [
185 |         "win32"
186 |       ],
187 |       "engines": {
188 |         "node": ">= 10"
189 |       }
190 |     },
191 |     "node_modules/@swc/counter": {
192 |       "version": "0.1.3",
193 |       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
194 |       "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
195 |     },
196 |     "node_modules/@swc/helpers": {
197 |       "version": "0.5.5",
198 |       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
199 |       "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
200 |       "dependencies": {
201 |         "@swc/counter": "^0.1.3",
202 |         "tslib": "^2.4.0"
203 |       }
204 |     },
205 |     "node_modules/@types/node": {
206 |       "version": "20.16.5",
207 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.5.tgz",
208 |       "integrity": "sha512-VwYCweNo3ERajwy0IUlqqcyZ8/A7Zwa9ZP3MnENWcB11AejO+tLy3pu850goUW2FC/IJMdZUfKpX/yxL1gymCA==",
209 |       "dev": true,
210 |       "dependencies": {
211 |         "undici-types": "~6.19.2"
212 |       }
213 |     },
214 |     "node_modules/@types/prop-types": {
215 |       "version": "15.7.12",
216 |       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
217 |       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
218 |       "dev": true
219 |     },
220 |     "node_modules/@types/react": {
221 |       "version": "18.3.6",
222 |       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.6.tgz",
223 |       "integrity": "sha512-CnGaRYNu2iZlkGXGrOYtdg5mLK8neySj0woZ4e2wF/eli2E6Sazmq5X+Nrj6OBrrFVQfJWTUFeqAzoRhWQXYvg==",
224 |       "dev": true,
225 |       "dependencies": {
226 |         "@types/prop-types": "*",
227 |         "csstype": "^3.0.2"
228 |       }
229 |     },
230 |     "node_modules/@types/react-dom": {
231 |       "version": "18.3.0",
232 |       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
233 |       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
234 |       "dev": true,
235 |       "dependencies": {
236 |         "@types/react": "*"
237 |       }
238 |     },
239 |     "node_modules/busboy": {
240 |       "version": "1.6.0",
241 |       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
242 |       "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
243 |       "dependencies": {
244 |         "streamsearch": "^1.1.0"
245 |       },
246 |       "engines": {
247 |         "node": ">=10.16.0"
248 |       }
249 |     },
250 |     "node_modules/caniuse-lite": {
251 |       "version": "1.0.30001660",
252 |       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001660.tgz",
253 |       "integrity": "sha512-GacvNTTuATm26qC74pt+ad1fW15mlQ/zuTzzY1ZoIzECTP8HURDfF43kNxPgf7H1jmelCBQTTbBNxdSXOA7Bqg==",
254 |       "funding": [
255 |         {
256 |           "type": "opencollective",
257 |           "url": "https://opencollective.com/browserslist"
258 |         },
259 |         {
260 |           "type": "tidelift",
261 |           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
262 |         },
263 |         {
264 |           "type": "github",
265 |           "url": "https://github.com/sponsors/ai"
266 |         }
267 |       ]
268 |     },
269 |     "node_modules/client-only": {
270 |       "version": "0.0.1",
271 |       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
272 |       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
273 |     },
274 |     "node_modules/csstype": {
275 |       "version": "3.1.3",
276 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
277 |       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
278 |       "dev": true
279 |     },
280 |     "node_modules/graceful-fs": {
281 |       "version": "4.2.11",
282 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
283 |       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
284 |     },
285 |     "node_modules/js-tokens": {
286 |       "version": "4.0.0",
287 |       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
288 |       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
289 |     },
290 |     "node_modules/loose-envify": {
291 |       "version": "1.4.0",
292 |       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
293 |       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
294 |       "dependencies": {
295 |         "js-tokens": "^3.0.0 || ^4.0.0"
296 |       },
297 |       "bin": {
298 |         "loose-envify": "cli.js"
299 |       }
300 |     },
301 |     "node_modules/nanoid": {
302 |       "version": "3.3.7",
303 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
304 |       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
305 |       "funding": [
306 |         {
307 |           "type": "github",
308 |           "url": "https://github.com/sponsors/ai"
309 |         }
310 |       ],
311 |       "bin": {
312 |         "nanoid": "bin/nanoid.cjs"
313 |       },
314 |       "engines": {
315 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
316 |       }
317 |     },
318 |     "node_modules/next": {
319 |       "version": "14.2.11",
320 |       "resolved": "https://registry.npmjs.org/next/-/next-14.2.11.tgz",
321 |       "integrity": "sha512-8MDFqHBhdmR2wdfaWc8+lW3A/hppFe1ggQ9vgIu/g2/2QEMYJrPoQP6b+VNk56gIug/bStysAmrpUKtj3XN8Bw==",
322 |       "dependencies": {
323 |         "@next/env": "14.2.11",
324 |         "@swc/helpers": "0.5.5",
325 |         "busboy": "1.6.0",
326 |         "caniuse-lite": "^1.0.30001579",
327 |         "graceful-fs": "^4.2.11",
328 |         "postcss": "8.4.31",
329 |         "styled-jsx": "5.1.1"
330 |       },
331 |       "bin": {
332 |         "next": "dist/bin/next"
333 |       },
334 |       "engines": {
335 |         "node": ">=18.17.0"
336 |       },
337 |       "optionalDependencies": {
338 |         "@next/swc-darwin-arm64": "14.2.11",
339 |         "@next/swc-darwin-x64": "14.2.11",
340 |         "@next/swc-linux-arm64-gnu": "14.2.11",
341 |         "@next/swc-linux-arm64-musl": "14.2.11",
342 |         "@next/swc-linux-x64-gnu": "14.2.11",
343 |         "@next/swc-linux-x64-musl": "14.2.11",
344 |         "@next/swc-win32-arm64-msvc": "14.2.11",
345 |         "@next/swc-win32-ia32-msvc": "14.2.11",
346 |         "@next/swc-win32-x64-msvc": "14.2.11"
347 |       },
348 |       "peerDependencies": {
349 |         "@opentelemetry/api": "^1.1.0",
350 |         "@playwright/test": "^1.41.2",
351 |         "react": "^18.2.0",
352 |         "react-dom": "^18.2.0",
353 |         "sass": "^1.3.0"
354 |       },
355 |       "peerDependenciesMeta": {
356 |         "@opentelemetry/api": {
357 |           "optional": true
358 |         },
359 |         "@playwright/test": {
360 |           "optional": true
361 |         },
362 |         "sass": {
363 |           "optional": true
364 |         }
365 |       }
366 |     },
367 |     "node_modules/picocolors": {
368 |       "version": "1.1.0",
369 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
370 |       "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
371 |     },
372 |     "node_modules/postcss": {
373 |       "version": "8.4.31",
374 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
375 |       "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
376 |       "funding": [
377 |         {
378 |           "type": "opencollective",
379 |           "url": "https://opencollective.com/postcss/"
380 |         },
381 |         {
382 |           "type": "tidelift",
383 |           "url": "https://tidelift.com/funding/github/npm/postcss"
384 |         },
385 |         {
386 |           "type": "github",
387 |           "url": "https://github.com/sponsors/ai"
388 |         }
389 |       ],
390 |       "dependencies": {
391 |         "nanoid": "^3.3.6",
392 |         "picocolors": "^1.0.0",
393 |         "source-map-js": "^1.0.2"
394 |       },
395 |       "engines": {
396 |         "node": "^10 || ^12 || >=14"
397 |       }
398 |     },
399 |     "node_modules/react": {
400 |       "version": "18.3.1",
401 |       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
402 |       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
403 |       "dependencies": {
404 |         "loose-envify": "^1.1.0"
405 |       },
406 |       "engines": {
407 |         "node": ">=0.10.0"
408 |       }
409 |     },
410 |     "node_modules/react-dom": {
411 |       "version": "18.3.1",
412 |       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
413 |       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
414 |       "dependencies": {
415 |         "loose-envify": "^1.1.0",
416 |         "scheduler": "^0.23.2"
417 |       },
418 |       "peerDependencies": {
419 |         "react": "^18.3.1"
420 |       }
421 |     },
422 |     "node_modules/scheduler": {
423 |       "version": "0.23.2",
424 |       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
425 |       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
426 |       "dependencies": {
427 |         "loose-envify": "^1.1.0"
428 |       }
429 |     },
430 |     "node_modules/source-map-js": {
431 |       "version": "1.2.1",
432 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
433 |       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
434 |       "engines": {
435 |         "node": ">=0.10.0"
436 |       }
437 |     },
438 |     "node_modules/streamsearch": {
439 |       "version": "1.1.0",
440 |       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
441 |       "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
442 |       "engines": {
443 |         "node": ">=10.0.0"
444 |       }
445 |     },
446 |     "node_modules/styled-jsx": {
447 |       "version": "5.1.1",
448 |       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
449 |       "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
450 |       "dependencies": {
451 |         "client-only": "0.0.1"
452 |       },
453 |       "engines": {
454 |         "node": ">= 12.0.0"
455 |       },
456 |       "peerDependencies": {
457 |         "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
458 |       },
459 |       "peerDependenciesMeta": {
460 |         "@babel/core": {
461 |           "optional": true
462 |         },
463 |         "babel-plugin-macros": {
464 |           "optional": true
465 |         }
466 |       }
467 |     },
468 |     "node_modules/tslib": {
469 |       "version": "2.7.0",
470 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
471 |       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
472 |     },
473 |     "node_modules/typescript": {
474 |       "version": "5.6.2",
475 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
476 |       "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
477 |       "dev": true,
478 |       "bin": {
479 |         "tsc": "bin/tsc",
480 |         "tsserver": "bin/tsserver"
481 |       },
482 |       "engines": {
483 |         "node": ">=14.17"
484 |       }
485 |     },
486 |     "node_modules/undici-types": {
487 |       "version": "6.19.8",
488 |       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
489 |       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
490 |       "dev": true
491 |     }
492 |   }
493 | }
494 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "notes_app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@fortawesome/fontawesome-free": "^6.6.0",
13 |     "@fortawesome/fontawesome-svg-core": "^6.6.0",
14 |     "react": "^18",
15 |     "react-dom": "^18",
16 |     "next": "14.2.11"
17 |   },
18 |   "devDependencies": {
19 |     "typescript": "^5",
20 |     "@types/node": "^20",
21 |     "@types/react": "^18",
22 |     "@types/react-dom": "^18"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/components/NewNoteForm.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useState } from 'react'
 3 | 
 4 | const NewNoteForm = () => {
 5 |   const [content, setContent] = useState('')
 6 | 
 7 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 8 |     e.preventDefault()
 9 | 
10 |   }
11 | 
12 |   return (
13 |     <form onSubmit={handleSubmit}>
14 |       <textarea
15 |         value={content}
16 |         onChange={(e) => setContent(e.target.value)}
17 |         placeholder="Write your note here..."
18 |       />
19 |       <button type="submit">Add Note</button>
20 |     </form>
21 |   );
22 | };
23 | 
24 | export default NewNoteForm


--------------------------------------------------------------------------------
/src/app/components/NoteList.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useState} from 'react'
 3 | 
 4 | export default function NoteList({ initialNotes }: { initialNotes: Note[] }) {
 5 |   const [notes, setNotes] = useState<Note[]>(initialNotes)
 6 | 
 7 |   const handleDelete = async (noteId: string) => {
 8 |  
 9 |   }
10 | 
11 |   return (
12 |     <ul>
13 |       {notes.map((note) => (
14 |         <li key={note.$id} id={note.$id} onClick={() => handleDelete(note.$id)}>
15 |           <p>{note.content}</p>
16 |         </li>
17 |       ))}
18 |     </ul>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamshaunjp/appwrite-tutorial/0fb3ce283e8048feaa0668a251b8733788f81400/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next"
 2 | 
 3 | export const metadata: Metadata = {
 4 |   title: "Create Next App",
 5 |   description: "Generated by create next app",
 6 | };
 7 | 
 8 | export default function RootLayout({
 9 |   children,
10 | }: Readonly<{
11 |   children: React.ReactNode
12 | }>) {
13 |   return (
14 |     <html lang="en">
15 |       <head>
16 |       <link
17 |         href="https://fonts.googleapis.com/icon?family=Material+Icons"
18 |         rel="stylesheet"
19 |       />
20 |       </head>
21 |       <body>{children}</body>
22 |     </html>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import NewNoteForm from './components/NewNoteForm'
 2 | import NoteList from './components/NoteList'
 3 | import '../styles/globals.css'
 4 | 
 5 | export default async function Home() {
 6 |   const notes: Note[] = []
 7 | 
 8 |   return (
 9 |     <div>
10 |       <header>
11 |         <h1>Note Ninja</h1>
12 |       </header>
13 | 
14 |       <NoteList initialNotes={notes} />
15 |       <NewNoteForm />
16 |     </div>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
  1 | /* globals.css */
  2 | 
  3 | /* General Styles */
  4 | body {
  5 |   font-family: 'Rubik', sans-serif;
  6 |   background-color: #e5e5e5;
  7 |   margin: 0;
  8 |   padding: 20px 80px;
  9 |   display: flex;
 10 |   justify-content: center;
 11 |   align-items: center;
 12 |   min-height: 100vh;
 13 | }
 14 | 
 15 | header {
 16 |   text-align: center;
 17 | }
 18 | 
 19 | h1 {
 20 |   margin: 10px auto;
 21 |   font-size: 1.5rem;
 22 |   text-align: center;
 23 |   color: #333;
 24 |   font-weight: 700;
 25 |   position: relative;
 26 |   padding: 10px 0;
 27 |   display: inline-block;
 28 |   border-bottom: 4px solid;
 29 | }
 30 | 
 31 | form {
 32 |   margin-bottom: 30px;
 33 |   text-align: center;
 34 | }
 35 | 
 36 | /* Note Form Styles */
 37 | textarea {
 38 |   width: 100%;
 39 |   max-width: 480px;
 40 |   padding: 20px;
 41 |   margin: 30px auto;
 42 |   border-radius: 7px;
 43 |   border: 1px solid #ddd;
 44 |   font-size: 1rem;
 45 |   background-color: #fff;
 46 |   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 47 |   transition: box-shadow 0.3s ease;
 48 |   display: block;
 49 |   resize: vertical;
 50 |   box-sizing: border-box;
 51 | }
 52 | 
 53 | textarea:focus {
 54 |   box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
 55 |   outline: none;
 56 | }
 57 | 
 58 | button {
 59 |   padding: 12px 24px;
 60 |   border: none;
 61 |   background-color: #05ad6a;
 62 |   color: white;
 63 |   border-radius: 7px;
 64 |   cursor: pointer;
 65 |   font-size: 1rem;
 66 |   transition: background-color 0.3s, transform 0.3s;
 67 |   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 68 | }
 69 | 
 70 | button:hover {
 71 |   transform: translateY(-2px);
 72 | }
 73 | 
 74 | button:active {
 75 |   transform: translateY(0);
 76 | }
 77 | 
 78 | /* Note List Styles */
 79 | ul {
 80 |   display: flex;
 81 |   flex-wrap: wrap;
 82 |   justify-content: center;
 83 |   gap: 30px;
 84 |   padding: 0;
 85 |   list-style-type: none;
 86 |   margin: 50px auto;
 87 | }
 88 | 
 89 | li {
 90 |   background-color: #fffdf5;
 91 |   padding: 20px;
 92 |   border-radius: 12px;
 93 |   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 94 |   width: 240px;
 95 |   position: relative;
 96 |   transform: rotate(-1deg);
 97 |   transition: transform 0.2s ease;
 98 | }
 99 | 
100 | li:hover {
101 |   transform: rotate(0deg);
102 |   cursor: pointer;
103 | }
104 | 
105 | li:nth-child(odd) {
106 |   transform: rotate(1deg);
107 | }
108 | 
109 | li:before {
110 |   content: 'push_pin';
111 |   font-family: 'Material Icons';
112 |   position: absolute;
113 |   top: -15px;
114 |   right: 10px;
115 |   color: #e74c3c;
116 |   font-size: 1.8rem;
117 |   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
118 | }
119 | 
120 | li.crossed-out {
121 |   text-decoration: line-through;
122 |   transition: all 1s ease;
123 | }
124 | 
125 | p {
126 |   margin: 0;
127 |   font-size: 1rem;
128 |   word-wrap: break-word;
129 |   color: #555;
130 |   line-height: 1.5;
131 | }
132 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
1 | interface Note {
2 |   $id: string
3 |   $createdAt: string
4 |   content: string
5 | }


--------------------------------------------------------------------------------