# Title of the sample > This is how you want the sample to appear in the samples browser. > When naming your sample, try to give it a friendly name that describes what it does. Avoid using terms like `SharePoint` and `WebPart` -- because that's what all the samples in this repo is all about. Also, don't use `React`, `Angular`, `JavaScript`, etc. in your sample title -- unless that's what the sample is about. > GOOD 👍: > Kitten Videos > BAD 👎: > react-kittenvideos > SPFx Kitten Videos Web Part for SharePoint using React > > DELETE THIS PARAGRAPH BEFORE SUBMITTING ## Summary Short summary on functionality and used technologies. > Please provide a high-quality screenshot of your web parts below. It should be stored in a folder called `assets`. > If possible, use a resolution of 1920x1080. > If your web part uses a placeholder screen and requires the user to configure it, please use a screenshot of the web part as it appears **after** it has been configured. > You can add as many screen shots as you'd like to help users understand your web part without having to download it and install it. > DELETE THIS PARAGRAPH BEFORE SUBMITTING ![picture of the web part in action](assets/preview.png) ## Compatibility ![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg) ![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg) ![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg) ![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") ![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg) > Don't worry if you're unsure about the compatibility matrix above. We'll verify it when we approve the PR. > > If using an older version of SPFx, update the SPFx compatibility tag accordingly: > ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg) > > Here's the Node.js compatibility tag for SPFx 1.4.1: > ![Node.js LTS 6.x | LTS 8.x](https://img.shields.io/badge/Node.js-LTS%206.x%20%7C%20LTS%208.x-green.svg) > > If you built this sample specifically for SharePoint 2016, or SharePoint 2019 support, update the SharePoint compatibility tag accordingly: > ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg) > ![SharePoint 2016 | 2019 | Online](https://img.shields.io/badge/SharePoint-2016%20%7C%202019%20%7C%20Online-green.svg) > If you know your web part only works on the hosted workbench, you can use this for the workbench compatibility tag: > ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench") > > If you specifically built and tested this web part to work with Teams, use this for the Teams compatibility tag: > ![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams") > And if you know for sure that it is NOT compatible with Teams, use this: > ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not designed for Microsoft Teams") > > DELETE THIS PARAGRAPH BEFORE SUBMITTING ## Applies to * [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) * [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) > Update accordingly as needed. > DELETE THIS PARAGRAPH BEFORE SUBMITTING ## Prerequisites > Any special pre-requisites? Include any lists, permissions, offerings to the demo gods, or whatever else needs to be done for this web part to work. > DELETE THIS PARAGRAPH BEFORE SUBMITTING ## Solution Solution|Author(s) --------|--------- folder name | Author details ## Version history Version|Date|Comments -------|----|-------- 1.1|September 2, 2021|Update comment 1.0|August 29, 2021|Initial release ## Disclaimer **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** --- ## Minimal Path to Awesome * Clone this repository * in the command line run: * `npm install` * `gulp serve` > Include any additional steps as needed. > DELETE THIS PARAGRAPH BEFORE SUBMITTING ## Features Description of the web part with possible additional details than in short summary. This Web Part illustrates the following concepts on top of the SharePoint Framework: * topic 1 * topic 2 * topic 3 > Note that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions in advance! You rock ❤. > DELETE THIS PARAGRAPH BEFORE SUBMITTING