Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ As a developer, you will be getting the following outcomes when you complete thi

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.

![ezgif.com-optimize (3).gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/course%20NFT.gif?raw=true)
![ezgif.com-optimize (3).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.
1. Kindly do your quick assignments properly.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,14 @@ forc new airbnb-contract

After executing the command, you can expect to receive the output showed below.

![fuel-output-2.1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Sway%20Airbnb%20Project/fuel-output-2.1.png?raw=true)

![](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Sway%20Airbnb%20Project/fuel-output-2.1.webp)

## Project structure

Now, open the project folder, `airbnb-dapp` in the VS code. Here’s what the project structure will look like.

![fuel-structure-2.1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Sway%20Airbnb%20Project/fuel-structure-2.1.png?raw=true)
![](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Sway%20Airbnb%20Project/fuel-structure-2.1.webp)

### `Forc.toml` file

Expand Down Expand Up @@ -66,7 +67,7 @@ mkdir data_structures

The updated project structure will look like this.

![fuel-structure-2.2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Sway%20Airbnb%20Project/fuel-structure-2.2.png?raw=true)
![](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Sway%20Airbnb%20Project/fuel-structure-2.2.webp)

We will use the `data_structures` folder to create different components of our `airbnb-contract` such as creating a campaign, tracking the campaign, and representing the current state of the campaign to the user and keeping track of the number of signs on one campaign.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Open a new terminal in your `airbnb-contract` directory and complete the followi
- You will be prompted to enter the password you set in the previous step. Enter it and press the Enter/return button. Make sure to save your Wallet mnemonic phrase
- You will get your fuel address. Save it as you'll need it to sign transactions to deploy the contract.

![Frame 3560370 (10).jpg](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_petition_fuel/Setup%20Fuel%20Wallet/Frame_3560370_(10).jpg?raw=true)
![Frame 3560370 (10).jpg](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_petition_fuel/10.%20Setup%20Fuel%20Wallet/Frame_3560370_(10).webp)


3. You can view your list of accounts using the command below:
Expand All @@ -38,21 +38,21 @@ Open a new terminal in your `airbnb-contract` directory and complete the followi
- Go to [Fuel Wallet Chrome Extension](https://chromewebstore.google.com/detail/fuel-wallet/dldjpboieedgcmpkchcjcbijingjcgok) and click on “Add to Chrome” button.
- After Installing Fuel Wallet, you will see a popup tab where you need to click on “Import seed phrase” button.

![wallet-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_petition_fuel/Setup%20Fuel%20Wallet/wallet-1.png?raw=true)
![wallet-1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_petition_fuel/10.%20Setup%20Fuel%20Wallet/wallet-1.webp)

- Check the terms and condition checkbox and click on “Next: Seed Phrase” button.

![wallet-2.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_petition_fuel/Setup%20Fuel%20Wallet/wallet-2.png?raw=true)
![wallet-2.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_petition_fuel/10.%20Setup%20Fuel%20Wallet/wallet-2.webp)


- Now select “I have a 24-word Seed Phrase”, paste your Wallet Mnemonic Phrase and click on the “Next: Your password” button.

![wallet-3.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_petition_fuel/Setup%20Fuel%20Wallet/wallet-3.png?raw=true)
![wallet-3.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_petition_fuel/10.%20Setup%20Fuel%20Wallet/wallet-3.webp)


- Now finally set a password for your wallet, make sure it is a strong password, or else you won’t be allowed to move forward and please make a note of your password because trust me you need this whenever you are going to sign a transaction. Click on “Next: Finish set up” button to move forward.

![wallet-4.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_petition_fuel/Setup%20Fuel%20Wallet/wallet-4.png?raw=true)
![wallet-4.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_petition_fuel/10.%20Setup%20Fuel%20Wallet/wallet-4.webp)


- And we are all set, let now move on to top it up with some faucet ETH because we will be needing this to pay for the gas.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ The output should look like so:



![Screenshot (14).png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Deploy%20the%20DApp%20on%20the%20Fuel%20Blockchain/Screenshot_(14).png?raw=true)
![Screenshot (14).png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Deploy%20the%20DApp%20on%20the%20Fuel%20Blockchain/Screenshot_(14).webp)

## That’s a wrap

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ git clone https://github.com/0xmetaschool/fuel-airbnb-frontend-boilerplate.git

## Set up environment variables

Now, after cloning the app, open the open in your IDE and find `.env` file. The .env file will look like this.
Now, after cloning the app, create a `.env` file. Add the following content to the `.env` file:

```
REACT_APP_CONTRACT_ID=YOUR_AIRBNB_DEPLOYED_CONTRACT_ID
REACT_APP_PINATA_SECRET_API_KEY=YOUR_PINATA_API_SECRET_KEY
REACT_APP_PINATA_API_KEY=YOUR_PINATA_API_KEY
VITE_PINATA_SECRET_API_KEY=YOUR_PINATA_API_SECRET_KEY
VITE_PINATA_API_KEY=YOUR_PINATA_API_KEY
VITE_CONTRACT_ADDRESS=YOUR_AIRBNB_DEPLOYED_CONTRACT_ID
```

Let’s go through how to fill these environment variables.
Expand All @@ -39,7 +39,7 @@ Next, we need Pinata API credentials. Follow the following steps to get one.
4. Confirm your email by entering the confirmation code.
5. Your Pinata profile is ready to go. Here’s what it will look like:

![pinata-1.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/pinata-1.png?raw=true)
![pinata-1.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/pinata-1.webp)


1. **Set up API keys:** Head over to the “API Keys” option from the sidebar.
Expand All @@ -48,7 +48,7 @@ Next, we need Pinata API credentials. Follow the following steps to get one.
3. Select the “Admin” option for the Scopes section.
4. Lastly, simply click on the “Generate API Key” button. Here’s how we’re doing it.

![pinata-2.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/pinata-2.gif?raw=true)
![pinata-2.gif](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/pinata-2.webp)


After clicking on the Generate API Key” button. The page will appear that will display the “API Key” and the “Secret API Key”. Copy these keys and place them respectfully in the `.env` file.
Expand All @@ -74,7 +74,7 @@ npx fuels build

This will add the `contracts` folder to your `src`:

![contracts-folder.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/contracts-folder.png?raw=true)
![contracts-folder.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/contracts-folder.webp)

## Run the frontend

Expand All @@ -86,7 +86,7 @@ npm start

You will see an output like this:

![fuel-c2-output.png](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/fuel-c2-output.png?raw=true)
![fuel-c2-output.png](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Set%20Up%20the%20Frontend/fuel-landing-page.webp)

## That’s a wrap

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,25 @@ We will now be interacting with our DApp through the front end we created in ear

Firstly, you will need to connect your Fuel wallet to your dApp. This would allow you to carry out different actions and sign transactions according to your purpose. Remember to select the "Fuel Wallet" from the list of wallets.

![ezgif.com-optimize.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/ezgif.com-optimize.gif?raw=true)

![ezgif.com-optimize.gif](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/fuel-connect-wallet.webp)

You can see above that your wallet has now been connected to your dApp. Now let’s start with the more fun part.

- Imagine you want to list a property for sale in our Blockstay dApp. You can simply do that by clicking on **List** and filling in the necessary details like so:

![fuel-listing-full.gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/fuel-listing-full.gif?raw=true)
![fuel-listing-full.gif](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/fuel-list-property.webp)

Here you need to upload your PIN code, and two images to be able to list a property. This would then be ready for booking.

Lastly, we should also be able to book a property. You can do this by going to Book from where you will see different property options available. You can choose to reserve this by providing the dates.
Lastly, we should also be able to book a property. You can do this by going to Explore option where all properties are listed.

![](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/fuel-explore-properties.webp)

You can choose to reserve any of the property by providing the dates.

![ezgif.com-video-to-gif (1).gif](https://raw.githubusercontent.com/0xmetaschool/Learning-Projects/refs/heads/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/fuel-book-property.webp)

![ezgif.com-video-to-gif (1).gif](https://github.com/0xmetaschool/Learning-Projects/blob/main/assests_for_all/assets_for_airbnb_fuel/Interact%20with%20the%20DApp/ezgif.com-video-to-gif_(1).gif?raw=true)

## Wrap up

Expand Down
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Binary file removed assests_for_all/assests_for_sui_c3/.DS_Store
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Binary file removed assests_for_all/assets_for_sui_c1/.DS_Store
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Binary file not shown.
Diff not rendered.
Binary file modified assests_for_all/assets_for_sui_c2/.DS_Store
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.