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

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 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.

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.

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.

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.

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 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.

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.

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.

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.