Important Notice

This public repository is read-only and no longer maintained. For the latest sample code repositories, visit the SAP Samples organization.

Devtoberfest 2021 Frontend Week Coding Challenge

Description

This is the Devtoberfest 2021 Coding Challenge of week 6. The repository contains a web application that displays all current services available on the SAP Business Technology Platform:

Unfortunately, this app doesn't have the best loading performance. The Lighthouse performance score is way below the achievable 100 points. Luckily, this is not the fault of the framework used but happened due to a bad implementation and disregard of common best practices. It’s up to you to fix this web application and to push the performance score above 70.

Do you want to jump directly to one (possible) solution? Then go here 👈.

Possible areas where you can achieve performance boosts are:

• Optimize Media Files
• Avoid or Minimize Blocking JS and CSS / On-demand Loading of Assets
• Reduce the Network Load
• Reduce the Perceived Loading Time

For more details, watch this video:

Requirements

Node.js LTS version 14 is installed: https://nodejs.org/en/download

Contributing / Submitting your Proposal

This challenge already ended but feel free to complete it just for fun anyway 🙂.

1. Fork and clone this repository

2. Turn GitHub Actions on for this repository to allow the included workflows, e.g., to build the web app on every push.

3. Turn GitHub Pages on as well to host the improved web app there.

4. Install all dependencies

   npm install

5. Start a local server and run the application (http://localhost:8080/index.html)

   npm start

6. Trigger the Lighthouse Performance Scoring (e.g. with Google Chrome)

7. Optimize the app until the performance score is above 70.

8. Commit and push your edits

   git commit -am "Fix performance issues"
   git push

9. Create a pull request and make sure your web app is exposed as with GitHub Pages and available under https://${{ Your GitHub User }}.github.io/devtoberfest-2021-frontend-coding-challenge/. Our CI/CD actions will take it from here and let you know if your app passed the test.

   

In case you still have questions: Check out this video where I create an example contribution.

It is sufficient if your PR earns the green "passed" label and you entered your SAP Community ID in the pull request after the label was assigned.

Challenge Rules

This challenge already ended but feel free to complete it just for fun anyway 🙂.

1. You only need to send modifications to the content in the /docs and /webapp folders and possibly the package.json. You should not need to modify any other files in this repository (especially not the .github folder).

Do you want to jump directly to one (possible) solution? Then go here 👈.

Download and Installation

Getting started

1. Clone this repository and navigate into it

   git clone https://github.com/SAP-samples/devtoberfest-2021-frontend-coding-challenge
   cd devtoberfest-2021-frontend-coding-challenge

2. Install all dependencies

   npm install

3. Start a local server and run the application (http://localhost:8080/index.html)

   npm start

Testing

Start the Karma Test Runner with the UI5 Plugin and execute the tests sh npm test

How to obtain support

This content is provided "as-is" with no other support.

Known Issues

This project got a terrible Lighthouse performance score. As part of this coding challenge, it's up to you to improve this web app.

License

Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0, except as noted otherwise in the LICENSE file.