trepeschr/devtoberfest-2021-frontend-coding-challenge

The sample in this repository has "built-in" performance flaws for you to discover and fix during the Frontend Week Coding Challenge as part of devtoberfest.

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.

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

You can submit your solution as follows:

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.

Please note that we won't merge any pull requests. 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. If everything goes well, your pull request will be closed then.

Challenge Rules

We don't want to be too prescriptive in this fun challenge, but there are a few things that we need to ask you to do so that things have a chance of running smoothly.

For this challenge, please abide by these rules:

1. You have a week to complete the challenge, i.e. to submit a pull request with your changes. This means that any PR submitted after Saturday 13 Nov will not be considered.
2. Please ensure you specify your SAP Community user name in your pull request (either in the title or when prompted for it after the GitHub Actions passed).
3. 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).
4. We will not merge your pull request as the base repository remains the starting template for everyone. Instead, we will just judge your submissions based upon what is contained within the pull request.

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.