Build a Pet Hotel web app with React using ScaffoldHub

Set up and deploy the frontend for the pet hotel app by configuring the base project, enabling Google, Facebook, and Twitter authentication, and implementing internationalization.

Configure and deploy the backend sql version for pet hotel app by setting up google cloud databases, service accounts, and migrations to drop and recreate tables, then start django backend.

Set up and deploy the backend using MongoDB Atlas, create a cluster, whitelist IPs, create a read-write user, obtain the connection string, and run the app locally with debugging.

Set up and deploy the backend with Firebase Firestore for the pet hotel app, including enabling Firestore, configuring service account credentials, installing dependencies, and running locally.

Learn the basics of React and JavaScript before customizing the generated code. Skip ahead if you know the basics, or watch the foundational videos, even at 2x speed.

Explore running JavaScript on the server with Node, managing npm packages, and using async/await with fetch to access APIs, plus object and array techniques and Moment basics.

Master the basics of React, the JavaScript library for building UI with components. Learn rendering with JSX, DOM injection, and state and props in a simple to-do app.

Learn how Redux serves as a state container for a React app, wiring a store with reducers, actions, and dispatch, and using selectors to derive to-dos lists and item counts.

Explore how React Router uses Link and Route components to render content, implement redirects, and use Switch to render the first matching path for topics and topic.

Learn how to build a React form with Formik and Yup, wiring up text fields, validation schemas, and async validation to display errors and disable submission during validation.

Learn how GraphQL powers a pet hotel web app by querying and mutating bookings, applying status, name, and period filters, and retrieving counts for pagination.

Learn to use SQL and Sequelize to model relational data, map tables to entities, and perform SELECT, INSERT, UPDATE, and DELETE operations with joins across settings and users.

Explore MongoDB and Mongoose to define schemas, create models, and run queries with population of related user data in a document-based pet hotel app.

Explore how Firebase Firestore stores data in collections and documents, including nested arrays and objects, and how to run simple queries and access data with data().

Explore customizations in the pet hotel app by tailoring user roles, permissions, and dashboards, and configuring settings, themes, and client access to bookings and pets.

Replace homepage imagery with cute dogs, compress assets, and configure icons and routes in a React ScaffoldHub app using private and public routes, permissions, and i18n labels.

Change the user rules to manager, employee, and pet owner across backend and frontend, adjust permissions and labels, and implement role checks with database resets when needed.

Demonstrate adjusting the user creation flow so new users start as pet owners rather than managers, ensuring first-time clients are assigned the pet owner role.

Redirects the home page to the new pet page when no pets exist, or to bookings when pets are present, via a front-end check in the pet service.

Learn to enforce owner-based access in a React scaffolded pet hotel app, validating the current user, securing listings and bookings, and aligning front-end and back-end permissions.

Refactor booking statuses from strings to a centralized status to enforce constraints across the back end and front end, updating the database models, API, and internationalization.

In this lecture, learn how to make pet owners see only their own bookings in a React app built with ScaffoldHub, by implementing a current-user filter on the bookings data.

Validate pet deletion by counting related bookings in the bookings repository and blocking delete when a booking exists, with internationalized error messaging and unit tests.

Pet owners can only edit bookings when the status is booked, and managers can edit to any status, with validations ensuring bookings move from booked to canceled only.

Learn to display per-pet bookings in a React web app by showing arrival and departure dates plus status, with a reusable date format method.

Explore booking form validations for owner and pet in a React ScaffoldHub app, enforcing role-based access, owner matching, and status rules to prevent unauthorized edits.

Demonstrate status-based edit restrictions in the booking form of a React ScaffoldHub app, ensuring only managers can reopen canceled bookings and preventing any reopening of completed ones.

enforce status restrictions in the booking form: employees can only change a booking when the data is booked, and managers have full power to override; back end validates status transitions.

Apply conditional rendering in the booking form to show notes and photos in progress, and cancellation notes and receipts only when completed; group with a React fragment for clarity.

Apply color coding to booking statuses in the pet hotel app by adding a color mapping function and updating the table and view to reflect status labels.

Set the manager’s settings page to define a daily fee (decimal) and capacity (integer) with database fields and migrations, updating the settings model and front-end inputs.

Unify booking arrival and departure into a single period component, enforce future dates with validation, and align front-end and back-end data for a pet hotel booking workflow.

Validate pet hotel bookings against capacity by detecting period overlap with active bookings (booked or in progress) and excluding the current booking. Disable saves when the period is unavailable.

Explore filtering bookings by overlapping arrival and departure periods in a React pet hotel app, updating the backend to accept a period array and use overlap logic to return bookings.

Calculate booking fees by counting days between arrival and departure, using the configured daily fee from settings, with end-of-day rules to count each full night, and handle missing data gracefully.

Implement role-based access control so only managers can register employees and other managers, with backend and frontend permission checks, validations, and UI changes to enforce secure role management.

Send booking updates to pet owners by email, including notes and photos, using SendGrid in a React app, with templates and localization to automate in-progress notifications.

Explore internationalization by translating a React pet hotel app to Portuguese and adding backend language support. Implement translation files, dictionaries, and moment locale for multilingual user interface.