Master Full-Stack Web Development | Node, SQL, React, & More

Power the dragon stack back end with Node.js, building a JavaScript-based server that generates and serves data to the front end and models the dragon system.

Set up the backend by creating the project directory, running npm init, creating an index.js entry point, and executing node to log hello node.

Explore object oriented programming by modeling dragon objects with a dragon class, attributes like nickname, birthdate, and traits, and creating unique dragon instances.

Define a Dragon Stack dragon class, using a constructor to assign birthdate and nickname with this, export it via module.exports, and create two dragon instances for testing.

Refactor the dragon class to accept a single object with birthdate and nickname, eliminating fragile argument order. This pattern improves clarity and flexibility when creating dragon instances in JavaScript.

Implement a default properties constant in scream case, with fallbacks for nickname and birth date, and use a getter to delay birth date creation, plus setTimeout to demonstrate asynchronous behavior.

Install nodemon as a development dependency, set up start and dev scripts, and use nodemon to automatically restart the Dragon Stack app on file changes.

Explain how Node.js uses the V8 engine and a just-in-time compiler to translate JavaScript into machine code, blending quick startup with loop speed performance inside Node's single-threaded event loop.

Discover how the node event loop uses the call stack and event queue to run asynchronous code, with setTimeout callbacks, promises, and the v8 engine supporting execution.

Define a source of truth for dragon traits by creating a traits.json as a global configuration file, detailing trait types like background color, pattern, build, and size with value arrays.

Seed every dragon with a traits set from the traits JSON file and use a get random traits computed property to generate default traits and support overrides.

Define global time constants and a refresh rate in a root configuration to govern dragon generation intervals, export seconds, minutes, hours, days, and prepare the core generation class.

Create the generation class in JavaScript with an expiration field, compute expiration from the config refresh rate and a random 50 percent adjustment, and encapsulate logic in a calculateExpiration helper.

Define a generation class function that returns a new dragon object by importing the Dragon class, throw an error when date now exceeds expiration, and export the generation for reuse.

Develop a generation engine that creates new generations when the current one expires, using a recursive set timeout workflow and start-stop timer control with clear timeout.

Explore the dragon stack architecture by building a full-stack web application from backend to front end, using a database and an Express API to manage dragon generations.

Explore how Express provides an API layer and a web server for a full-stack app, and understand the basics of HTTP, web requests (GET and POST), headers, and data transfer.

Set up a minimal web server with Express on Node, install Express via npm, and create a get /dragon/new endpoint that returns a new dragon, listening on port 3000.

Organize the Express back end by separating configuration from startup and exporting the app. Restructure files into an app directory with generation and engine subdirectories and a data directory.

Master full-stack organization by restructuring the backend with a bin directory, data folder, and clear requires, then debug npm run dev to resolve stack traces.

Modularize api routes with express routers to expose a get /generation endpoint that returns the current generation details, such as expiration timestamp.

Analyze progress on the Dragon Sech architecture, focusing on the database component to store dragon and generation objects persistently and complete the backend's persistent storage for server restarts.

Explore how PostgreSQL, a relational database management system, stores dragon and generation data in tables with schemas and uses a one-to-many relationship to link dragons to generations.

Install and set up PostgreSQL across Mac, Linux, and Windows to serve as the back-end database for our Dragon Stack authentication project.

Create the Dragon Stack database and a dedicated superuser node_user in PostgreSQL, connect, verify the user, and prepare to define the core tables for the Dragon Stack database.

Create the generation table in the Dragon SAC database with id as serial primary key and expiration as timestamp not null. Use singular naming, uppercase syntax, and end with semicolon.

Create the dragon table with serial primary key id, birthdate not null, nickname, and a foreign key generation_id referencing generation, establishing a one-to-many relationship.

Configure a Node PostgreSQL pool to connect the Dragon Stack database, hide credentials in a secrets file, and protect it with gitignore while enabling select and insert queries.

Verify the node-postgres pool connects to the Dragon's database by running a select from the generation table, handling errors, logging the response, and confirming a working pool before inserting data.

