Expense Manager App with LWC OSS | Only for Mac OS

Configure layout templates for the expense manager app with lwr server, create a layouts/index.html template defining header and footer, and render page content dynamically via the body and lwr_resources context.

Explore routing concepts by comparing server-side routing with client-side routing. Learn how URLs and parameters load specific pages, like home and login, in Salesforce and AWS setups.

Learn how to integrate the Salesforce Lightning Design System (SLDS) into your expense manager app, using a CDN link, SLDS classes for components, and a global style sheet.

Create and style a login page for the expense manager app, featuring a heading, subheading, description, button, and image with a wrapper layout and login.css.

Learn to build a responsive dashboard navbar for an expense manager app using lightning base components, including the app name, username display, and a logout icon with styling and routing.

Set up a mock server with json-server to create mock expenses API from a db.json, expose endpoints, and run on port 3004 to avoid frontend port clashes.

Learn to call APIs from an MWC project with the native fetch API, async/await, and a generic request method that returns json, using a json server and /expenses.

Build lightning data table in an lwc app, define columns and row actions (edit, delete), fetch mock expense data, and implement parent-child communication through custom events in a card layout.

Learn how to set up a doughnut chart inside a web component using chart.js, including creating a chart box component and rendering it with a lifecycle hook.

Integrates expense data into a responsive chart with a lightning layout and 12-column grid, converting category sums to chart labels and data and updating the chart on data changes.

Build a custom table using basic html, populate it dynamically from data, format amounts as currency, and apply styling to header and rows for a clean expense table.

Create a model component in lwc oss with header, body and footer content via named slots, show/hide logic on the home page, and add expense and cancel handlers.

Build an add expense feature by opening a modal form from a blue brand button, then capture name, amount, date, category, and notes with validation and dynamic category dropdown.

Edit expense opens the model with pre-populated row data, changes the heading and button to update expense, and uses the row ID to distinguish add versus update on save.

Learn to implement delete expense with a Lightning confirm dialog, handling async confirmation and wiring a delete handler to remove records and prepare for backend integration.

Set up a Salesforce developer org by completing the sign-up form, verifying the account via email, and creating an eight-character password with a security question.

Create a custom expense object in a Salesforce org using object manager. Define fields expense name, amount (currency), category (picklist), date, and notes, and add a custom tab.

Set up a backend with express.js by scaffolding a node server, configuring port 3002, and adding a /test endpoint that returns json, then run with npm start.

Create a Salesforce connected app and enable OAuth, SAML, OpenID Connect. Manage consumer key and secret, store credentials in a .env file, set the callback URL, and adjust IP restrictions.

Connect Salesforce with the project using the js force package and install via yarn add. Test a /connection endpoint with username, password, and security token to verify the integration.

Learn to use environment variables in your project with the dot env package, moving sensitive information to a .env file and reading it via process.env for flexible server configuration.

Execute a complete Salesforce OAuth2 authorization flow, mapping login, callback, and token retrieval through a controller and service, with end-to-end redirects from localhost login to Salesforce login and back.

Learn to obtain a Salesforce access token by handling the authorization code callback, establishing a connection with your auth config, and printing the access token, refresh token, and instance url.

Store the access token at the server using the node-local-storage library, install and configure it, create a storage instance, and save the token for api calls.

Wire the login API into the frontend by configuring oauth2 login and redirecting Salesforce authorization back to the home page.

Fetch the logged-in user info from Salesforce using an OAuth-backed API. Manage access tokens and instance URLs in local storage, and display the user name in the frontend.

Develop a logout API and integrate it with the front end, clearing local storage and redirecting to login to resolve invalid session scenarios.

Build an expenses api with express.js to fetch data from Salesforce and integrate it with the frontend dashboard, replacing the local json server.

Create a loader component using HTML and CSS, embed it on the home page, and toggle a spinner during API calls to indicate loading.

Build and integrate create and update expense APIs with a front end, wiring expense data (name, amount, date, category, notes) to Salesforce using post and put methods.

Build and integrate a delete expense API end-to-end by creating a delete route, using the record id, and wiring front-end calls to update the data table and chart.

Refactor the expense manager app by extracting duplicated backend logic into reusable functions, standardizing backend URLs, removing console logs, and updating frontend to fetch expense data efficiently.

Deploy the expense manager app by pushing backend and frontend to GitHub, configuring render hosting and environment variables, then test the backend API and finalize the frontend deployment.