Working with React and Go (Golang)

Install node from nodejs.org for your platform, and use the recommended version rather than the latest features version. Verify with node --version, then set up an integrated development environment.

Install go by downloading from go.dev and choosing the correct binary for your operating system. Verify installation with go version in the terminal and use the latest available version.

Install Visual Studio Code, install the React extension for better syntax highlighting and code completion, add the Go extension with tools, and set up Docker to run Postgres.

Install docker to run all microservices as containers, avoiding multiple binaries and enabling easier future service discovery. Docker is free and easy to install with macOS, Windows, and Linux options.

Create your first React app with create-react-app, install via npm, and explore public and src folders, index.js and app.js, plus JSX components and className usage.

Transform a default create-react-app into a class-based React component by creating app class, implementing render, exporting as default, updating imports, and displaying hello world in an h1.

Learn to build hello world in React using a functional component, compare with class components, use JSX and fragments, and adopt hooks in React 18.

Learn to style React components by importing component-specific CSS, using class names to scope styles, and applying red and green h1 colors to individual components.

Import bootstrap CSS to streamline styling in the React and Go course, then apply container, row, and column layouts with className. Explore props in React as you use bootstrap.

Learn how props pass data to React components in both class-based and functional forms, with props treated as read-only and pushed down the component tree using a MSG example.

Explore how to manage component state with use state, handle on click events, and implement conditional rendering to toggle a boolean value in a React app.

Explore converting a React component with state from a functional approach to class components, implement constructor, this.state, and this.setState, and compare class components with functional components and hooks.

Switch to functional components, manage state with useState and useEffect, simulate API data, and render a dynamic list of people using map with unique keys.

Populate a form with three inputs for first name, last name, and date of birth, manage them with React state, update on change, and display live values.

Learn to build a reusable React input component using props for label, type, and state binding, then apply it to a form with last name and date of birth.

Add a submit button to a React form and implement an onSubmit handler that prevents default, logs first name, last name, and DOB, and tests in the browser.

Enhance the React form by validating input in handleSubmit, adding a new person to the crowd with a generated id, sorting by last name, and resetting fields.

Clear form inputs in React by using useRef to access and reset values, and apply forwardRef for inputs inside child components.

Implement forwardRef in a React component to forward refs to input elements, manage multiple refs with useRef, and reset fields like last name and date of birth after submission.

Learn to convert a functional React component to a class component, using a constructor, refs, and state, and a componentDidMount to simulate an API call, while noting hooks simplify components.

Begin the front end for the main project by creating a new React project named go dash movies front end and opening it in Visual Studio Code.

Set up a bootstrap layout with a container, row, and columns, create a navigation menu for home and movies, add a login button, and outline React Router integration.

Install React Router and start using React Router v6, adopting createBrowserRouter and a router provider to define a root path and plan routes for home, login, and movies.

Configure a dedicated error page with useRouteError hook and render it via an error element, while routing a default home and a /movies path to Movies without reloads.

Replace anchor tags with React Router's Link and use the to prop to enable client-side navigation. Learn to wire routes for home, movies, genres, login, admin, and GraphQL.

Build a React and Go movies component that uses useState and useEffect to fake an API, rendering a table of movies with title, release date, and MPAA rating.

Route from the movies component to the individual movie by mapping /movies/:id to the movie singular component, importing it, and confirming the first matching route behavior.

Build a React movie details component that stores movie in state, reads the id with useParams, uses useEffect to fetch data, and displays title, release date, runtime, and mpaa rating.

Implement a login button that uses a jwt token to track authentication. Conditionally render login or logout and hide catalog actions when not logged in for a secure, responsive interface.

Create a React and Go course login form using a reusable input component for email and password, handle submit, and prepare JWT token state for authentication.

Use outlet context to pass the JWT token and its setter to the login component in a React Router app, enabling the login flow to update authentication state.

Implement a reusable bootstrap alert component for the login form, display invalid credentials above the form, and redirect to the home page after a successful login using React Router navigate.

Implement a logout function that clears the jwt token to an empty string and optionally navigates users back to the login screen.

Begin the back end by creating a go module and a cmd/api main with an application config and port 8080. Start a production ready http server with ListenAndServe, initially nil.

Create a Go http handler that returns hello world, route the root to it, and run an 8080 server with listen and serve, then adopt a third-party router for speed.