Persist generation objects in a Postgres generation table via the engine pool using a static store generation method with prepared insert, then verify with a select.

Learn how to generate and propagate database IDs for generations using PostgreSQL serial IDs, return values, and promises to safely assign IDs to generation models.

Explore the fundamentals of JavaScript promises, including what promises are, how they resolve or reject, and how to chain then and catch to enforce order in asynchronous tasks.

Attach generation IDs to dragons by updating the constructor with a generation field and default handling, then verify through the dragon/new endpoint and PostgreSQL storage.

store dragons by creating a dragon table, wiring a database pool, and implementing a promise-based store dragon function that inserts birthdate, nickname, and generation id via the dragon API.

Implement express error handling with middleware and next to route errors to a dedicated handler. Return JSON errors with a status code, defaulting to 500.

Compare storing dragon traits as a json string against a many-to-many relation with trait IDs, and choose to store traits in the database with foreign key constraints for reliability.

Create a traits table in PostgreSQL, define a serial id primary key, and implement an insert script to populate trait type and value from a JSON file during configuration.

Establish many-to-many relationships between dragons and traits by retrieving a trait ID from the trade table in PostgreSQL, using a static getTraitID function and promise-based queries.

Create a dragon trait table to form a many-to-many relationship between traits and dragons, using trait_id and dragon_id as foreign keys, and configure the database in the node app.

Store dragon traits by creating dragon-trait associations in the database and linking dragon ids with trait ids, using promise.all to ensure all trait inserts finish before returning the dragon id.

Test and verify dragon trait storage by creating dragons through the API, inspecting the dragon tray table, and using inner joins to combine dragon, trait, and trade data.

Learn to fetch a complete dragon with its traits from PostgreSQL using two queries: first retrieve dragon properties, then obtain relevant traits and merge them into a full dragon object.

Learn to fetch a dragon and its traits by querying the database, joining dragon and trait tables, and returning a Dragon class instance for a full-stack React app.

Dragon Stack architecture check 3 reviews backend progress—core server, API, and database—while outlining a React frontend with Redux and a front-end server for dynamic application state, including upcoming account creation.

Understand how JavaScript runs in browsers, including engines, call stack, and the event loop, and how React uses the virtual DOM to efficiently update the DOM.

Create a front end folder and initialize npm. Install React and React DOM 16.2.0, plus Pozole as the bundler and Babel presets for modern development.

Set up the react frontend by creating index.html and index.js, mounting React to the root div, and wiring babel and parcel for hot reloading via npm scripts.

Master full-stack development by building a generation component that pulls the current generation from the back end and presents it in the Dragon Stack front end using React components.

Manage state in React by moving generation into component state and fetching it from the backend with fetch, using componentDidMount and addressing cross-origin policy.

Enable cross-origin resource sharing on the backend with the cors middleware to align origins with the frontend, and understand the browser's same-origin policy through dev tools.

Discover how the same origin policy blocks scripts from different origins to protect user data. It defines origin by hostname, port, and the URI scheme.

Learn to fetch and render live generation data by parsing the backend response with response.json(), chaining promises, and updating React state with setState to display current generation details.

Learn to implement an engine-like front end that fetches the next generation on a timer using a recursive function with a minimum delay and unmount cleanup.

Create a React class component to fetch a new dragon from the back-end API. Initialize default dragon state with id, generation id, nickname, birthdate, and traits, then render them.

Create a dragon avatar component and pass dragon data from the parent via props to render the avatar, highlighting props-driven data flow in the React component tree.

Learn to render dragons dynamically in a single-page React app by wiring a React Bootstrap button to fetch dragons, update state, and avoid render-time loops with callbacks.

Enhance the dragon stack app by applying bootstrap styling via CDN, updating the HTML head, centering content with 10% margins and 20px font, and prep for redux.

Build customizable dragon avatars by creating a property map for background, color, build pattern, and size, import eight dragon assets, and apply styling to render tailored dragon images.

