Building a Real-Time Project with LWC OSS and LWR

Begin building a real-time web app with the lightning web components open source framework and lightning web runtime, covering layout templates, routing, styling, reusable components, and Netlify deployment.

Build a real-world Honda CR-V web app using Salesforce Lightning Web Components (LWC) OSS and LWR, enabling variant and color selection, price view, lead capture, and automated confirmation emails.

Identify prerequisites for building a real-time lwc oss and lwr project, including chrome, visual studio code, git and github, nodejs and npm, salesforce developer account, and javascript and css basics.

Set up a LWC OSS and LWR project by initializing with npm init lwr, installing yarn, and running the dev server to view hello champion on localhost:3000.

Explore the folder structure of a real-time LWC project, starting with package.json and LWR config json. See how assets, aliases, and root routes map to modules and components.

Learn how layout templates in LWR wrap components and assets, configure a layouts folder, and wire body and LWR resources context objects to render pages with CSS and favicon.

integrate the Salesforce Lightning Design System into your project using approaches: CDN, copying the css into assets, or installing the npm package and copying assets, with synthetic shadow dom enabled.

Create a navbar component for a LWC OSS and LWR project with a logo on the left and a build page link on the right, and apply responsive grid styling.

Design and implement a responsive home page for a real-time LWC OSS and LWR project, including headings, an image, and a grid with three sections of five items.

Develop a range selection component in a real-time project with lwc oss and lwr, rendering radio options from a variants array and dispatching the selected record to the parent.

Build a color selection component in a real-time lwc oss and lwr project. Implement a parent-driven color list with four options and dynamic radio styling to reflect selection.

build a dynamic price footer component for lwc oss and lwr, embed it in the price page, and format the price as usd with zero decimals.

Master component communication in a real-time LWC OSS and LWR project by syncing selected variant, color, and price to update the detail card image name.

Build a reusable model component with a header, body, and footer slots using the lightning design system. Control visibility with a boolean and trigger open, cancel, and submit events.

Animate the footer price using a set interval, starting at 38,000 and incrementing by 100 until it matches the selected price, triggered on page load and variant change.

Push your code to github by configuring git in vscode, creating a repository with a gitignore to exclude node_modules, committing changes, and pushing to origin main for deployment.

Learn to deploy a real-time lwc oss and lwr project by linking GitHub to Netlify, building with yarn, deploying the site folder, and enabling automatic redeploy on pushes.

Create a Salesforce developer account by signing up, verifying your email, and setting a unique username to access the leads object for automatic lead creation in your real-time project.

Create a lead form connected to Salesforce via web-to-lead, embed it in a component, map fields (title, first name, last name, email, city, description), and submit to generate leads.

Create a basic text email template in Salesforce, set it as the default web-to-lead response, and test sending a personalized email using merge fields.

Deploy the six changed files to the hosted app via git and Netlify CI/CD, then test end-to-end from home to lead creation and confirmation email.

Celebrate completing the course by showcasing your achievement to the world, and encourage others to share the course with friends and spread the knowledge.