Media is too big
VIEW IN TELEGRAM
25. Creating a Basic Server
Scott discusses the concept of a Node.js server, which listens for incoming network requests and responds by executing code or providing data. A walk through the process of creating a basic Node.js server is also covered this segment.
- https://scottmoss.notion.site/What-is-a-server-30a9e93be3434ac097a01781a644b984
#lesson
Scott discusses the concept of a Node.js server, which listens for incoming network requests and responds by executing code or providing data. A walk through the process of creating a basic Node.js server is also covered this segment.
- https://scottmoss.notion.site/What-is-a-server-30a9e93be3434ac097a01781a644b984
#lesson
Media is too big
VIEW IN TELEGRAM
26. Interpolating Data & Formatting Notes
Scott showcases how to interpolate the notes data, inserting or embedding values into a string or template to dynamically create a new string. How to define the format of the returned notes is also covered in this segment.
- https://scottmoss.notion.site/Vanilla-server-5d063de22e2f4d8e96567a6ccac1f30a
#lesson
Scott showcases how to interpolate the notes data, inserting or embedding values into a string or template to dynamically create a new string. How to define the format of the returned notes is also covered in this segment.
- https://scottmoss.notion.site/Vanilla-server-5d063de22e2f4d8e96567a6ccac1f30a
#lesson
Media is too big
VIEW IN TELEGRAM
27. Sending Notes to the Client
Scott illustrates the utilization of the createServer function to take the array of notes and generate a Node.js HTTP server that serves the formatted HTML to the client.
#lesson
Scott illustrates the utilization of the createServer function to take the array of notes and generate a Node.js HTTP server that serves the formatted HTML to the client.
#lesson
Media is too big
VIEW IN TELEGRAM
28. Wrapping Up
Scott wraps up the course by summarizing the CLI app built throughout the lessons. Resources and suggestions for further learning opportunities are also provided in this segment.
#lesson
Scott wraps up the course by summarizing the CLI app built throughout the lessons. Resources and suggestions for further learning opportunities are also provided in this segment.
#lesson
Title: Build an AI-Powered Fullstack Next.js App, v3
Description: Create a full-stack AI-powered Journal app from scratch in Next.js. See how all the pieces of Next.js/React fit together to deploy your app to the world!
Link: https://frontendmasters.com/courses/fullstack-app-next-v3/
Time: 7 hours, 34 minutes
Lessons: 48 / 48
Tags: #course #frontendmasters #720p
Description: Create a full-stack AI-powered Journal app from scratch in Next.js. See how all the pieces of Next.js/React fit together to deploy your app to the world!
Link: https://frontendmasters.com/courses/fullstack-app-next-v3/
Time: 7 hours, 34 minutes
Lessons: 48 / 48
Tags: #course #frontendmasters #720p
Frontendmasters
Fullstack App with Next.js, v3 Course | Build a Fullstack Web App Leveraging AI
Create a full-stack AI-powered Journal app from scratch in Next.js. See how all the pieces of Next.js/React fit together to deploy your app to the world!
Media is too big
VIEW IN TELEGRAM
1. Introduction
Scott Moss introduces the course and demonstrates the AI-powered application that will be built from scratch with Next.js. The application allows users to log in and manage journal entries with the standard CRUD operations. The entries are analyzed and given an AI-generated sentiment value, summary, and color. The application will be built from scratch, and the final version can be found in the GitHub repo linked below.
- https://github.com/Hendrixer/fullstack-ai-nextjs
#lesson
Scott Moss introduces the course and demonstrates the AI-powered application that will be built from scratch with Next.js. The application allows users to log in and manage journal entries with the standard CRUD operations. The entries are analyzed and given an AI-generated sentiment value, summary, and color. The application will be built from scratch, and the final version can be found in the GitHub repo linked below.
- https://github.com/Hendrixer/fullstack-ai-nextjs
#lesson
Media is too big
VIEW IN TELEGRAM
2. Setup App & Homepage
Scott uses the `create-next-app` CLI tool to scaffold a new application. Next.js version 13.4.5 is recommended for this course. The default application code is removed, and a Prettier config is added.
#lesson
Scott uses the `create-next-app` CLI tool to scaffold a new application. Next.js version 13.4.5 is recommended for this course. The default application code is removed, and a Prettier config is added.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Homepage with Tailwind CSS & Link
Scott codes the homepage layout. JSX is added and includes a title, description, and a button to take the user to the journal page. Tailwind CSS classes are applied to style the page.
#lesson
Scott codes the homepage layout. JSX is added and includes a title, description, and a button to take the user to the journal page. Tailwind CSS classes are applied to style the page.
#lesson
Media is too big
VIEW IN TELEGRAM
4. Authentication with Clerk
Scott introduces Clerk, which will handle the application's authentication. Clerk allows multiple auth providers to be configured. The Clerk library is installed, and SignIn and SignUp components are added to their corresponding pages.
#lesson
Scott introduces Clerk, which will handle the application's authentication. Clerk allows multiple auth providers to be configured. The Clerk library is installed, and SignIn and SignUp components are added to their corresponding pages.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Authentication Middleware
Scott creates a middleware function to ensure all routes except for the home page are protected by the authentication provider. Sign-in and sign-up redirection is configured and the authentication flow is tested.
#lesson
Scott creates a middleware function to ensure all routes except for the home page are protected by the authentication provider. Sign-in and sign-up redirection is configured and the authentication flow is tested.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Understanding Webhooks
Scott explains why webhooks can help integrate multiple services. When an event in one service is triggered, an API call can push data to another service or server to maintain synchronicity between services. The auth branch can be used as a starting point for this lesson.
- https://github.com/Hendrixer/fullstack-ai-nextjs/tree/auth
#lesson
Scott explains why webhooks can help integrate multiple services. When an event in one service is triggered, an API call can push data to another service or server to maintain synchronicity between services. The auth branch can be used as a starting point for this lesson.
- https://github.com/Hendrixer/fullstack-ai-nextjs/tree/auth
#lesson
Media is too big
VIEW IN TELEGRAM
7. Serverless Database with PlanetScale
Scott creates a database in PlanetScale, a database environment compatible with serverless applications. The database is provisioned, and the pscale CLI tool is installed, which allows the local application to connect to the database.
#lesson
Scott creates a database in PlanetScale, a database environment compatible with serverless applications. The database is provisioned, and the pscale CLI tool is installed, which allows the local application to connect to the database.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Setup Prisma ORM
Scott installs and initializes the Prisma ORM. A basic User schema is written and pushed to PlaneScale.
#lesson
Scott installs and initializes the Prisma ORM. A basic User schema is written and pushed to PlaneScale.
#lesson
Media is too big
VIEW IN TELEGRAM
9. User & JournalEntry Schemas
Scott completes the User and JournalEntry schemas. A relation between the two schemas is established, and Prisma will ensure the names and types between the joined fields match.
#lesson
Scott completes the User and JournalEntry schemas. A relation between the two schemas is established, and Prisma will ensure the names and types between the joined fields match.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Analysis Schema
Scott creates the Analysis schema. An analysis contains the mood, summary, color, and a boolean value representing whether the entry is negative.
#lesson
Scott creates the Analysis schema. An analysis contains the mood, summary, color, and a boolean value representing whether the entry is negative.
#lesson
Media is too big
VIEW IN TELEGRAM
11. Database Utility Methods
Scott creates a database utility method for managing connections. With hot module reloading, multiple database connection objects can be created and cause issues in the application. These utility methods check if the connection has already been established and reuse the existing connection.
#lesson
Scott creates a database utility method for managing connections. With hot module reloading, multiple database connection objects can be created and cause issues in the application. These utility methods check if the connection has already been established and reuse the existing connection.
#lesson
Media is too big
VIEW IN TELEGRAM
12. Creating a New User
Scott codes the workflow for creating a new user. When Clerk creates a new user, they are redirected to new-user route where the user data is sent to Prisma. Once Prisma is updated, the user is redirected to the journal page. The db branch can be used as a starting point for this lesson.
- https://github.com/Hendrixer/fullstack-ai-nextjs/tree/db
#lesson
Scott codes the workflow for creating a new user. When Clerk creates a new user, they are redirected to new-user route where the user data is sent to Prisma. Once Prisma is updated, the user is redirected to the journal page. The db branch can be used as a starting point for this lesson.
- https://github.com/Hendrixer/fullstack-ai-nextjs/tree/db
#lesson
Media is too big
VIEW IN TELEGRAM
13. Creating the Journal Page
Scott creates the journal page. A layout is created to contain any elements like headers and sidebars that will be reused across the subpages of the journal route.
#lesson
Scott creates the journal page. A layout is created to contain any elements like headers and sidebars that will be reused across the subpages of the journal route.
#lesson
Media is too big
VIEW IN TELEGRAM
14. User Profile Widget
Scott demonstrates how to incorporate a user profile widget provided by the Clerk authentication service.
#lesson
Scott demonstrates how to incorporate a user profile widget provided by the Clerk authentication service.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Selecting Journal Entries
Scott imports the database helper library to the journal page and creates a getEntries method for retrieving entries from the current user.
#lesson
Scott imports the database helper library to the journal page and creates a getEntries method for retrieving entries from the current user.
#lesson
Media is too big
VIEW IN TELEGRAM
16. New Journal Entry UI
Scott creates EntryCard and NewEntryCard components. These components are responsible for displaying existing entries and creating new entries. They are added to the journal page, and additional Tailwind CSS classes are applied.
#lesson
Scott creates EntryCard and NewEntryCard components. These components are responsible for displaying existing entries and creating new entries. They are added to the journal page, and additional Tailwind CSS classes are applied.
#lesson