Install the key router with go get -u github.com/go-key/v5, staying on version five to avoid breaking changes, and leverage the standard library default serve mux for comparison.

Add a get route in routes.go to the app's handler, enabling JSON responses from the domain data and wiring the app receiver to access its information.

Learn to return json from a Go api by creating a payload struct with status, message, and version, marshal it, set headers, and serve it to a React frontend.

Create a backend /movies handler that returns a json list of sample movies, using a movie model and a slice, marshaling to json for the front end.

Connect front end to back end api using fetch to request json, set content-type headers, handle 405 cross-origin errors, and implement middleware to allow localhost 3000 access to 8080.

Enable a cors middleware in Go to permit cross-origin requests by setting access-control headers and handling preflight options, with a development proxy for a seamless front-end to back-end connection.

Enable the React front end to proxy API requests to the Go back end by adding a proxy entry in package.json, restart the app, and verify the backend serves movies.

Set up a Postgres database with docker compose, populate it using create_tables, then connect with Beekeeper Studio to explore tables like movies, genres, and movie_genres in the movies database.

Learn how to connect a Go app to PostgreSQL by parsing DSN flag and building a connection string with host, port, user, password, db name, ssl mode, timezone, and timeout.

Learn to connect Go to Postgres by wiring pgx v4 with the database/sql interface, using underscore imports, opening and pinging the DB, and preparing for a repository pattern.

Adopt a repository pattern with a Postgres DB repo implementing all movies, using a 3-second context timeout and deferring rows close to avoid resource leaks.

Refactor a postgres db repo to satisfy the database repo interface, add a connection method, and enable multi-database support and testing with a mock repo.

Improve the allMovies handler by fetching movies from the database instead of hard-coded data and checking for errors, with the backend using Postgres and JSON to feed the React frontend.

Create a backend helper in utils.go to standardize JSON responses with a JSON response struct. Implement a write JSON function that marshals data, manages status codes, and optional headers.

Add a readJSON helper in the utils package to safely read and decode JSON from requests, enforcing a one megabyte limit, rejecting unknown fields, and ensuring a single JSON value.

Introduce an errorJSON helper in Go to write error messages as JSON via the response writer, using a payload with error and message and an optional status, HTTP bad request.

Use the errorJSON helper to return errors as JSON in handlers, delivering meaningful messages to API clients when a bad request or database error occurs.

Learn to implement go back end authentication with JWT tokens by installing golang-jwt/jwt v4, configuring auth, JWT user, and token pairs, and using http-only cookies for refresh tokens.

Generate a JWT access token and a refresh token by setting claims (name, sub, audience, issuer), expiry, and signing, then return token pairs.

Configure a Go app’s JWT settings by parsing flags for secret, issuer, audience, and cookie domain, assemble a full auth object, and enable token generation for testing.

Learn to build an authentication handler in a Go app that reads JSON credentials, validates a user, generates a JWT token pair, and returns the token.

Run the authentication handler locally to generate a jwt, inspect its payload with jwt.io, and verify the signature using the secret very secret; future work adds refresh tokens and cookies.

Generate a refresh token cookie in Go by adding get refresh cookie on the auth type, set HTTP only, secure, same-site strict, with expiry, and return it with authenticate response.

Learn to read a JSON payload in the authenticate handler, extract email and password, handle read errors, and validate the user by email against the database.

Define a user model and implement get user by email in the Postgres db repo. Wire this into handlers to validate credentials and prepare password verification in the next lecture.

Implement a user method password matches to compare a plaintext password with the stored hash using bcrypt, handle errors, and return an authentication token via JSON with http status accepted.

Update the login component to post a JSON payload with email and password to /authenticate, handle the JWT token in state, and use a refresh token cookie for session longevity.

Learn to implement refresh tokens with http-only cookies, parse and validate refresh token from the cookie, get the user by id, and generate a new token pair with updated cookie.

Learn how to refresh JWTs with a backend /refresh route and a front-end useEffect that fetches with cookies, updates the access token, and handles logout issues.

Learn to securely log out by deleting the refresh token cookie via a backend logout handler and a frontend fetch to /logout, ensuring the browser clears the token.

Learn to keep users logged in by implementing a front-end refresh tokens flow in React, counting down from a 15-minute expiry and auto-fetching new tokens from the back end.

Wrap the refresh toggle in useCallback and connect it to useEffect to refresh every 10 minutes, transparently renewing the JWT and cookies and keeping users signed in.

