Build 7 Real-Time Salesforce(LWC) Projects + Bonus Project

Reset default LWR template configurations in the experience cloud site using the site builder, then adjust full width, spacing, and mobile layout to clean up the page.

Design and styling a BMI calculator layout in a lightning web component by building a centered box with headings and an information wrapper, using CSS variables and slides utilities.

Build a live BMI calculator that displays the BMI value and result on screen, toggles between input and result with a recalculate option, and deploys to go live.

Build a real alarm clock using HTML layout, CSS variables, and dynamic getters, with reusable components, parent‑child data flow, and a ringtone animation in a responsive UI.

Upload a static resource with an image and ringtone, deploy it, and consume it in a LWC component using a JavaScript import and alias.

Build a real-time current time function in a lightning web component by fetching hours, minutes, seconds, converting to 12-hour am/pm, padding zeros, and updating every second with setInterval.

Explore clear alarm functionality in a real-time LWC project by toggling set and clear states, resetting alarm time, and using a public reset method to refresh child dropdowns.

Build a service component in a Lightning Web Component, import its country code data into the app, and populate a combo box with currency and country lists, with change handling.

Build a real-time weather app to track city weather using HTML layout, CSS styling, JavaScript API calls, Apex server logic, static resources, and LWC data binding.

Master layout designing and styling for a weather app using HTML and CSS in VS Code, creating a centered app card with a header, form, and responsive input and button.

Design and implement the weather app's result layout, displaying an image, temperature, description, location, and humidity after the API response, with centered, well-spaced sections and borders.

Integrate API weather data into an HTML UI by fetching, parsing, and displaying city, country, description, temperature, humidity, and feels like, with dynamic icons and loading state handling.

Fix the error by assigning guest user permissions to respond to the survey, and grant access for survey, survey invitations, survey responses, text, and leads under the employee survey profile.

Design and style a note card with a header, description, and footer date, including edit and delete icons, using a glass box container, margins, and flex alignment.

Create a modal component with header, body, and footer slots, control visibility with a show model property, and deploy it in the notetaking app.

Create a note using lwc and Apex by saving form data to Salesforce with an Apex controller. Handle errors with a try-catch and plan a toast notification to confirm success.

Fetch and display existing notes on app load using a wire method to pull id, name, node_description__c, and last_modified_date from My_Node__c, ordered by last modified date descending.

Delete a note by triggering a confirmation modal, calling a server-side delete method, handling the promise to remove the record, show a toast, and refresh the list.

Publish your Salesforce LWC app, test as a guest user, configure object and apex class access (without sharing), deploy to the endpoint, and validate live functionality across devices.

Learn how to model data by creating a custom portfolio object in Salesforce with fields for full name, designation, company name, and company location, used by a banner component.

Create the user personal details data model in the portfolio object using object manager to add email, mobile number, and address fields, configure visibility, and save the new fields.

Grant guest user permits to view and edit address, email, and mobile fields in the guest profile using three-level security in Salesforce Experience Builder, then enable public API access.

Fix mobile styling by centering text and adding space between image and button using a media query at 720 pixel, updating the css for the targeted class, and testing responsiveness.

Create a lightning web component that receives an HTML string from Salesforce and renders it as HTML in the DOM, using a content property with @api and innerHTML.

Display and style technical, tools and software, methodologies, and soft skills as colorful lightning badges on screen, transforming comma separated data into arrays with a for each loop.

Learn how to format education data for an LWC data table. Map records to education, institution name, and passing year, configure columns, hide checkboxes, and reverse row order.

Create and display two certification fields on the portfolio object: a multi-select Salesforce certifications picklist and a long text area for other certifications, integrated into the portfolio layout's certifications section.

Create a certification component and fetch two fields from the portfolio certification object using a wire service and getRecord, then embed the component in the parent portfolio tab.

Display Salesforce certification data on screen using a responsive lightning layout, render certification and other certification cards with icons and names, and map and format semicolon-separated data into lists.

Create three portfolio fields—awards (long text), super badges (multi-select), and languages (long text)—and add them to the page layout, organizing the section for clear in-app viewing.

Display awards, super badges, and languages in a Salesforce lwc project by parsing fields, mapping to icon cards, and styling with existing certification CSS.

Publish and optimize the portfolio site by updating the page title and description. Configure object access and sharing rules, and test responsiveness for go-live readiness.

Build an AI chef app in Salesforce using Prompt Builder and Lightning Web Components to generate three recipes from ingredients, dietary restrictions, meal type, and servings, displayed as recipe cards.

Create a new lightning app named chef in App Manager, customize color, then build a lightning page in App Builder, attach to the app, and open Salesforce AI chef tab.

Integrate apex responses into a lwc UI, validate and normalize recipe data (tags, prep time, cook time, total time), and render recipes with a loading spinner.

Create a reusable recipe stat box in a lightning web component (lwc) that displays prep time, cook time, difficulty, and servings with icons, and integrate a four-column layout.

Display the ingredients on the UI using a two-column lightning layout and render them as a bulleted list showing amount, unit, and name.

Render instructions alongside ingredients in a lightning layout item using an ordered list and slds list_ordered, iterating over the instructions array to display each step.