Challenge Overview
-
Create LWC (Lightning Web Components) for 2 screens in an existing application built using LWC
Project background
-
Client is looking to replace applications built using Aura with LWC. As a POC, we are trying to develop an application using LWC from scratch with the designs provided
Technology Stack
-
Jest for running unit tests
Prerequisites
-
To work on this challenge, Please sign up for free developer account in Salesforce using this link. If you already have a developer account, you could use it as well.
-
After login, Navigate to set up page using the url or by using settings icon in home page and clicking on Setup
-
Follow the steps here to enable a custom domain for your developer organization
-
Your custom domain URL should look something like https://{your-domain}-dev-ed.lightning.force.com
E.g https://sharathkumaranbu-dev-ed.lightning.force.com
- Install Salesforce CLI (SFDX) by following the instructions given here
-
Login into your developer org from SFDX cli
-
Install Node.js 10.x to lint your files and run unit tests
Challenge Assets
Following files are shared in the challenge forum which is accessible after registration.
-
Design source file and marvel link
-
Source code of existing application (4 screens) built in LWC
-
Login credentials for existing application deployed in a Scratch org is shared
Individual Requirements
Before we begin, I recommend you to check the application deployed in a scratch org. Credentials for login is shared in the forum
Sample view of the application - https://snipboard.io/zOuwa3.jpg
LWC components to be developed
-
LWC components need to be developed for the below 2 screens. Both screens are similar and can reuse components
-
Please check the existing code for design patterns and lwc usage
-
Data for the screens need to come from a Mock Controller. E.g. Please refer ProductController.cls in the existing application
-
In the mock controller response, use a flag variable `isVerified` to decide on which screen should be displayed to the user after clicking on proceed from screen https://marvelapp.com/1id6727g/screen/62085183
-
If the User is already a verified customer, then it will redirect to https://marvelapp.com/1id6727g/screen/62085186 else we will redirect to the first screen https://marvelapp.com/1id6727g/screen/62085184 where the user need to upload their Australian identity proof
- Unit test for each component should be written in Jest. For Valid unit tests, you could look at the component productGridItem
Learning Resources:
-
Video tutorial on Apex
-
Lightning web Components documentation
-
Article about LWC local development
Important Notes:
-
Submission / Review / Appeals phase for this challenge is shorter than usual. Please check the timelines accordingly.
-
Please ensure that there are no lint errors and unit test cases you will write has complete coverage.
-
Please ensure that you are able to deploy the updated source code into a scratch org from Salesforce CLI
-
If you have any doubts, Please feel free to post it in the forum. We will be happy to resolve your queries as soon as possible.
Final Submission Guidelines
-
In your Scratch org, From User management page, Create a test user with `System Administrator` profile. E.g. https://snipboard.io/lPzMsO.jpg. Please note that you need to use valid email to get welcome email and to set password. You could use ethereal to get a valid non-personal email for testing purposes
-
From Profile management page, Edit `System Administrator` profile to allow login from all IP ranges so that there is no verification code sent while I am trying to login to verify your application. E.g. https://snag.gy/ftPoKI.jpg
-
Enter your application URL, test username and password in credentials.txt file.
-
Zip the credentials.txt file and updated source code and upload it using the Submit link
-
After submitting, please ensure that you are able to download your submission from Online Review