Learn to protect routes by validating a JWT from the Authorization header using a Bearer token, verifying the signing method and issuer, and applying this logic via middleware.

Implement authentication middleware in Go by extracting and verifying the token from the authorization header, handling errors as unauthorized, and passing control to the next handler if valid.

Apply the auth required middleware to admin routes by wrapping routes that start with /admin, using mux.use with app.required, and add a stub /admin/movies handler that requires a bearer token.

Protect front-end routes with JWT-based authentication by using bearer tokens in the authorization header, redirecting unauthenticated users to login, and testing admin routes like /admin/movies.

Learn to build the add/edit movie form in React and Go, including title, runtime, MPAA rating, and description using a textarea, with genre selection via checkboxes and a dropdown.

Create a reusable react select component that binds its value through props, renders options from a passed array, shows a placeholder, and displays validation errors.

Create a bootstrap-styled checkbox component for a form. Implement the checkbox with props for value, name, onChange, and checked state, and render a label beside it.

Design and manage a React-based add/edit movie form with four inputs, a hidden id, and live state validation; handle login redirects via JWT, useParams, and prepare REST API submissions.

Continue building the EditMovie form by adding release date, runtime, MPAA rating, and a description text area, wired to the movie state with basic validation and planned genre checkboxes.

Fetch a movie and its genres from the database, populate a front-end genres checklist with checkboxes, and support an edit mode that returns all genres for selection.

Learn to implement public and admin movie retrieval in Go, returning movie data with associated genres through /movies/{id} and /admin/movies/{id} endpoints.

Display a movie to the public in React by fetching data from the backend and rendering the title, release date, runtime, genres as Bootstrap badges, and the IMDb poster.

Enable the add and edit movie component to show all genres by implementing a back-end /genres endpoint and a front-end fetch in the component.

Add checkboxes for the 13 available genres to the movie form, initialize a genres array in state, fetch the genre list, and support add and edit movie workflows through routes.

Enable checkbox interactions in the edit movie component by toggling genre selections and syncing genre IDs in state through temporary arrays, splice, and push updates.

Implement client-side form validation for a movie form by enforcing required fields and at least one genre, using a JavaScript errors array and a handleSubmit function with visual error feedback.

Validate that users pick at least one genre in the front-end edit movie form by checking the genres array length. Show a sweet alert when empty.

Implement a Postgres db repo function to insert a movie, returning the new ID and handling context and error checks in Go.

Develop a backend handler that receives a json payload, inserts the movie and its genres into the movies genres table, and fetches a poster image from a remote API.

Develop a get poster function to query a remote movie db api, parse json results, extract poster_path, and populate the movie image field during insert movie.

Demonstrates building a get poster function to fetch a movie poster from a remote API, encode the title in the URL, parse JSON, and update created at and updated at.

Update movie genres by clearing existing entries and inserting new ones from the genre IDs, integrated into the insert movie flow and postgres db repo.

Insert a movie from the front end by building json headers with bearer authorization, choosing put or patch by movie id, converting release date and runtime, and posting to admin/movies.

Develop and test the full stack by adding a movie, diagnose a SQL error near values, fix the insert, restart the backend, and confirm Die Hard appears with details.

Implement and debug the edit movie workflow in the admin catalog. Fetch the movie and genres, populate the edit form, and handle errors with proper authorization and data formatting.

Bind the MPAA rating to the select component by passing the movie MPAA rating as a value prop, then switch to a patch request and implement a backend patch handler.

Implement a back-end update movie function in the Postgres db repo to change title, description, release date, runtime, mpaa rating, and image for a given id.

Write a patch handler that reads a movie payload, updates the movie and its genres in the database, and returns a movie updated JSON response.

Edit a movie from the front end, fix a patch vs put mistake, and verify action, crime, and thriller tags while handling errors in a React and Go app.

Implement a delete movie flow with a sweet alert confirmation dialog, show a delete button in edit mode, and perform a JWT‑authorized delete fetch to /admin/movies, returning to manage catalog.

Implement a Go function in the Postgres db repo to delete a movie by id, using a parameterized SQL statement and relying on cascade to remove genres, with error handling.

Implement a delete movie handler that reads the id from the URL, deletes the movie in the database, handles errors, and returns a JSON response confirming deletion.

Delete a movie end-to-end across frontend and backend with Docker, including adding a sample film, confirming deletion, and updating the catalog and genres view through React prop passing.