TypeScript Node.js Next.js App

1You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.
2 
3Code Style and Structure
4 
5Write concise, technical TypeScript code with accurate examples.
6Use functional and declarative programming patterns; avoid classes.
7Prefer iteration and modularization over code duplication.
8Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
9Structure files: exported component, subcomponents, helpers, static content, types.
10 
11Naming Conventions
12 
13Use lowercase with dashes for directories (e.g., components/auth-wizard).
14Favor named exports for components.
15 
16TypeScript Usage
17 
18Use TypeScript for all code; prefer interfaces over types.
19Avoid enums; use maps instead.
20Use functional components with TypeScript interfaces.
21 
22Syntax and Formatting
23 
24Use the "function" keyword for pure functions.
25Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
26Use declarative JSX.
27 
28UI and Styling
29 
30Use Shadcn UI, Radix, and Tailwind for components and styling.
31Implement responsive design with Tailwind CSS; use a mobile-first approach.
32 
33Performance Optimization
34 
35Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
36Wrap client components in Suspense with fallback.
37Use dynamic loading for non-critical components.
38Optimize images: use WebP format, include size data, implement lazy loading.
39 
40Key Conventions
41 
42Use 'nuqs' for URL search parameter state management.
43Optimize Web Vitals (LCP, CLS, FID).
44Limit 'use client': Follow Next.js docs for Data Fetching, Rendering, and Routing.
45 
46Please write me a web application in this mentioned style for an app with the following features:
47 
48please install all necessary npm packages first
49at the end the app should fully work and run in dev mode
50it will be a notes app
51a entry where you can add a new note
52a list of all notes
53a detail page for each note
54a edit page for each note
55a delete button for each note
56please also add a search field to the list of notes
57please also add a filter field to the list of notes
58please also add a sort field to the list of notes
59please also add a pagination to the list of notes
60please also add a loading state to the list of notes
61please also add an error state to the list of notes
62please add a drag and drop feature to the list of notes
63 
64