Design and render a dynamic dragon avatar by overlaying three layers: a background color, a pattern, and the dragon image, controlled by a dragon property map and trait-driven styling.

Understand how Redux uses a single global store as the single source of truth to manage an application's state with unidirectional data flow, actions, and reducers updating store sections.

Install Redux and set up a createStore with a generation reducer to build a central store, then use getState and dispatch to implement actions.

Dispatch actions to the Redux store to see reducers respond to a type. Note how undefined state initializes and the generation payload updates the reducer state.

Explore the generation action creator in Redux, creating action objects with a payload, wiring it to dispatch, subscribe, and log store updates, and fetch generation data from the backend.

Organize a redux project by separating actions and reducers into dedicated folders, exporting action types and creators, and using redux devtools to view state and last actions.

Connect the generation component to the Redock store using react-redux by wrapping the app with a provider and using connect plus mapStateToProps.

Connect the generation component to the Redux store by using mapDispatchToProps to dispatch the generation action, updating the store and props without local state.

Learn to implement redux thunk to handle asynchronous fetch generation with action creators, map dispatch to props, and connect, replacing local fetch calls and enabling middleware-driven updates.

Explains building a robust fetch flow by turning a unified generation object into three action types: fetch, fetch error, and fetch success, and wiring them through dispatch and reducer updates.

Update the generation reducer to handle three action types with a switch and spread operator, and adopt a scalable redux pattern by organizing reducers and using combined reducers.

Learn to manage fetch states in redux by adding a status field (fetching, error, success) to the generation reducer and rendering loading and error feedback.

Implement a new dragon fetch flow in redux: define dragon action types, build fetch dragon action and its er and success cases, update reducers, and connect the ui.

Connect the dragon component to the redux store using connect, mapStateToProps, and mapDispatchToProps to fetch and render dragons with the Fetch Dragon action, plus backend address config.

Examine the full-stack architecture, including the Express API, PostgreSQL database, static file server, and redux-managed frontend, and prepare to implement dragon accounts next.

Learn how https and tls secure web connections for authentication, including encryption with cryptographic keys and server identity via digital certificates from a certificate authority, to earn user trust.

Set up a back-end account feature by creating an account table with a serial primary key, username and password fields, using the create table SQL command and an insertion API.

Implement a back-end account table module to store username and password with a promise-based, parameterized insert using a database pool, and integrate it into the API.

Post a new account via the sign-up api using express and body parser, store credentials in the account table, test with postman, and plan cryptographic password security.

Learn how to replace plaintext passwords with password hashes using a one-way hashing algorithm like SHA-256, enabling secure password verification by hashing incoming passwords and comparing hashes.

Develop a sha-256 based custom hash function using the cryptologists module, enhanced by an app secret from the secrets folder to protect passwords in backend authentication.

Transition to hashing sensitive data by storing username hash and password hash in the accounts table, updating the api and db operations, and enforcing unique usernames to prevent duplicates.

Prevent account duplication by adding a static get a count method that queries the account table by username hash, and enforce constraints during sign-up to return 409 on conflicts.

Understand how server-side sessions use secure cookies to keep users authenticated across connections. See how a signed cookie with username, session ID, and a session hash improves security.

Develop a back-end session class for authentication that generates a unique id with uid v4, builds account data, and outputs a hashed, pipe-delimited session string used as the cookie value.

Extend the session class with a pipe separator and static helpers to parse a session string into user, id, and hash, and verify its validity.

Set a session cookie by creating a session object from the signup flow, converting it to a string, and storing it as a secure, HttpOnly cookie with an expiration.

Enable shared sessions across devices by adding a session ID to the accounts table, creating a set session helper, and updating the session and cookie in a promise-driven flow.

Implement update session id method in account table to set user's session id by username with parameterized update query, returning a promise that resolves on success and rejects on error.

Update the set session helper to chain promises with then and catch, updating the account’s session ID before setting the cookie and returning a session created message.

