-
For the purpose of this project, we need the following installed on our systems:
- Git
- NodeJS
- A text editor of your choice (we shall use VS Code - but feel free to use the one of your choice)
Expand a section based on the OS you are using:
Windows
Download the setup executables from the above links, and install the programs keeping everything default.
NOTE - Make sure to update your PATH
Check if you have correctly installed by running the following commands:
node --version git --version
You should see an output like this:
Next, download Visual Studio Code or any other text editor of your choice and install it by simply following the steps in the setup wizard.
Mac
Install HomeBrew:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Run the following commands to install Git and NodeJS on Mac:
brew install git brew install node
Check if you have correctly installed by running the following commands:
node --version git --version
You should see an output like this:
Next, download Visual Studio Code or any other text editor of your choice.
After downloading Visual Studio Code from the website, opening the zip file will automatically extract the application, which you can then drag to the Applications folder to install.
Linux
Run the following commands to install Git and NodeJS on Ubuntu:
sudo apt install git sudo apt install nodejs
NOTE - Make sure to use the correct package manager of your Linux Distro
Check if you have correctly installed by running the following commands:
node --version git --version
You should see an output like this:
Finally, install VS Code on the system using this command(Ubuntu):
sudo snap install code --classic
Make sure to refer installation guide on your distro to find the correct install command
-
Next, go ahead and create a GitHub account.
-
Run the following commands to configure git on your system
git config --global user.name "Your Name" git config --global user.email "[email protected]"
The email you enter here has to be the same with which you created your GitHub account
-
Setup your GitHub account and add an SSH key. Follow this guide.
-
Fork this repository
-
Clone the forked repository with this command:
git clone [email protected]:<your-username>/leaderboard.git
Make sure to replace <your-username> with your GitHub Username
-
Open the repository in your favorite text editor/IDE.
-
Install npm dependencies of the project by running the following command in the project's root directory:
npm install
-
Now that the dependencies are installed, you can view the working demo of the page by running:
npm run dev
Navigate to http://localhost:5173 to view the output
Hurray!! You are now ready to contribute to the project
Skip steps 1 - 3 if you followed all the steps from Setup and Installation
-
Make sure to fork this repository into your GitHub account - this way you will be able to create Pull Requests to merge your code in the repository.
-
Clone the forked repository in your system
-
Run
npm install
in the root directory of the cloned repository. -
Make the changes you want to do.
-
Once you are done, commit your code to git using the following commands:
git add . git commit -m "A useful commit message"
-
Push your commits to your GitHub repository
git push -u origin master
-
Make a Pull Request
That's it! The PR you made would be reviewed by a Team Member of ours, and based on the code you have written the PR would be requested for changes, if any, and eventually Merged!
This guide helps you to follow the best practices to follow while writing code - so that you write the best way
Formatting your code is very important - it helps to maintain consistency across the project and also helps increase readability.
A helpful tool for code formatting is Prettier. You can
install it from the Extensions
tab in VS Code:
Look around in the repository, and find the .prettierrc
file. This file
contains all the necessary configurations for code formatting of this project.
Now the only thing you need with prettier to format your code is to save the file! Prettier formats code on each file save automatically!!
You can refer the following documents to know more about guidelines on how to write better code:
Happy Learning!