update

Author: fareeha1125

Add MetaMask connect button to your react app/Building & Shipping/1. Introduction.md

@@ -14,7 +14,7 @@ As usual, we will be using node package manager for installing some stuff and VS
 If you complete this course with me, you will be getting XPs and a special NFT which will unlock many more opportunities for you on the Metaschool platform. Here is what the NFT looks like.
 
 Now before we move forward, let’s set some house rules first. 
-![explore nft.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/course%20NFT.gif?raw=true)
+![explore nft.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Completion%20NFT.webp?raw=true)
 
 
 Now before we move forward, let’s set some house rules first.

Add MetaMask connect button to your react app/Building & Shipping/2. Building App.md

@@ -21,7 +21,7 @@ npm start
 
 This will start your server and automatically open a window for you, where you can see the default react app. You will see something like the following image.
 
-![](https://lh4.googleusercontent.com/i2Vu7EfiZGuGsYbtPVa28Niqd0JZveX6BNJN8K_--JMkrTg_K4PKUMKw2DIslgTR556QJoXJ8JfxRR9GAj2gJ0wQa_zcMDx8HubSCYAiRmkbusPvRfbpURVgiPPIzx9GaYoDR0_5)  
+![](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Add%20MetaMask%20connect%20button%20to%20your%20react%20app/Building%20%26%20Shipping%20-%20Building%20App%201.webp?raw=true)  
 Now open the src/App.js file in VSCode. This is where we will make our edits.
 
 We will add the following dependencies in your App.js file. Go ahead and add the following imports.
@@ -174,11 +174,10 @@ Everything should run smoothly. Congrats for building this mini project and foll
 
 I’d love to see how you build your pages uniquely, and use this functionality in your projects. Here are some projects shared by alumni in our discord.
 
-![](https://lh3.googleusercontent.com/pxrqt43cLrL8a00Vwq4Eev0Xg2BJQF-ueANJFGNyIxtn9tzj69IusyFqbK3_UkieqxulnaT0Xbngx9ppSp7N8nzPZRWT6ISKnoPCrF2RGHJEUwfYHczM4pJRTDx2IHJmX9yX3tqS)
+![](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Add%20MetaMask%20connect%20button%20to%20your%20react%20app/Building%20%26%20Shipping%20-%20Building%20App%202.webp?raw=true)
 
-![](https://lh4.googleusercontent.com/QjNm9TCY1JlSshwLDAfUu2giAy8pK2A8oGUiiHAdSk4jeFyqnh4QiFOVw3hCj4rAU2UbPaJ_tQzdOyR_5jPutapPXmewhihBxCwJd3Gal-M_2P-lI8oFDg5gEpy4Cn-s-jqiNMaU)
+![](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Add%20MetaMask%20connect%20button%20to%20your%20react%20app/Building%20%26%20Shipping%20-%20Building%20App%203.webp?raw=true)
 
-![](https://metaschool.s3-ap-southeast-1.amazonaws.com/images/X0Rw3VAkQfRtNB3GPgEDE6cWTuJCwqAWggcm0jCb.png)
 
 
 ## ⚒️ A small yet important request:

Code Translator - Translate Your Code to Any Other /1. Ready, Set, Build!/1. What’s Up.md

@@ -8,7 +8,7 @@ This project is important, because it will give you basic understanding of how t
 
 Let me give you a sneak peek of the one and only Code Translator that you're ever going to want to build!
 
-![example 1.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/What%E2%80%99s%20Up%20d9f71f7945774aa5bb014c1ea4566a75/example_1.gif)
+![example 1.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/What%E2%80%99s%20Up%20d9f71f7945774aa5bb014c1ea4566a75/example_1.webp?raw=true)
 
 But don't take my word for it, you gotta try it out for yourself. We've got a live code translator on [this website](https://jatin0.netlify.app/), that's already causing a stir. People can't get enough of it! So, before you even start this course, go check it out and see what all the fuss is about.
 
@@ -36,7 +36,7 @@ But don't sweat it, – you can still learn OpenAI API and AI model development
 
 If you complete this course with us, you will be getting XPs and a special NFT which will unlock many more opportunities for you on the Metaschool platform. Here is what the NFT looks like.
 
-![img.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/course%20NFT.gif?raw=true)
+![img.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Completion%20NFT.webp?raw=true)
 
 
 Now before we move forward, let’s set some house rules first.

Code Translator - Translate Your Code to Any Other /1. Ready, Set, Build!/2. Unleash The Power of AI.md

@@ -28,15 +28,15 @@ Now, to get started:
 2. Click on your profile and then click on Manage account then click on Billing.
 3. Upgrade to a paid account. It's just a dollar a day, You can cancel whenever you want (Individual paid account).
 
-![setup.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/setup.gif)
+![setup.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/setup.webp?raw=true)
 
 Generating an API key for OpenAI is a straightforward process. Here are the steps:
 
 1. Login to your OpenAI account.
 2. Navigate to the API Keys section. You can find it by clicking on your profile icon on the top right corner of the screen and selecting "API Keys" from the drop-down menu.
 3. Click on the "Generate New API Key" button and follow the instructions. Make sure to keep your API key safe and secure as it grants access to your OpenAI account.
 
-![api key generation.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/api_key_generation.gif)
+![api key generation.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/api_key_generation.webp?raw=true)
 
 ## Quickstart OpenAI API
 
@@ -91,13 +91,13 @@ touch .env
 
 Let’s look at this step happening visually:
 
-![npm init.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/npm_init.gif)
+![npm init.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/npm_init.webp?raw=true)
 
 ### File structure
 
 After running the commands, the file structure will look like this:
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/Untitled.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/Untitled.webp?raw=true)
 
 Now, let’s move on to the coding part.
 
@@ -242,7 +242,7 @@ node app.js
 
 Let’s look at what I got after running the code. PS: You might get different answer because each time we run the model it generates different answer.
 
-![run nodejs app.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/run_nodejs_app.gif)
+![run nodejs app.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/1.%20Ready%2C%20Set%2C%20Build!/Unleash%20The%20Power%20of%20AI%20b96192c35b834fffad56fc78b86efe8c/run_nodejs_app.webp?raw=true)
 
 > **Note:** This code is using the super powerful **`Davinci`** model from the OpenAI API, which is famous for generating some seriously impressive text. However, it's important to use the API in a responsible and ethical way, and be mindful of the model's limitations to avoid any misuse.
 > 

Code Translator - Translate Your Code to Any Other /2. Build Some Cool Stuff/1. Let’s Start Building.md

@@ -41,13 +41,13 @@ After installing the GitHub desktop, you’ll need to connect your GitHub accoun
 1. Go to your GitHub desktop app
 2. Click on **Add.** You will see some option like these:
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled.webp?raw=true)
 
 1. Click on **Clone Repository…**
 2. Go to **URL** and paste this URL to clone the app: https://github.com/0xmetaschool/code-translator-boilerplate.git
 3. Choose empty folder where you want to clone the application.
 
-<img width="496" alt="image" src="https://user-images.githubusercontent.com/129931419/235127674-ba7233f5-8503-45e3-bb79-558a66c230e2.png">
+<img width="496" alt="image" src="https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%201.webp">
 
 
 1. After cloning the app open the app in your favourite IDE. We recommend using Visual Studio Code.
@@ -62,13 +62,13 @@ npm install
 
 Let’s look at the output of this command.
 
-![npm install.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/npm_install.gif)
+![npm install.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/npm_install.webp?raw=true)
 
 ## File structure
 
 After cloning the application your file structure will look like this: 
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%202.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%202.webp?raw=true)
 
 > **Note:** This is a basic NextJS app that has default code. We will change the file structure and existing code as per need in upcoming lessons.
 > 
@@ -85,13 +85,13 @@ npm run dev
 
 Let’s look at the output of this command.
 
-![npm run dev.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/npm_run_dev.gif)
+![npm run dev.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/npm_run_dev.webp?raw=true)
 
 Head over to **`http://localhost:3000`** . You will see the basic NextJS app. 
 
 > **Note:** We have removed the images from the app, so you won’t see them.
 > 
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%203.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Building%207d8da3159b6447bbb1f06990d80a494b/Untitled%203.webp?raw=true)
 
 Well done on cloning the app! Let’s move to the next lesson and start coding our code translator application.

Code Translator - Translate Your Code to Any Other /2. Build Some Cool Stuff/2. Let’s Start Coding.md

@@ -14,7 +14,7 @@ CodeEditor imports required modules such as CodeMirror and React, defines a stat
 
 The copy option will work like this in our app:
 
-![copy.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Coding%20885f42f0043e4b00882988fe7542323c/copy.gif)
+![copy.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Coding%20885f42f0043e4b00882988fe7542323c/copy.webp?raw=true)
 
 > **Don’t Worry!** We will see this happening live in upcoming lessons.
 > 
@@ -23,7 +23,7 @@ The copy option will work like this in our app:
 
 Create the **`components`** folder and create a **`CodeEditor.js`** file in the **`components`** folder. This file will contain the code for our code editor, which we will discuss in this lesson.
 
-![Screen Shot 2023-04-25 at 4.42.08 PM.png](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Coding%20885f42f0043e4b00882988fe7542323c/Screen_Shot_2023-04-25_at_4.42.08_PM.png)
+![Screen Shot 2023-04-25 at 4.42.08 PM.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Let%E2%80%99s%20Start%20Coding%20885f42f0043e4b00882988fe7542323c/Screen_Shot_2023-04-25_at_4.42.08_PM.webp?raw=true)
 
 ## Code summary
 

Code Translator - Translate Your Code to Any Other /2. Build Some Cool Stuff/3. Enhance Your Front-End.md

@@ -18,15 +18,15 @@ Let’s start building the files separately.
 
 The language selector is a dropdown that will allow us to scroll through different languages and select the desired language. The language selector will look like this:
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled.webp?raw=true)
 
 **Don’t worry!** You will see this in action during the upcoming lessons. Let’s focus on building it for now!
 
 ### Create file
 
 Create a **`LanguageSelect.js`** file in the **`components`** folder. This file will contain the code for our code window, where we will paste the code.
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%201.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%201.webp?raw=true)
 
 ### Code summary
 
