Build ChatGPT 2.0 with React JS and OpenAI on Your PC

Overview

This course provides an introduction to developing a conversational chatbot using the OpenAI Template and ChatGPT Starter Kit. It covers topics such as initialising a project, designing the chatbot interface, creating Express API routes, React frontend handle submit functions, making backend API requests, and integrating the frontend with the backend. It also covers adding features to select OpenAI models. By the end of the course students will have an understanding of OpenAI configuration and the API key, and will have created a fully functioning chatbot.

Syllabus

- Introduction
- Coding ChatGPT preview
- OpenAI Template Starter Kit
- ChatGPT Starter Kit
- Initialising Project
- Starting Frontend with Create React App
- Designing ChatGPT Side menu
- Styling ChatGPT Side menu
- Designing Prompt Input
- Styling Chat GPT Input
- Coding Chatbot Interface
- Styling the Chat message interface
- Adding OpenAI SVG Logo
- Starting Backend with Express
- Preparing OpenAI Configuration and API Key
- Creating Express API Routes
- React Frontend handle Submit function
- Cleaning up the React Components
- Creating Frontend API Request using Fetch
- Frontend Backend integration
- Adding Features to Select OpenAI Models
- Conclusion