CF Step
Youtube Linkedin Discord Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Back to homepage

Setup : LC Board


Create an OpenAI account. ChatGPT would come in handy for any quick questions that you might have regarding the project and setup.

  • Install Git (Git Bash if you are on Windows)
  • Setup SSH keys
  • Add the SSH keys to Github
  • Create a private Github repo and make sure you are able to clone the repo using SSH.
  • Read about the basics of Git, create a sample commit, and verify you are able to push your commits to Github via SSH.
  • Install VS Code.
  • Install these extensions
    • Git Lens
    • Prettier
    • Tailwind CSS Intellisense
  • Setup Format-on-save in VS code. You will need to edit the settings.json file.
  • Install Node JS.
  • Install Typescript via NPM globally.

Setting up the initial web server

  • Follow the instructions from this NextJS page and ensure that you are able to create a starter site locally.
    • Read the Automatic Installation section, not Manual Installation section.
    • Editing the file is optional. The page.tsx and index.tsx file should already get created. Your goal is to make sure that your new website runs locally.

Note : You will not understand half the things that we are doing, for example, what even is NextJS, what does the npx create-next-app@latest actually do? Don’t worry. That’s normal. You will have a better understanding of all these concepts once you’ve built out the entire webapp.


  • Once you’ve setup your website, commit your changes via VS code or command line.
  • Push these changes to your github account.
  • Read about Vercel and figure out how to deploy your website to Vercel.
  • Ensure you are able to access your website from your smartphone.

We are deploying the website from Day 1 so that everytime we make some changes to our website, we can verify that it works for WebUI as well as mobile.


If you’re coming from C/C++ background, don’t worry too much about Typescript, VS Code’s intellisense is already smart enough to help you write code even if it’s your first day with Typescript.


  • Read a bit about TailwindCSS. Not too in depth.
  • Tailwind Play : Use this playground to experiment with Tailwind CSS. For example, try to create a button, assign it different color, create a card, create a table. In the process, if you figure out you don’t know basic HTML/CSS, like the concept of div, google about it or ask us on the discord channel.

Important Points

  • The Github repo that you are creating for this project should be private.
  • Once you’ve deployed the website, post the site link on discord leetcodeboard channel.