DYNAMIC TRIO: Building Web Applications with React, Next.js & Tailwind

The information in this book is provided for educational and informational purposes only. It is not intended as a substitute for professional advice. The author and publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages arising from the information contained in this book. Trademarks: All terms mentioned in this book known as trademarks or service marks have been appropriately capitalized. The author cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Introduction End Goal Structure Prerequisites Assumptions Formats of the Book Code Examples Suggestions Chapter 1: Introduction to React What is React? Understanding the Virtual DOM Components JSX Props State Conclusion Chapter 2: Introduction to Next.js What is Next.js? Server-Side Rendering Static Site Generation Image Optimization Built-in Routing Conclusion Chapter 3: Introduction to Tailwind CSS What is Tailwind CSS? Understanding Utility Classes Styling Elements with Tailwind CSS Common Utility Classes Responsive Design with Tailwind CSS Conclusion Chapter 4: Building “Hello World” Goals of this Chapter The Outcome of this Chapter Creating a Project Configuring TypeScript Setting Up Tailwind CSS Code Example Conclusion Chapter 5: Building A Personal Website Goals of this Chapter Requirements of the Web App Setting Up Creating the Pages Creating A Layout Creating Navigation Bar Making the Navigation Bar Dynamic Building the Footer Building the Projects Page Making the Page SEO-Friendly Code Example Conclusion Chapter 6: Building A Weather App Goals of this Chapter Requirements of the Weather App System Design Task Breakdown Setting Up the Next.js App Setting up OpenWeather API and Acquiring the API key Building the Search Page Styling the Search Page Downloading the City JSON Defining Data Interface for City Data Implementing the City Suggestion Endpoint Building the Detail Page Defining Data Interface for Weather Data Implementing Request to OpenWeather API Displaying An Image Styling the Detail page Code Example Conclusion Chapter 7: Deploying to Production Goals of this Chapter Deploying to Production Setting up Domain Monitoring Conclusion About Author