@@ -164,13 +164,13 @@ export default LanguageSelect;
 
 The code window will be the box that will appear on our front-end. It will help us write and edit the code in different programming languages. The code window will look like this: 
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%202.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%202.webp?raw=true)
 
 ### Create file
 
 Create a **`CodeWindow.js`** file in the **`components`** folder. This file will contain the code for our code window, where we will paste the code.
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%203.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%203.webp?raw=true)
 
 ### Code summary
 
@@ -267,7 +267,7 @@ Now, we will create a **`languages.js`** , which will be used by **`LanguageSele
 
 First of all, create a folder called **`constants`** . In this folder, create a file called **`languages.js`**. We will keep our languages code in this file.
 
-![Untitled](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%204.png)
+![Untitled](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/Untitled%204.webp?raw=true)
 
 ### Code summary
 
@@ -409,6 +409,6 @@ export const languages = [
 
 Let’s look at how our front-end will work after adding the code we have created so far.
 
-![codeWindow+LanguageSelect.gif](https://github.com/0xmetaschool/Learning-Projects/raw/code-translator-course/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/codeWindowLanguageSelect.gif)
+![codeWindow+LanguageSelect.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/Code%20Translator%20-%20Translate%20Your%20Code%20to%20Any%20Other%20/2.%20Build%20Some%20Cool%20Stuff/Enhance%20Your%20Front-End%20b882311ba7f34a36bf8c3a65450c89db/codeWindowLanguageSelect.webp?raw=true)
 
 **Don’t worry!** You will see this happening live by running your application in upcoming lessons.