30 Days of Web3 Logo

Setup Your Dev Environment

Dev Setup

✋ Need Help?

If you need help, check to see if your question has already been asked in #section-3-help. If you don't see it in there, post a question with any details that would make it easy for a team member to help you. We'll answer most frequently asked questions in live office hours, so keep an eye out in #announcements for those!

IDE

Although any IDE (Integrated Developer Environment) will work, we recommend the use of VSCode, a free IDE which you can download here.

Node.js and NPM

You will need Node.js and npm installed on your machine.

Node.js is a runtime environment that executes JavaScript outside the browser, enabling developers to build full-stack JavaScript apps. NPM stands for node package manager and is the command-line interface to a vibrant ecosystem of open-source Node.js packages. If you want to learn more about NPM, check out this article.

To check if you have Node.js and npm installed, you can run node -v and npm -v. If you get back a number that looks like 8.0.6, that means you do have these installed.

node version

To download Node.js and npm, we recommend using nvm, a node version manager that helps you manage various Node.js and npm versions. Follow the installation guide here.

Once you have installed nvm, run the following to download a stable version of Node.js and npm.

nvm install --lts
nvm use --lts

Confirm your Node.js version by calling nvm current. You should be using Node v16.

Now you’re good to go! We’ll be installing dependencies in our app as we build, but this will set you up to be able to download smoothly.

Git and Github

If you want to receive kudos for completing checkpoints and submitting your project and/or you will be applying for our BUIDL Accelerator, you will have to submit a link to a git repository as proof of work.

If you're new to using git or GitHub, you can get started with this tutorial here.

Project Setup

Create a Smart Contract

During these 30 days, we’ll be working to create a full-stack RSVP dapp. Think of it as a web3-native eventbrite, except attendees need to deposit ETH to rsvp and will get it back upon them checking in at the event.

Let’s start coding! Today we’ll be writing about ½ of the smart contract.

Create a new project from your terminal:

  • Navigate to the folder you want to create this project inside. If you want to create this project on your Desktop, navigate to that directory by running cd Desktop.
  • Create a new folder for your project to live in mkdir web3rsvp
  • Don't forget to navigate to the new project folder directory using cd web3rsvp or your files will end up on your desktop and not in the folder.
  • Run the following command to initialize an npm project: npm init and then follow the instructions (you can press enter and say yes on everything if you'd like!).
  • After the project initialization and a successful creation of a package.json file, run the following command to install hardhat (a development environment to compile, deploy, test, and debug your Ethereum code): npm install --save-dev hardhat or yarn add --dev hardhat.
  • After this, run npx hardhat.
  • Select a basic project, select y for all prompts. y simply stands for yes.
  • Finally, open this newly created project in your code editor. Do this by opening VS code and hitting file > open > look for the folder you just created.

Note: If you have any issues with this setup, follow the steps below to fork and clone the starter repo.

Fork and clone the starter repo:

First, go to the starter repo and fork the project:

fork the project

Then, clone the repo onto your machine by copying the link that is given to you when you press code. Note that the username in the link should be your GitHub username. If you still see womenbuildweb3 as the username, you haven't forked the repo. After copying the link, run this command in your terminal: git clone <insert link here>

code

Under the contracts folder, head to your Greeter.sol file and rename it to Web3RSVP.sol.

Note: Greeter.sol has been updated to Lock.sol

Delete everything in this file except for the first two lines, plus the comment at the very top.

This is what your file should look like:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

The SPDX-License-Identifier helps define the license of our file. In this project, we are choosing the MIT license. This is because our project is completely open source.

The pragma solidity ^0.8.4; line tells the compiler which version of Solidity it will use when compiled. Important Note: It's a requirement that the pragma solidity line matches the version of Solidity defined in the module exports of your hardhat.config.js file.

Writers: Cami, Editors: Sarah Z, Kristen, Sarah Schwartz, Krystal