The Snippets Application

The technology

1. Next.js v14 for the front end
2. Next Auth/Next UI/App Router
3. Prisma Sqlite connect with local database
4. TailwindCSS for Style
5. Using Monaco-editor/react

Create Records

1. Create a prisma client to access database
2. Create a form in SnippetCreatePage
3. Define a Server Action function that will be called when the form is submitted/change data in next app
4. Validate user input in Server Action when create a new Snippet
5. Redirect the user to Home Page that lists all the snippets created

Client component: Next.js

1. Create Client component to passing client side data to render out on Server side component
2. Using @Monaco-editor/react Library to implement code snippet