This lecture details building a login endpoint in a node stack, hashing username and password, validating against the account table, creating or handling sessions and cookies, and testing with Postman.

Learn to implement shared sessions between multiple fronts by using an existing account session id, adjusting the login flow, setting cookies, and restoring sessions for seamless cross-front authentication.

Implement the logout method by reversing the login flow, clearing the session ID in the account table, and clearing the session cookie with kookie parser for Dragon STAC.

Implement a root component that conditionally renders the home page or an authentication form in a React app, using a ternary expression to switch views and prepare routing.

Build the front end of a full stack authentication app by creating an auth form with username and password inputs using react bootstrap, with state and login or sign-up buttons.

Wire input fields to local state in the auth form with onChange to update username and password values from event target, and connect login and sign up buttons to actions.

Create a redux account reducer that handles fetch, fetch error, and fetch success actions to update a logged-in flag, enabling sign-up to navigate to the homepage.

Build a sign up action with Redux that posts username and password to the backend, handles responses and errors, and updates the store with account data.

Hook up the sign-up action to the redux store with connect, mapStateToProps, and mapDispatchToProps to manage account data, sign up, and session status across front end and back end.

Display account status and error states on the art form page and conditionally render to the home component when the account is logged in, using Redux connect.

Implement a logout flow by adding a fetch_logout_success case to the account reducer, clearing the session cookie on the backend, and setting logged in to false.

Implement a logout action in redux by dispatching account fetch to account/logout. Use a generic fetch from account helper to align sign-up and logout endpoints, options, and success types.

Wire a redux logout button on the home page, verify the sign-up refactor, and run backend and frontend dev servers to test the authentication flow.

Implement the redux login flow by duplicating the silent method, posting username and password to the log in endpoint, and wiring the login action creator via connect and map dispatch.

Expose a new get endpoint to verify user authentication by checking session cookies and account data, returning an authenticated object with the user info and gating the front end accordingly.

Validate the user session at startup by dispatching a fetch authenticated action to the Redux store and route to the home page if the session is valid.

Addresses the initial authentication form error by adding a button clicked state and showing errors only after the user clicks sign up or login, focusing on frontend handling.

Create a new account dragon table to link accounts and dragons, with account_id and dragon_id as a composite primary key and both as foreign keys referencing accounts and dragons.

Implement a store account dragon method to insert account id and dragonite into the account dragon table via a database pool, returning a promise.

Learn to associate each new dragon with an account using a session-based authenticated flow, retrieve the account with a helper method, and store the dragon in the account dragon table.

Refactors the dragon-storing workflow into a robust promise chain that authenticates accounts, stores dragons, and updates account dragon relations via the express layer, with front-end cookies and credentials included.

Implement a static get account dragons method that queries the account dragon table and returns an array of dragons for a given account ID.

Create an account dragons endpoint that returns the account's dragons by querying the account dragons table using the authenticated account session, and respond with a JSON array.

Map account dragon IDs to dragon objects with nicknames and traits using the get dragon with traits helper, and display them in React app with incremental endpoints for pagination.

Refactor redux flow to fetch account dragons, create account dragons action, and share a fetch helper, updating types, endpoints, and tests for a cleaner, scalable flow.

Add a new account dragons reducer to the redux store to manage dragons data and status. Handle fetch and success actions to update the dragons array.

Create a connected Account Dragons component in React Redux, fetch account dragons on mount, and render an Account Dragons title in the home view.

Build an account dragon row component in React to render a dragon avatar and nickname, map dragons with unique keys, and plan a separate account dragons page for edits.

configure routing in a react app by installing and using history and react router, creating a browser history, and defining routes for root and account dragons with exact matching.

Demonstrates wiring a React app with Link components from React Router, using the to prop for account-dragons and home routes, comparing anchor tags and implementing authenticated routes.

Learn to enforce login by adding authenticated routes using React Router's redirect component, guarding routes like account-dragons so only signed-in users can access them.

Explore stateless functional components in React, learn how functions replace class components for auth routes, and prepare for higher-order components to secure authentication.

