React Workshop Guide

This repo contains all the resources we used during the frontend workshop for IEEE Newhacks 2024

We build the following Apps as Milestones

• Milestone 1: Counter using React and style it using Tailwind CSS
• Milestone 2: Exchange rate App by fetching API

1. Git/GitHub Installation & Setup

Step 1. Download Git: go to https://git-scm.com/downloads and Download the version compatible with your operating system (Windows, macOS, or Linux)

Step 2: Install Git

• Windows: Open the downloaded .exe file. Follow the installation wizard steps. Use default settings if unsure.
• macOS: Install using Homebrew (recommended) by running brew install git. Alternatively, open the downloaded .dmg file and follow the instructions

Step 3: Configure Git: open your terminal or command prompt

• Set your Git username: bash git config --global user.name "Your Name"
• Set your email: bash git config --global user.email "your.email@example.com"

Step 4: Setup Github

• Create a GitHub account https://github.com/
• Click "Sign up" and follow the steps to create an account

2. Node.js Installation

1. Download Node.js

   Visit the official Node.js website (https://nodejs.org)

   Download the LTS version

   Make sure the operating system you select is correct!

2. Install Node.js

   Windows: Run the download installer. Follow the installation wizard. Ensure you have selected the option to install Node.js and npm (Node Package Manager)

   Mac: Open the downloaded .pkg file. Follow the prompts to complete the installation

3. Make sure that Node.js is installed properly

   Check that these commands work:

   node -v

   npm -v

3. Setup

1. Create a new folder on your laptop
2. cd into the new folder
3. Run git clone https://github.com/guaaaaa/React_workshop.git
4. Run cd React_workshop
5. Run npm install
6. Run npm run dev. You should be able to see the App at http://localhost:3000 after running this command
7. Create an account at https://manage.exchangeratesapi.io
8. Navigate to https://manage.exchangeratesapi.io/dashboard, you should see your API access key. This key is confidential, DO NOT SHARE IT WITH ANYONE OR COMMIT IT TO A GITHUB!!! We'll be using this key later

4. Repo structure

The repository has four branches - master, counter, and solution. Each branch corresponds to a milestone for the workshop

The master branch

The master branch is a template for participants to follow during the workshop. It contains a home page and a broken version of the counter that we were building on top of during the workshop. If you run npm run dev, you should see the following pages, and you should be able to navigate around the home page and the counter

• The home page

• The broken counter

To navigate to the master branch, run git checkout master

The counter branch

The counter branch contains the counter App. If you run npm run dev, you should see the home page and be able to navigate to the counter. You can play around with the counter!

To navigate to the counter branch, run git checkout counter

The solution branch

The solution branch primarily serves as a solution reference to the workshop. It contains the code of everything we built during the workshop.

To use the solution code

1. Copy your own API access key from https://manage.exchangeratesapi.io/dashboard
2. Inside your working directory (React_workshop), create a file called .env.local
3. Inside the file, add the following line NEXT_PUBLIC_API_KEY = your API access key. Replace your API access key with your own API access key

Now, if you run npm run dev, you should see the following page and be able to navigate around the counter, exchange rate App, and the home page.

To navigate to the solution branch, run git solution exchange

5. Final project

The final App should have the following pages

• Home page

• Counter

• Exchange rate App