ChatGPT for Coders - A Practical Next/React.js Guide (2023)

Initialize the project by installing Node.js the latest version. Create a Next.js app with npx, set up a src directory, and run the dev server on localhost 3000.

Install and configure Tailwind CSS in a Next.js project, including PostCSS and config files, test with a bold, underlined hello world, and enable Tailwind IntelliSense for troubleshooting.

Design a JSON data file to drive a library gallery of React, Vue, and other frameworks, including logos, descriptions, and documentation links, rendered as clickable cards in a React/Next.js project.

Learn to implement hover border color changes with tailwind by applying dynamic hover classes, interpolating them in a stack JSON, and configuring tailwind's save list to render styles.

Create a dynamic detail page for each framework using Next.js, generating /learning/[stack] pages from stacks.json with getStaticPaths and getStaticProps, rendering React, Vue, and Svelte data.

Guide to building a responsive stack detail page with a full-height wrapper, a header showing a logo and stack info in flex, and a centered 1024px layout.

Design a chat window under the header that shows messages between user and ai, with avatars and text in a flex layout and scrollable overflow.

Create a four-row text area as the chat prompt input, styled with utility classes and the placeholder 'Write your prompt prompts here', and refactor it into a reusable app component.

Move layout code into three reusable components: header, message, and prompt, and wire them into the stack page, passing logo and info as props, and using @ for src imports.

Develop the message component by passing avatar and text props, and adjust the background color. Use an id parity check with a modulo operator to apply alternating backgrounds.

Handle prompt value in a React component by using useState for the text area, submit on Enter with preventDefault, and pass trimmed input to stack.js for processing.

Scroll to bottom: implement auto-scroll by accessing the chat div with a ref and using useEffect to scroll to the last message when the messages array changes.

Send data to api demonstrates posting a prompt to the /api/competition route using fetch and JSON.stringify, with headers, then handling the response and updating the UI.

Post a request from the stack page, read the body to reach the API, and simulate a response by returning a hardcoded JSON result after a short delay.

learn how to display the API results as an ai message in the UI by updating the messages array, using a 200 ok check, and handling errors with console logging.

Apply a typewriter effect to chatbot messages in a React/Next.js chat UI. Use state, useEffect, and a timed interval to reveal the answer character by character.

Add a blinking cursor to the typing UI by wrapping text in a container and applying a blinking-cursor class with a CSS ::after pipe and two-step keyframes.

Disable the blinking cursor with a conditional class when initial text length equals the typed length. Use a ternary on message order to prevent typing questions and keep pre-typed content.

Learn to set up a completion API with OpenAI, configure API keys and model parameters, handle errors, and test prompts from a Next/React.js project.

Debug server-side code in Next.js API routes using a Visual Studio Code launch configuration. Set breakpoints, inspect request bodies and prompts, and run node debugging to troubleshoot efficiently.

Learn to craft a React-specific prompt system that guides an AI assistant to answer only React.js questions, format Markdown code blocks, and provide code examples in a practical debugging workflow.

Learn how to hardcode a response to test React JS components and format code blocks in markdown, then debug, test locally, and evaluate AI-generated code.

Install the react-markdown package, import it, and render markdown from a string to format code blocks and text like headings and italics.

Learn to highlight code blocks in a React markdown setup with React syntax highlighter and prism. Configure markdown components to format inline and block code and apply a dark theme.

Apply a useEffect fix by adding a dependency array with initialText and text, so the effect runs only when these values change, demonstrated with a typewriter component.

Adjust the typewriter effect to 50 ms and fix the blinking cursor by targeting the last child in the blinking cursor container, ensuring the cursor renders after the final text.

The lecture guides building a React function to manage an active session with a state hook, handle onchange events, validate the selection, and prep an API route.

Install and configure iron session in a Next.js API route, wrap the route with the session API, set a user session cookie, and test the request.session object.

Send a put request to /api/completion with the session uid, have the server read the uuid from request.query, log it, and return a 200 with the uid.

Store the UID in a server session by saving it to the session and using a cookie to set and persist the encoded session for future requests.

Learn to retrieve the current user from a post endpoint by reading request.session, validating cookies and API keys, and handling missing user or key errors to enable personalized answers.

Fetch the current user on page load by calling the /api/user endpoint from the client, then persist and highlight the matching active session based on the uid.

Refactor a fetch of a user from a new api endpoint into a reusable React hook by creating hooks/useUser.js with useState and useEffect, returning the user for use in stack.js.

Display the user uid in the UI using JSX to show the active session. The lecture guides refreshing and selection to ensure the uid appears correctly.

Use useEffect with an empty dependency array to run on page reload, and if a user exists, call setActiveSession with the user ID.

Fix the default session selection by binding the select value to the active session, disable the 'choose session' option when a session is selected, and manage cookies across reloads.

Store the conversation between the selected user and ChatGPT in a local in-memory database using LowDB, saving to a db.json file. Create a U2 user node with a conversation array.

Learn how to cache a database connection in a db connect function by using a global lowdb cache; initialize the connection once and return the cached instance on subsequent calls.

Store message history in a per-user database to let the GPT remember context across conversations. Push human prompts and AI responses in a defined format and verify with console logs.

Master persisting chat history by writing to a JSON database in Node.js, using db.read and db.write to create or update db.json in lib, with a robust read-first fallback.

Feed data from a JSON file into a chat completion by joining message history into one string and applying a Volt personality pretext for contextual responses.

Learn to manage message history memory size in ChatGPT workflows by balancing token usage, summarizing history when thresholds are reached, and trimming to a fixed message limit.

Clear chat history on enter by sending a delete request to the completion API to reset the user’s conversation history in the JSON database.

Configure and test multi personality bots for react, view, and svelte by defining prompts in bots.json, wiring them to a stack key, and validating per page behavior.

Implement a no messages state by checking if the messages length is zero and displaying a yellow warning in the chat UI. Prepare deployment to Vercel in the next lecture.

Create a GitHub account and repository, install git, and push your project to GitHub. Then deploy to Vercel by linking the repo to the main branch ignoring env and node_modules.

Deploy your app to vercel by pushing to GitHub, linking the repository, and configuring environment variables, then test online and consider authentication and memory-based or MongoDB/Firestore storage.

Wrap up by switching to an in-memory database, removing JSON file storage and write operations, and verifying message history across users; test locally and deploy to Vercel for the wrap.