Build it with me: Leads management system web app

Learn to implement authentication in a leads management web app by building a sign-in form, handling email and password inputs, client-side validation, and error states.

Master authentication flows in a leads management web app by implementing login, password changes, credential handling, error dialogues, and Cognito integration.

Develop and validate an authentication flow by implementing old and new password changes, handling temporary passwords, and ensuring successful sign-in while managing password updates in the system.

Create a reusable useForm hook to refactor the login form, manage form values and validation, and prepare a modular library for the leads management web app.

Learn part 2 of creating a useForm hook, managing on submit, submitting state, and a progress indicator, while handling login errors and standardizing form components into reusable TextField and context-powered flows.

Learn to implement a leads adding feature in a web app using a floating action button and Material UI lead form with first name, last name, middle name, and gender.

Build a list leads page with a searchable interface and pagination using amplify queries. Import api and graphql operations, fetch data into state, and render a material ui table.

Build a list leads page with clickable rows and hover effects, enabling lead detail navigation, plus pagination, per-page controls, and a searchable query.

Build a searchable leads list page by integrating Elasticsearch with the main DynamoDB database, enabling searches, pagination, refresh, and fetch-state controls.

Extract lead listing pagination into a usePaginator hook and a PaginatorTable component, managing page and limit state so you can use the hook or a table view with fetching indicators.

Display lead details on the lead view page within the leads management system, including avatar and profile picture upload, with data fetched to update the view.

Extend the leads management web app by adding an addresses model and linking leads to multiple addresses. Build UI to add and delete addresses with a one-to-many connection using GraphQL.

Add lead addresses part 2 shows how to implement country and state autocomplete in a leads management system web app, including on change handling, use of forms, and UI refinements.

Demonstrate building a virtualized address picker and form for adding lead addresses, including a virtual list with a listbox, country/state selects, line fields, and amplify mutations with validation.

Learn to implement and refactor lead address listing by extracting addresses into a dedicated component, wiring the get lead query, and preparing an address form for adding or editing.

Explore how to build a lead addresses list with icons representing address types (work, home, province), hover effects, and action buttons for editing or deleting, including empty states.

update address list in real-time by listening for a new address event and updating the stored data with the new record at the top.

edit lead address part 1 demonstrates using a single address form for both creating and editing, opening a popup with prefilled data via an edit button.

Edit lead address part 2 demonstrates adding, updating, and submitting addresses, handling network responses, and clearing dependent state when the country changes to ensure valid address records.

Explore how to reliably clear and reset country and state fields when editing a lead's address in a leads management web app, preserving and syncing previous form values.

Upload lead profile pictures with a 1:1 cropper at 150 pixels, read and preview the file, show circular progress, and save to storage with a uid as the file name.

Explore uploading lead profile pictures in a leads management web app, implementing avatar updates, loading states, on-error fallbacks, and S3 storage integration for seamless refreshes.

Learn to add contact details to a lead, including email and phone numbers, using reusable sections and a contact detail model with lead-to-contact relationships and a form-based dialogue.

Build and manage lead contact details with a reusable component-based listing, editing, and deleting workflow, including add forms, state updates, and real-time UI updates via amplify mutations.

Implement adding notes to a lead using a custom tabbed interface with Material UI, a general tab, a notes view, and a lead view context to manage data state.

Add notes to a lead by creating a notes model, linking it to leads, and building a notes UI with forms and owner-based permissions.

List, edit, and delete lead notes using a notes context and graph queries, rendering avatars, timestamps, and latest-first sorting to manage notes in a leads management web app.

Learn how to list, edit, and securely delete notes in the leads management web app, featuring per-note components, edit mode, delete confirmations, and time-ago suffix formatting.

Learn to invite a new user in a leads management web app using Cognito, email delivery, and a temporary password, with promise handling and Lambda layers for graphics and endpoints.

Learn to invite users to the leads management system by deploying lambda layers, updating Cognito and GraphQL clients, and wiring Amplify functions for successful user onboarding.

List users, enable or disable accounts, and resend temporary passwords. Refactor the user list page to support status-driven actions and unconfirmed account handling.

Learn to manage user accounts in a lead management web app by implementing amplify backend updates, enabling and disabling Cognito users, and resending temporary passwords via GraphQL mutations.

Learn to manage user accounts in a lead management web app by listing, enabling or disabling accounts, resending temporary passwords, and updating the UI with Cognito and API integration.

Enforce notes ownership by hiding edit and delete actions for non-owners. Implement an owner-only component and validate owner IDs to ensure secure updates and proper error handling.

Explore implementing user groups and admin only invitations in a leads management web app, with admin versus non-admin permissions, Cognito identity groups, and restricted access for inviting users.

Updates a user to the admin group, invites new users, and manages multiple groups with a Material UI multi-select, validating options and syncing Cognito groups via Amplify.

Learn to manage cognito user groups in the leads management system by adding or removing users from groups via a lambda function and a change user group UI.

Explore lead status management in a web app: define admin-restricted lead status model with update and delete rights, provide a dialog-based status creation form, and fetch/display statuses as chips.

lead statuses part 3 shows implementing data sources for duplicates, building status search and filtering, and handling create, update, delete, and undelete workflows in a leads web app.

Learn to manage lead statuses in a web app by implementing delete, undelete, and restore, fetching statuses, and binding a required status field to leads.

Design and manage lead statuses through an interactive change status dialog, validating lead status id and updating the lead via mutation, while enforcing admin-only updates and preventing deletes.

Master filtering and searching leads by name and status in a web app, using a top text field, a status select, and a search button to refresh the list.

Build it with me: leads management system web app guides you to implement user profile picture changes by building a change profile picture form and wiring an update mutation.

Edit basic user information, first, middle, and last name, and update profile picture while viewing a dedicated profile interface; switch to a change password flow using cognito with validation.

Implement the forgot password flow by sending a confirmation code to the user's email, validating inputs, and resetting the password, with error handling for code mismatches and max attempts.

Implement a top-bar navigation with links to the user list and lead list, plus a profile avatar dropdown for profile and logout, while enforcing access restrictions for admin groups.

Configure UAT and production environments for the lead management app with Amplify, creating isolated dev and master branches. Secure domains, access control, and admin provisioning via Cognito across environments.