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.

• 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.

• Typescript Handbook : Read The Basic and Everyday Types.
• Use this Typescript Playground to experiment with Typescript code.

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.

• 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.