Sign in

Preface

What this book covers

The aim of this book is to help you quickly get started with the basic of building fullstack AI web apps with the OpenAI API, Next.js and Tailwind CSS.

In reading this book, my hope is that you'll achieve the following outcomes:

  • Get started quickly with the OpenAI ChatGPT API
  • Learn to build fullstack web apps with Next.js
  • Gain experience building UIs with Tailwind CSS

The code samples in this book are provided under the MIT License. They are mostly drawn from three open source projects on GitHub created by the author that are also provided under the MIT License:

Aside from the code samples, all other contents in this book, including prose explanations and exposition, are copyright David Wu, 2023 onwards, with all rights reserved.

Changelog

This is a dynamic book that will be continuously updated. If you're reading a PDF version of the book, check on Gumroad or the online changelog at https://book.fullstack-gpt.com/changelog to make sure you're reading the latest PDF.

Questions and discussion

If you have a question about any of the projects covered in this book, then you can create a new issue on the GitHub repo most relevant to your question. Here are the links to the issues pages on GitHub: Hello, World; Hello, GPT; and GPT Chatbot

Alternatively, you can email me directly at david@fullstack-gpt.com or message me on Twitter @david_j_wu. I'll do my best to get back to you as soon as I can.

The approach of this book

This book takes a project-based approach. It has been written so that it's useful for developers with both more and less experience.

For developers with more experience who want to quickly build projects and selectively read to fine-tune their understanding, the full source code for the API endpoints and UIs we create are provided at the start of their respective sections, with accompanying summaries.

For developers with less experience who want to go deeper, following the full source code exhibits and accompanying summaries, the subsequent parts of each section will walk through the key source code logic.

What you should know to read this book

To read this book, I'll assume you have the following baseline knowledge:

  • Familiarity with the basics of React
  • Comfort with elementary JavaScript
  • Exposure to HTML and CSS
  • Some experience working with the command line

Particularly relevant when it comes to command line code snippets, I'll assume that you're working on a computer with a Linux-based operating system like MacOS or Ubuntu. If you're working on a computer using Windows, terminal commands may require some adapting.

While TypeScript has many advantages over JavaScript, particularly for larger projects, in this book we use JavaScript due to its greater accessibility.

A note on Next.js

The projects in this book aim to use the latest version of Next.js. Currently, the projects in this book use Next.js version 13.4.6.

In Next.js 13.4, Vercel announced the App Router as stable for production use. The App Router represents the future of Next.js and builds on the existing functionality provided by the Pages Router to integrate React's latest features.

For the projects in this book, we will use the App Router.

For software engineers getting started with Next.js, this is in alignment with Vercel recommending the App Router for new projects.

For software engineers that are already familiar with the Next.js Pages Router, I hope that this book can be a useful resource for picking up the App Router.

Given this is a dynamic book, using the App Router will also provide a solid foundation for this book and opens up the opportunity to further explore the App Router in this book in the future.

Structure of the book

This book is broken down into three chapters, with each chapter corresponding to a project:

Chapter 1. Hello, World: Setting up a starter web app with Next.js and Tailwind CSS

For the first project covered in this book, we set up a barebones “Hello, World!” starter web app with Next.js and Tailwind CSS.

We'll use this starter web app as the starting point for the other projects covered in this book. In the process, we walk through the basics of Next.js and Tailwind CSS.

Chapter 2. Hello, GPT: Building a simple web app with OpenAI's ChatGPT API

Next, we build a simple “Hello, World!”-inspired web app powered by OpenAI’s ChatGPT API.

We'll create a simple backend API endpoint that sends a single pre-defined message to the ChatGPT API and receives a generated response.

On the frontend, we'll build out a simple frontend UI that sends requests and receives responses from this endpoint

While building this web app, we'll cover the basics of working with and understanding OpenAI’s ChatGPT API, including accessing the OpenAI API, the GPT models OpenAI offers, the create chat completion endpoint and tokens, among other topics.

Chapter 3. GPT Chatbot: Building a basic chatbot powered by the ChatGPT API

As the capstone project for this book, we build a chatbot web app powered by OpenAI’s ChatGPT API.

We'll build on the basics of the ChatGPT API covered in the previous chapter to create a backend API endpoint that sends a series of messages (latest and previous messages in a conversation) to the ChatGPT API and receives a generated response.

On the frontend, we'll build a chat UI that enables users to converse with an assistant powered by the ChatGPT API via the backend API endpoint we've created.