Implement a higher-order component that takes a component as a prop and returns a protected route, redirecting unauthenticated users to the root based on the login state in the store.

Update the dragon nickname by implementing a static update dragon method in the Dragon table, exposing a put /update endpoint, and integrating the change from the React frontend.

Enable editing of a dragon's nickname by turning the nickname into an input, toggling edit and save buttons, and updating via a put request in a React component.

Add a save function in the dragon component that sends a put request to back end to update the nickname by dragon ID, and handle success or errors with alerts.

Preview multi-account interactions by enabling a dragon economy with user-set prices, buy/sell trades, and account balances, then enable dragon breeding via siring using dominant, recessive genetics and randomness.

Add account balances, a market visibility flag, and ownership transfers to support the dragon economy, with a global starting balance of 50 and an info endpoint returning balance and username.

Fetch and display account info in a React-Redux app by adding account info actions, fetch states, and a reducer to handle loading, errors, and success data.

Create a connected React component to fetch and display account info, showing user name and balance, integrated with Redux mapStateToProps and mapDispatchToProps on component mount.

Learn to make dragons public and sellable by adding is public and sale_value columns, updating the dragon model, and building queries that respect not null constraints and avoid partial updates.

Learn to dynamically update dragon records by applying only defined fields from a settings map (nickname, is public, sale value) using object entries and promises.

Update dragon records via the API and UI by adding nickname, public, and sale value fields, wiring them to the Account Dragon Row inputs, and persisting changes to the backend.

Implement a get public dragons method in the helper, fetch public dragon IDs, build full dragon objects with traits, and expose them through the public dragons API endpoint.

Build a public dragons redux module by wiring action creators and reducers to fetch dragons from the backend, update the store, and prepare a user interface to display them.

Connects public dragons page to Redux with connect function, maps dispatch to props, fetches public dragons on mount, and routes to public-dragons with home link, protected by a higher-order component.

Develop a public dragon row component to display each dragon in the public dragons list, showing the dragon avatar, nickname, and sale value, by mapping over dragons from the store.

Implement a static update balance function to adjust an account's balance by a value using a pool, filtering by account id, with error handling and tests.

Learn to implement two static methods in the account dragon table to get and update the dragon account by dragon ID and account ID, using promises and SQL.

Implement the /buy api method that exchanges dragon ownership between seller and buyer, validates sale value, checks dragon public status, authenticates the buyer, and updates balances and dragon records.

Test the new buy method end-to-end by signing up a user and validating sale values. Update public and private dragon states, balances, and the React UI as you buy.

Add a buy button to each public dragon row with React Bootstrap, posting dragon id and sale value to dragon/buy using credentials, then navigate to account dragons on success.

Explore building a dragon breeding feature with a breeder class that generates baby dragons from matron and patron traits, using a genetics-inspired, dominant-recessive model with randomized elements.

Explore implementing a pig trade method that encodes matron and patron traits with base64, then uses a random range to select trades, illustrating dominant-recessive trait dynamics.

Add a sire value to dragons alongside sale value, wiring it through the dragon model, database, and API to enable mating services and a siring fee, with UI updates.

Learn to add and update the sire value in the account dragon row by using a new state field, a number input, and a backend update request.

Coordinate a new back-end post method to breed dragons using promises, validating distinct, public dragons and adjusting balances. Store the baby dragon and link it to the matron account.

Test the dragon siring service across two accounts by pairing a private matron with a public patron using a postman request, generating a baby dragon and tracking balance changes.

Users can select a public dragon and their own dragon to sire a baby dragon, using a sire button to reveal mating options and designate matron and patron.

Build a mating options component that displays account dragons from the redux store and fetches them on the public dragons page, wiring a mate request for a selected dragon.

Send a mate request via a local fetch post to the dragons endpoint, handle the JSON response, and route to the account dragons page to view the new baby dragon.

Implement a per-generation dragon limit by tracking account IDs with a set, enforcing the limit in the new dragon function, and showing an error when a user already has one.