Skip to content

nullnotnil/foodfinder_nextjs

Repository files navigation

Table of content:

  1. Praise for The Complete Developer
  2. Title Page
  3. Copyright
  4. Dedication
  5. About the Author and Technical Reviewer
  6. Acknowledgments
  7. Introduction
    1. Who Should Read This Book?
    2. What’s in This Book?
    3. The Parts of a Full-Stack Application
      1. The Frontend
      2. The Middleware
      3. The Backend
    4. A Brief History of JavaScript and Full-Stack Development
    5. Setting Up
  8. Part I: The Technology Stack
    1. 1. Node.JS
      1. Installing Node.js
      2. Working with npm
      3. The package.json File
        1. Required Fields
        2. Dependencies
        3. Development Dependencies
      4. The package-lock.json File
      5. Creating a Project
        1. Initializing a New Module or Project
        2. Installing the Dependencies
        3. Installing the Development Dependencies
        4. Auditing the package.json File
        5. Cleaning Up the node_modules Folder
        6. Updating All Packages
        7. Removing a Dependency
        8. Installing a Dependency
        9. Using npx to Execute a Script Only Once
      6. Exercise 1: Build a “Hello World” Express.js Server
        1. Setting Up
        2. Writing the Server Code
      7. Summary
    2. 2. Modern Javascript
      1. ES.Next Modules
        1. Using Named and Default Exports
        2. Importing Modules
      2. Declaring Variables
        1. Hoisted Variables
        2. Scope-Abiding Variables
        3. Constant-Like Data
      3. Arrow Functions
        1. Writing Arrow Functions
        2. Understanding Lexical Scope
        3. Exploring Practical Use Cases
      4. Creating Strings
      5. Asynchronous Scripts
        1. Avoiding Traditional Callbacks
        2. Using Promises
        3. Simplifying Asynchronous Scripts
      6. Looping Through an Array
      7. Dispersing Arrays and Objects
      8. Exercise 2: Extend Express.js with Modern JavaScript
        1. Editing the package.json File
        2. Writing an ES.Next Module with Asynchronous Code
        3. Adding the Modules to the Server
      9. Summary
    3. 3. Typescript
      1. Benefits of TypeScript
      2. Setting Up TypeScript
        1. Installation in Node.js
        2. The tsconfig.json File
        3. Dynamic Feedback with TypeScript
      3. Type Annotations
        1. Declaring a Variable
        2. Declaring a Return Value
        3. Declaring a Function’s Parameters
      4. Built-in Types
        1. Primitive JavaScript Types
        2. The union Type
        3. The array Type
        4. The object Type
        5. The tuple Type
        6. The any Type
        7. The void Type
      5. Custom Types and Interfaces
        1. Defining Custom Types
        2. Defining Interfaces
        3. Using Type Declaration Files
      6. Exercise 3: Extend Express.js with TypeScript
        1. Setting Up
        2. Creating the tsconfig.json File
        3. Defining Custom Types
        4. Adding Type Annotations to the routes.ts File
        5. Adding Type Annotations to the index.ts File
        6. Transpiling and Running the Code
      7. Summary
    4. 4. React
      1. The Role of React
      2. Setting Up React
      3. The JavaScript Syntax Extension
        1. An Example JSX Expression
        2. The ReactDOM Package
      4. Organizing Code into Components
        1. Writing Class Components
        2. Providing Reusable Behavior with Hooks
      5. Working with Built-in Hooks
        1. Managing the Internal State with useState
        2. Handling Side Effects with useEffect
        3. Sharing Global Data with useContext and Context Providers
      6. Exercise 4: Create a Reactive User Interface for the Express.js Server
        1. Adding React to the Server
        2. Creating the Endpoint for the Static HTML File
        3. Running the Server
      7. Summary
    5. 5. Next.JS
      1. Setting Up Next.js
        1. Project Structure
        2. Development Scripts
      2. Routing the Application
        1. Simple Page Routes
        2. Nested Page Routes
        3. API Routes
        4. Dynamic URLs
      3. Styling the Application
        1. Global Styles
        2. Component Styles
      4. Built-in Next.js Components
        1. The next/head Component
        2. The next/link Component
        3. The next/image Component
      5. Pre-rendering and Publishing
        1. Server-Side Rendering
        2. Static Site Generation
        3. Incremental Static Regeneration
        4. Client-Side Rendering
        5. Static HTML Exporting
      6. Exercise 5: Refactor Express.js and React to Next.js
        1. Storing Custom Interfaces and Types
        2. Creating the API Routes
        3. Creating the Page Routes
        4. Running the Application
      7. Summary
    6. 6. Rest and Graphql APIs
      1. REST APIs
        1. The URL
        2. The Specification
        3. State and Authentication
        4. HTTP Methods
      2. Working with REST
        1. Reading Data
        2. Updating Data
      3. GraphQL APIs
        1. The Schema
        2. The Resolvers
      4. Comparing GraphQL to REST
        1. Over-Fetching
        2. Under-Fetching
      5. Exercise 6: Add a GraphQL API to Next.js
        1. Creating the Schema
        2. Adding Data
        3. Implementing Resolvers
        4. Creating the API Route
        5. Using the Apollo Sandbox
      6. Summary
    7. 7. Mongodb and Mongoose
      1. How Apps Use Databases and Object-Relational Mappers
      2. Relational and Non-Relational Databases
      3. Setting Up MongoDB and Mongoose
      4. Defining a Mongoose Model
        1. The Interface
        2. The Schema
        3. The Model
        4. The Database-Connection Middleware
      5. Querying the Database
        1. Creating a Document
        2. Reading a Document
        3. Updating a Document
        4. Deleting a Document
      6. Creating an End-to-End Query
      7. Exercise 7: Connect the GraphQL API to the Database
        1. Connecting to the Database
        2. Adding Services to GraphQL Resolvers
      8. Summary
    8. 8. Testing With the Jest Framework
      1. Test-Driven Development and Unit Testing
      2. Using Jest
      3. Creating an Example Module to Test
      4. Anatomy of a Test Case
        1. Arrange
        2. Act
        3. Assert
      5. Using TDD
        1. Refactoring Code
        2. Evaluating Test Coverage
      6. Replacing Dependencies with Fakes, Stubs, and Mocks
        1. Creating a Module with Dependencies
        2. Creating a Doubles Folder
        3. Using a Stub
        4. Using a Fake
        5. Using a Mock
      7. Additional Types of Tests
        1. Functional Tests
        2. Integration Tests
        3. End-to-End Tests
        4. Snapshot Tests
      8. Exercise 8: Add Test Cases to the Weather App
        1. Testing the Middleware with Spies
        2. Creating Mocks to Test the Services
        3. Performing an End-to-End Test of the REST API
        4. Evaluating the User Interface with a Snapshot Test
      9. Summary
    9. 9. Authorization With OAuth
      1. How OAuth Works
        1. Authentication vs. Authorization
        2. The Role of OAuth
        3. Grant Types
        4. Bearer Tokens
      2. The Authorization Code Flow
      3. Creating a JWT Token
        1. The Header
        2. The Payload
        3. The Signature
      4. Exercise 9: Access a Protected Resource
        1. Setting Up the Client
        2. Logging In to Receive the Authorization Grant
        3. Using the Authorization Grant to Get the Access Token
        4. Using the Access Token to Get the Protected Resource
      5. Summary
    10. 10. Containerization With Docker
      1. The Containerization Architecture
      2. Installing Docker
      3. Creating a Docker Container
        1. Writing the Dockerfile
        2. Building the Docker Image
        3. Serving the Application from the Docker Container
        4. Locating the Exposed Docker Port
        5. Interacting with the Container
      4. Creating Microservices with Docker Compose
        1. Writing the docker-compose.yml File
        2. Running the Containers
        3. Rerunning the Tests
        4. Interacting with Docker Compose
      5. Summary
  9. Part II: The Full-Stack Application
    1. 11. Setting Up the Docker Environment
      1. The Food Finder Application
      2. Building the Local Environment with Docker
        1. The Backend Container
        2. The Frontend Container
      3. Summary
    2. 12. Building the Middleware
      1. Configuring Next.js to Use Absolute Imports
      2. Connecting Mongoose
        1. Writing the Database Connection
        2. Fixing the TypeScript Warning
      3. The Mongoose Model
        1. Creating the Schema
        2. Creating the Location Model
      4. The Model’s Services
        1. Creating the Location Service’s Custom Types
        2. Creating the Location Services
        3. Testing the Services
      5. Summary
    3. 13. Building the Graphql API
      1. Setting Up
      2. The Schemas
        1. The Custom Types and Directives
        2. The Query Schema
        3. The Mutation Schema
      3. Merging the Typedefs into the Final Schema
      4. The GraphQL Resolvers
      5. Adding the API Endpoint to Next.js
      6. Summary
    4. 14. Building the Frontend
      1. Overview of the User Interface
      2. The Start Page
        1. The List Item
        2. The Locations List
        3. The Page
      3. The Global Layout Components
        1. The Logo
        2. The Header
        3. The Layout
      4. The Location Details Page
        1. The Component
        2. The Page
      5. Summary
    5. 15. Adding OAuth
      1. Adding OAuth with next-auth
        1. Creating a GitHub OAuth App
        2. Adding the Client Credentials
        3. Installing next-auth
        4. Creating the Authentication Callback
        5. Sharing the Session Across Pages and Components
      2. The Generic Button Component
      3. The AuthElement Component
      4. Adding the AuthElement Component to the Header
      5. The Wish List Next.js Page
      6. Adding the Button to the Location Detail Component
      7. Securing the GraphQL Mutations
      8. Summary
    6. 16. Running Automated Tests in Docker
      1. Adding Jest to the Project
      2. Setting Up Docker
      3. Writing Snapshot Tests for the Header Element
      4. Summary
    7. A. Typescript Compiler Options
    8. B. The Next.JS App Directory
      1. Server Components vs. Client Components
        1. Server Components
        2. Client Components
      2. Rendering Components
        1. Fetching Data
        2. Static Rendering
        3. Dynamic Rendering
      3. Exploring the Project Structure
        1. Updating the CSS
        2. Defining a Layout
        3. Adding the Content and Route
        4. Catching Errors
        5. Showing an Optional Loading Interface
        6. Adding a Server Component That Fetches Remote Data
        7. Completing the Application with the Navigation
        8. Replacing API Routes with Route Handlers
    9. C. Common Matchers
      1. Built-in Matchers
      2. The JEST-DOM Matchers
  10. Index

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published