Expense Manager App with LWC OSS | Only for Mac OS

Name: Expense Manager App with LWC OSS | Only for Mac OS
Rating: 4.3 (17 reviews)

Track, Manage, and Conquer Expenses: Build an Expense Manager App with Salesforce LWC, JSForce, OAuth2, and Express.js

Created bySalesforce troop

Last updated 11/2023

English

What you'll learn

What is LWC OSS and LWR
Will Learn to Build Components & Reusability
Setting up Layout Templates
Server Side Routing
salesforce integration
Salesforce Connected App
Salesforce oauth2 with expressjs
Building real time application

Course content

4 sections • 40 lectures • 6h 36m total length

Introduction1:14
Learn to build a real-time expense manager web app using the lightning web components open source framework with express.js, oauth2, and salesforce integration, including crud operations, charts, and deployment.
Project Demo3:02
Fundamentals2:44
Prerequisites4:22
Project Setup5:40
Folder Structure7:16

Layout Templates4:54
Routing8:25
Adding SLDS6:56
Login Page13:39
Navbar and Lightning Base Components11:13
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.
Alternative for lightning-icon for Window Users0:20
Mock Server Setup5:39
API Calling15:34
Lightning Datatable25:55
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.
Doughnut Chart Setup10:50
Data integration to the Chart22:13
Custom Table15:45
Modal Component9:37
Add Expense27:06
Edit Expense7:16
Delete Expense5:23

Express Server Creation9:05
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.
Salesforce Connected App5:38
Connecting Salesforce with the Project6:23
Using environment variables9:40
Authorization Request OAuth216:41
Access Token Request5:16
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.
Storing Access Token4:46
API Integration with Frontend6:09
Get Logged-in User Info20:30
Logout API and it’s integration6:58
Develop a logout API and integrate it with the front end, clearing local storage and redirecting to login to resolve invalid session scenarios.
Get Expenses API and it’s integration14:17
Build an expenses api with express.js to fetch data from Salesforce and integrate it with the frontend dashboard, replacing the local json server.
loader8:26
Add and Update Expense20:59
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.
Delete Expense6:24
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.
Code Cleanup13:27
Deployment15:40

Requirements

A PC with Linux or Mac with stable internet
Basic knowledge of the Salesforce platform and LWC
Basic knowledge of HTML, CSS and JS
Willingness to learn & Grow

Description

Welcome to the comprehensive "Expense Manager App in LWC OSS, JSForce, OAuth2 & Express.js" course! In this hands-on learning experience, you will dive into the world of modern web development, Salesforce integration, and secure Authorization to create a powerful Expense Manager application from scratch.

Course Highlights:

LWC OSS Project Setup: Get started by setting up your Lightning Web Components (LWC) Open Source project environment. Learn to harness the power of LWC, a cutting-edge web component framework developed by Salesforce.
Layout Template And Routing: Create a well-structured and visually appealing layout template for your app, and implement routing to navigate seamlessly through different sections.
Express.js: Discover Express.js, a popular Node.js framework, and use it to build the backend of your Expense Manager app. Master the art of server-side development.
Building REST Services: Learn how to design and implement RESTful APIs to facilitate communication between the frontend and backend of your application.
Salesforce Connected App: Gain insight into Salesforce integration by setting up a Connected App, allowing your app to interact securely with Salesforce services.
OAuth2 Authorization: Understand the fundamentals of OAuth2 Authorization, ensuring that your app maintains robust security standards.
CRUD Operation of Expenses: Implement Create, Read, Update, and Delete (CRUD) operations for managing expenses within your app.
LWC Components, Charts, Tables & Reusability: Create custom Lightning Web Components for different features of your Expense Manager, including interactive charts and tables. Discover the power of reusability in web development.
Deployment: Learn how to deploy your Expense Manager app, making it accessible to users worldwide. Explore various deployment options and best practices.

Join us on this exciting journey to become a proficient web developer and Salesforce integration expert. Enroll now and start building your Expense Manager App today!

Who this course is for:

Salesforce Professionals
Salesforce Developers who wants to learn building real time application
Willing to Learn LWC OSS & LWR
Willing to learn Salesforce connected App, jsforce and oAuth2

Expense Manager App with LWC OSS | Only for Mac OS

What you'll learn

Explore related topics

Course content

Introduction and Project Setup6 lectures • 24min

Frontend Development16 lectures • 3hr 11min

Salesforce Org and Data Model Creation2 lectures • 11min

Backend Development & Integration16 lectures • 2hr 50min

Requirements

Description

Who this course is for: