SharePoint Framework Tic-Tac-Toe Webpart

Hi Friends,

Now enjoy with work. Play tic-tac-toe and give your mind a bit relaxing so you can energize yourself for the tough job you do all day in office.

Click here to get the Source Code

This webpart is created for fun during work, so whenever you get exhausted with work , you can easily relax yourself and make yourself ready again for the heavy duty in the office.

WebPart Features !!!

  • Game Stats: Keeps the record of the total games you played, you won and also the computer won
  • Even if you need to navigate to the page , don’t worry you’ll not loose your scores
  • Don’t underestimate your opponent
  • Fully responsive, so no matter on which device you play

Click here to get the Source Code


  • Configuration is pretty simple as you only need to install the webpart in your tenant and done.
  • No access required for the SharePoint object so no need to worry for security.

Click here to get the Source Code


For deployment please follow the below steps
  • Clone the repository
  • Open the code in Visual Code or in any other IDE
  • Change the ‘cdnBasePath’ url inside the config\write-manifest.json
  • Create the package by executing the following command
    • gulp
    • gulp bundle--ship
    • gulp package-solution --ship
  • Upload the .spkgg file from sharepoint\solution folder
  • Upload the files from tem\deploy to the cdnBasePath url
  • Install the app on the site
  • Add the webpart to the page

Click here to get the Source Code

Happy Coding
Sumit Kanchan


  1. Could you do a YouTube video showing how to make it?

    1. @Rajeesh.. Thanks for your suggestion, But i have already hosted the source code on GitHub. But yes that's a good suggestion to create a video on that, so let me prepare and create a video. :)


Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Power Automate: Rename file in SharePoint Online