SWE at Google • Co founder at Blocktrain 

Follow him [on Twitter](https://twitter.com/aryan_eth).

Aryan Singh


Follow him [on Twitter](https://twitter.com/aryan_eth).

Blocktrain

Chris Impey is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/chris-impey).

Chris Impey

Emma Hazel is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/emma-hazel).

Emma Hazel

Thomas Macaulay is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/thomas-macaulay).

Thomas Macaulay

Full stack • Web3 • DSA


<div class="ratio ratio-16x9"><iframe width="1467" height="733" src="https://www.youtube.com/embed/6ybV856mX50" title="Solidity, Smart Contracts, Ethereum, Blockchain Development course" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>  


## Topics
[00:00:00](https://www.youtube.com/watch?v=6ybV856mX50&t=0s)  CRUD Operations in Solidity, Basic Smart Contract

[00:08:00](https://www.youtube.com/watch?v=6ybV856mX50&t=480s)  Variable Data Types, Control Statements

[00:16:51](https://www.youtube.com/watch?v=6ybV856mX50&t=1011s)  Loops and Break Keyword

[00:25:26](https://www.youtube.com/watch?v=6ybV856mX50&t=1526s)  Constructor, Require and Modifiers

[00:34:53](https://www.youtube.com/watch?v=6ybV856mX50&t=2093s)  Creating your own coin with Open Zeppelin

[00:41:10](https://www.youtube.com/watch?v=6ybV856mX50&t=2470s)  Built in keywords, msg, tx, block, ether units, time units

[00:48:42](https://www.youtube.com/watch?v=6ybV856mX50&t=2922s)  Storage in Solidity

[00:53:30](https://www.youtube.com/watch?v=6ybV856mX50&t=3210s)  Events in Solidity

[01:01:32](https://www.youtube.com/watch?v=6ybV856mX50&t=3692s)  Creating a Bank in Solidity

[01:15:13](https://www.youtube.com/watch?v=6ybV856mX50&t=4513s)  Variables and Functions Visibility Deep Dive

[01:21:34](https://www.youtube.com/watch?v=6ybV856mX50&t=4894s)  Coding a Vault

[01:33:31](https://www.youtube.com/watch?v=6ybV856mX50&t=5611s)  Interaction with Multiple Smart Contracts

[01:42:07](https://www.youtube.com/watch?v=6ybV856mX50&t=6127s)  Handling errors in solidity

[01:47:08](https://www.youtube.com/watch?v=6ybV856mX50&t=6428s)  Creating a Smart Contract Factory

[01:56:21](https://www.youtube.com/watch?v=6ybV856mX50&t=6981s)  Sending ERC20 Token

[02:12:13](https://www.youtube.com/watch?v=6ybV856mX50&t=7933s)  Using Chain Link Data Feeds in Solidity

## 1. CRUD Operations in Solidity, Basic Smart Contract

-   Let’s understand create, read, update, delete operations in solidity.
-   Let’s understand the very basics of solidity and take things from here.
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/001-CRUD.sol)

```
contract  Blocktrain {
  uint256  public coins = 0;

  function  add() public {
     coins+=1;
  }

  function  subtract() public{
     coins-=1;
  }

  function  set(uint256  _coins) public{
     coins = _coins;
  }
}
```
    

## 2. Variable Data Types, Control Statements

-   Variables Datatypes are similar to other languages.
-   Some solidity specific variables include Address, Mapping(Hashmaps).
-   Control statements are simply  
    IF, ELSE IF, ELSE
-   It works similarly to any other language
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/002-Variables%2CControlStatements.sol)

## 3. Loops and Break Keyword

-   Loops can be used for a variety of reasons. Think of making a blog website where you want to fetch all the posts? You iterate over the posts and store them in a data structure through a loop.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/003-Loops)
    

## 4. Constructor, Require and Modifiers

-   Constructor is the first function which gets triggered when the contract is deployed.
    
-   One can setup some parameters like owner and other things.
    
-   Require is a condition which needs to be satisfied else the code below the statement won’t be executed.
    
-   Require takes in a particular condition and the error message which should be shown if the condition is not followed.
    
-   Modifiers act as filters to the functions. Consider there is some condition which needs to be present before executing a function.
    
-   You create a modifier using require keyword and add that modifier in front of every function which should follow that condition.
    
-   You can create multiple modifiers for multiple reasons.
    
-   One example could be some functions should only be called the owner of the contract ( owner is the address which deployed the contract )
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/004-Constructor%2CRequire%26Modifier.sol)
    

## 5. Creating your own coin with Open Zeppelin

-   Open Zeppelin has this awesome tool Contract Wizard ([https://wizard.openzeppelin.com/](https://wizard.openzeppelin.com/)) which has a very simple UI to frame your basic smart contract.
    
-   Click on the functions you require in your smart contract, they currently support all the popular protocols, ERC20, ERC1155, ERC721
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/005-ERC20Coin.sol)
    

## 6. Built in keywords, msg, tx, block, ether units, time units

-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/006-BuiltInVariables.sol)
    
-   Above link is enough
    

## 7. Storage in Solidity

-   Storage in solidity is done in 4 ways
    
-   You can store some variables on the blockchain using “storage” keyword.
    
-   Memory keyword is used to add a lifetime for the variables, like you just require the parameters of the function till the function is executing, you don’t require it later. Thus Memory keyword is used.
    
-   Stack => All variables declared in a function are stored in a fixed size stack
    
-   Calldata => Similar to Memory, this variables have a lifetime but are immutable
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/007-StorageManagement.sol)
    

## 8. Events in Solidity

-   Events are basically a way to announce something in the outside world.
    
-   You can use events for any interaction which happens on the smart contract.
    
-   Something like an NFT got transferred from one address to other.
    
-   These events can be later indexed from outside the smart contract and makes it easier to render things in the frontend.
    
-   Events are used to keep a radar on smart contract interaction.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/008-Events.sol)
    

## 9. Creating a Bank in Solidity

-   Let’s create a bank
    
-   The bank has multiple accounts, and each account has some variables to track.
    
-   The functions are pretty simple, creating account, depositing and withdrawing.
    
-   More functions can be added based on your imagination.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/009-LaxmiChitFund.sol)
    

## 10. Variables and Functions Visibility Deep Dive

-   Variables and functions can be kept private as well as public as per required.
    
-   You want your smart contract to be deterministic. And thus one should take care about which variables and functions are accessible where.
    
-   Check the link below.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/010-VariablesAndFunctionsVisibility.sol)
    

## 11. Coding a Vault

-   Let’s code a vault with a timer.
    
-   In the Vault you can store your crypto and add a timer on top of it. You can’t withdraw the funds until the timer runs out.
    
-   The code is pretty much similar to the bank we coded earlier but now we are dealing with time in solidity.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/011-Vault.sol)
    

## 12. Interaction with Multiple Smart Contracts

-   Solidity is an Object oriented programming language and thus the OOPs concepts help us to manage the entire codebase in a neat manner.
    
-   You can keep different contracts in multiple files and import using the import keyword.
    
-   You can also keep all the contracts in a single file.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/012-MultipleSmartContracts.sol)
    

## 13. Handling errors in solidity

-   Errors are handled using various checking mechanisms.
    
-   Require is one of them
    
-   Require is a condition which needs to be satisfied else the code below the statement won’t be executed.
    
-   Require takes in a particular condition and the error message which should be shown if the condition is not followed.
    
-   Assert is used when writing protocols as it should follow the conditions strictly.
    
-   Revert is used to break the transaction then and there. Its not used as Require does the work.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/013-HandlingErrors.sol)
    

## 14. Creating a Smart Contract Factory

-   You can create one smart contract to create multiple new smart contracts.
    
-   Consider you are building a project which is a token launchpad where people can come in and launch their personal tokens.
    
-   This situation calls for a smart contract to make more.
    
-   It can be achieved by creating a parent contract and creating a new instance of the child contract whenever required.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/014-SmartContractFactory.sol)
    

## 15. Sending ERC20 Token

-   Whenever dealing with transfers, its mostly the transfer of the native token, for Ethereum, transfer function sends Eth, For Polygon it sends Matic etc.
    
-   But we can also send any custom ERC20 token via just making a few tweaks.
    
-   One needs to import ERC20 standard from open zeppelin
    
-   And pass the contract address of the ERC20 token you want to transact with.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/015-SendingERC20.sol)
    

## 16. Using Chain Link Data Feeds in Solidity

-   The smart contract is immutable once its deployed.
    
-   There might be cases where you require real time data in the smart contract like the current price of BTC or some API interaction.
    
-   This is where oracles come in, oracles are decentralized way to get the external world facts in the smart contract.
    
-   One of the leading oracles is Chainlink and they have a very easy documentation to get the data feeds on multiple chains.
    
-   [https://docs.chain.link/docs/using-chainlink-reference-contracts/](https://docs.chain.link/docs/using-chainlink-reference-contracts/)
    
-   Chainlink supports multiple chains on which you can get data feeds of multiple currencies.
    
-   [Github code](https://github.com/0xblocktrain/Solidity-101-series/blob/main/016-UsingChainlinkDataFeeds.sol)

Understand the core principles in solidity to write awesome smart contracts and dapps.

Solidity Course (Smart contracts, Ethereum)

All major topics in Web3 discussed in detail in this all in one course, check it out.

Web3 and Blockchain course (complete guide)

Here's a simple way to understand the process of finding a tech job starting from building a profile to taking interviews.

Roadmap that helps you get internships and jobs


<div class="ratio ratio-16x9"><iframe width="1467" height="733" src="https://www.youtube.com/embed/ictIDS1RmHg" title="Solidity, Smart Contracts, Ethereum, Blockchain Development course" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>  

Free resume review - 0xblocktrain@gmail.com

## Templates

-   Career cup: [What a GOOD Resume Should Look Like](https://www.careercup.com/resume)
    
-   Overleaf: [Jake’s Resume Template](https://www.overleaf.com/latex/templates/jakes-resume-anonymous/cstpnrbkhndn) (preference)
    
-   Github: [Deedy-Resume Template](https://github.com/deedy/Deedy-Resume)
    
-   It's perfectly acceptable to have a simple resume. Nothing fancy is required - No images, colors, fancy fonts, headings, quotes, etc.
    

## Action words

-   Make sure every line starts with an action word:
    

-   Eg: Worked on, Created, Added, Implemented, Discovered, Generated, Collaborated, Researched, Managed, etc.
    
-   [240 Resume Words: Action Verbs](https://zety.com/blog/resume-action-words)
    
-   [185 Powerful Action Words](https://www.themuse.com/advice/185-powerful-verbs-that-will-make-your-resume-awesome)
    

## Work experience

-   Ideally 3-4 experiences with 2-3 points each.
    
-   Make sure the dates are accurate and consistent in style. Include the year and the month or season.
    
-   Common headings: software engineer, web developer, mobile developer, intern etc.
    
-   Add a line at the end for Tools: Angular, Flutter, Dart, Testing, etc.
    
-   Don't add things like: using VSCode, Vim, etc. No one wants to know your code editor preferences.
    
-   You CAN add experiences outside of coding/computer science if you learned something new and have space for it. It's better to show real experiences than nothing!
    
-   Examples
    

-   Added some features using frontend technologies, which eventually went into production.
    
-   Worked on something which brought the revenue up by some %.
    
-   Implemented login functionality with authentication service using Firebase and Node JS.
    

## Projects

-   Ideally 3-4 projects with 1-2 points each.
    
-   Use school projects if you don't have any personal projects (start working ☺).
    
-   Mention the skills you learned or used. Eg: HTML, CSS, JS, Git.
    
-   It's fine to add other projects as well - maybe you did marketing for someone and helped them increase their numbers!
    
-   Examples
    

    
-   Created a landing page for the website to generate initial traffic before launch.
    
-   Worked as a freelancer to create 3 pages using something, something.
    

## Education

-   A lot of people argue that education should come before work / projects. That’s a myth.
    
-   Add your degree, courses, clubs, activities, experiences, projects, etc. You can mention jobs you did at your university.
    
-   Eg:
    

-   B.S. in Computer Science, 2020.
    
-   GPA: doesn't matter.
    

## Skills

-   Add programming languages, tech stacks you've used / are learning.
    

-   Languages: Python; Java; Dart; JavaScript; Typescript.
    
-   Technology: Android; Flutter; React Native.
    

-   It's fine to fake-it-till-you-make-it when submitting your resume, but make sure you know it before your interviews.
    
-   You can also add soft skills - they can help the resume parse through the ATS software. Eg: communication, leadership etc.
    

## Summary

-   Don't add a summary section unless you have space for it. Most resumes pass through an ATS software before being viewed by someone, so don't waste time on a summary.
    
-   Generic things can be avoided most of the time. Everyone is a 'hardworking software engineer with excellent skills', don't add it here. Instead, add it in the skills section (if you have space).
    

## Links

-   Add links to your Github, linkedin, Angel list, Twitter profiles.
    
-   A lot of times. managers and recruiters who look at these profiles will directly contact you, so it's nice-to-have.
    
-   Github: Add school projects (with permission) if you don't have any personal ones, or just fork other repositories that you like. Keep exploring!
    

## Harsh reality

-   Only a limited number of people look at your resume!
    

-   Recruiters or managers screen it after you've cleared your first round of online coding interviews.
    
-   Even then, they will ask you to explain most things - 'what's your favorite project', or 'which tech stack are you most comfortable in' - they want you to explain it.
    

-   Don't put in a lot of time.
    

-   It's fine to have a decent resume, but preparing for interviews or actually making projects is far more important.
    
-   Apply to a limited number of companies, prepare for those, and focus on clearing the interviews you get. Prepare well!
    
-   Getting a first round interview from a hundred companies <<<< Getting an offer from 1 company after applying to 10.
    

-   Don't pay someone to do a resume review.
    

-   Ask your friends.
    
-   Ask someone in your university - consultants, advisors, professors, etc.
    
-   Lookout for free resources like this one.
    

-   Your resume is only looked at for 5-6 seconds.
    

-   Make sure to keep that in mind when displaying your skills. Use actionable items like numbers, percentages, etc.
    

## Don't follow this blindly

-   This comes from our personal experiences, so don't take it too seriously, and feel free to make tweaks according to what you think is the best. Everything doesn’t work for everyone, so experiment along the way.
    

## Good luck

-   Your resume doesn't define you, you're worth much more than that. If you're looking for a job/internship - we hope you get it soon! Keep working hard. 

Learn how to make a strong resume with the right words, skills, education, and more. The FUD ends here.

RESUME that gets you golden opportunities


<div class="ratio ratio-16x9"><iframe width="1467" height="733" src="https://www.youtube.com/embed/5-53ml5nWnU" title="Solidity, Smart Contracts, Ethereum, Blockchain Development course" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>  

Get the guide https://dsarevision.com

In this document, we’ve covered all the amazing data structures and algorithms that you need to study for interviews. Reviewing these topics will make you a better problem solver, a better developer, and help you ace your next technical coding interviews.

## Our Aim

- Our aim is to help you become a better problem solver by gaining knowledge of different data structures, algorithms, and patterns.

- We want you to first understand the concepts and visualize what’s going on, then you can move forward with more questions.

- Most phone interviews require you to be a good communicator and explain your approach, even before you write the solution. It’s important to understand the core concepts and then work on extra stuff.

- There are thousands of questions out there that you can solve, but computer science and coding is much more than just learning data structures. 
- Building and developing something is the core of computer science. So, if you’re actually interested in computer science, then most of your time should go in learning new frameworks and building stuff. Another important aspect of coding is to explore! The more you explore -> the closer you get to your interests. Good luck!

## Practice

- Practicing 150-200 questions will give you the confidence to approach new problems. Solving only 2 questions for 75 days is not a lot if you think about it!

- Consistency is the key. Finish this guide in 75-90 days. Don’t rush it from today. Take your time, revisit topics after a while, read and watch a lot of videos, explore things out there to eventually become a better version of yourself.

- Enjoy the process and start today. I’m sure you’ll do great. Have fun.

Revise for your technical coding interviews through this simple revision guide in the next 15-45 days

REVISE Data Structures and Algorithms

A complete guide to cracking the technical interview and landing an awesome opportunity.

Ultimate coding tech interview guide

Overview of 15 major topics in Web3 along with the right resources and planning discussed.

Best 15 topics of Web3 to learn


<div class="ratio ratio-16x9"><iframe width="1467" height="733" src="https://www.youtube.com/embed/CJhUed6msJA" title="Complete Blockchain developer roadmap | Guide to learning Blockchain development" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>  

## Topics
- Important facts
- Prerequisites
- Git, Npm
- Smart contracts I
- Smart contracts II
- Nansen AI, analytics
- Authentication
- Build a DEX I
- Build a DEX II
- Speed run

## Important facts

-   Currently, everyone is copying pasting without actually understanding - we’re going to solve this. Watch the complete video if you want more detailing. If you want to learn everything in a weekend, that’s not possible. Learning never stops in web3 and there are too many things to learn
    
-   Stop copying and pasting code, refer to examples and try to learn if you’re copying. Pasting code to fetch certificates or NFTs will get you nothing - understanding and bringing out your creativity will.
    
-   Learn if you’re copying/importing
    
-   There are many frontend templates that you can use for the beginning, don’t waste your time writing CSS if you’re not interested in that.
    
-   This is a roadmap for developers, if you’re looking for beginner or theoretical Web3 knowledge, watch the all in one web3 video here:
    
-   While you’re going through this or watching the video - read docs, make notes, ask questions, make friends
    

## Prerequisites

-   You need good knowledge about Bitcoin, ethereum, how the blockchain works, hashing, NFTs, before diving deep into this roadmap and getting started with development.
    
-   We have a complete video on all the things you need –
    

  

Watch our all in one Web3 video before starting:

## Git, Dependencies

-   Npm and git are 2 things everyone should know before starting out on projects. Git makes it easier to manage projects and npm is a project manager which helps us download libraries. Yarn is another such example to manage libraries.
    
-   Most common git commands are: Push, pull, remote, clone - we’ll talk about the rest as we build, but this is enough for now.
    
-   Hardhat, which is a tool for smart contract development, has a bunch of commands which we can use to deploy and test contracts.
    

  

## Smart contracts I


-   Complete solidity video is out, where you’ll learn everything about smart contracts in a single video. Check it out here:
    

-   Solidity is Similar to any other language - variables, arrays, enums, OOPS, and more. Some things are different like identifiers, code is public so easy to hack, and needs better auditing or commenting.
    
-   Syncing with frontend is also a little different than web2 applications. We’ll use libraries like ethers or web3.js to do that.
    

-   [https://solidity-by-example.org/](https://solidity-by-example.org/) has a bunch of examples of smart contracts. We will understand 5-10 examples in detail before moving forward.
    

## Smart contracts II

-   We’re going to do many podcasts with real smart contract engineers to learn about industry standards of smart contracts. Just like web2 apps, the basics of smart contracts won’t help you in complex applications - you need more than that.
    
-   We’ll talk about more complex stuff like auditing, hacking, optimization. How can we use libraries and companies like [https://quantstamp.com/](https://quantstamp.com/) to improve our smart contracts?
    
-   We’ll also talk about job aspects, interviewing, and what to expect when talking to companies in the blockchain dev space.
    

  

## Nansen AI, Analytics, NFTs


-   We’ll discuss some non-core development related topics like analytics.
    
-   Blockchain is full of data and we can use tools like Nansen or Dune to query on that data. These are super powerful tools which will help us find super creative things through data.
    
-   There are videos on etherscan, mempool which you can check out on the channel.
    
-   We’ll discuss NFTs and what is going on behind the scenes. A complete video on NFT will be uploaded on the channel - so check that out.
    

## Let’s understand a dApp

-   We’ll explain what is a dapp through images, [Image 1](https://uploads-ssl.webflow.com/5ddd80927946cdaa0e71d607/614ba7406b5b5f350682ab60_Screen%20Shot%202021-09-22%20at%205.59.02%20PM.png) , [Image 2](https://uploads-ssl.webflow.com/5ddd80927946cdaa0e71d607/614bac9a0ba0027397d0f040_Screen%20Shot%202021-09-22%20at%206.22.07%20PM.png), [Image 3](https://uploads-ssl.webflow.com/5ddd80927946cdaa0e71d607/614baccfeb33fa66b9c2aa7d_Screen%20Shot%202021-09-22%20at%206.22.57%20PM.png)
    

  

![](https://lh5.googleusercontent.com/_EyAV6lepJG2GoJkPq7SL110V5sa17NwKu7yP5GZZ2vOip94nLEoF-Kje4aXa-hgxt8jr2oGeUtxwbnuuH01COJcTZtH8OILvZid7e9aQPW6ezsjqyGoTI_jyPkRudyALdXfpU4WyKlVBcc2)

-   The basic frontend is html, css, js and it can be used to build simple dApps. However, as the complexity goes up - you need react and better libraries to make things faster and better.
    
-   We’ll give a simple review of React and what are the most important things in react - functions, hooks, routing, and AO,
    
-   We’ll understand how to connect the blockchain and the basics of it all - libraries, nodes, and much more.
    
-   Finally we’ll wrap up by understanding graphs, APIs, and more.
    

## Authentication - web2 vs web3

-   Web2 has a Google sign whereas web3 apps have metamask - which is your wallet and the key to the blockchain world. We’ve explained wallets in our intro video so do check it out before moving forward.
    
-   Simple metamask wallet in html through Moralis: [https://github.com/MoralisWeb3/vanilla-boilerplate/blob/main/index.html](https://github.com/MoralisWeb3/vanilla-boilerplate/blob/main/index.html)
    
-   We will use Moralis - the amazing library for all our blockchain needs. The main things we need are - server url, app id
    

![](https://lh4.googleusercontent.com/GjgSjPQJzNnzf6cClO5VmlzrIGosBNdPfEI8vYvulMhmCW_FYiNK6PAqf7MfGckXQcMFiTuiMDWsa02ufYsMLAIz9IhBXfUXgS5lOJpElbp_lUlokS7-6NJwkQvsa-A228p0tOj7uBBxoqNw)

  

-   Will discuss everything about moralis before moving to a more complex example.
    

## Build a DEX - Moralis + html, css, js


-   We’ll build and understand a simple DEX through moralis, html, css, js - github: [https://github.com/arvind3157/DEX](https://github.com/arvind3157/DEX)
    
-   For the frontend, we’ll have the wallet, some code to connect that and then finally a Moralis 1inch plugin thing which we can use to exchange the coins.
    
-   For the blockchain part, we’ll write a smart contract, connect it with the frontend, and see how the overall thing works.
    
-   We’ll look at a more complex example after this through react and more.
    

## Build a DEX - Moralis + React

-   Simple metamask - for authentication: [https://github.com/MoralisWeb3/vanilla-boilerplate/blob/main/index.html](https://github.com/MoralisWeb3/vanilla-boilerplate/blob/main/index.html)
    
-   We’ll see how react can make things much better for us. It’s much easier to read after you have something more complex.
    
-   [https://github.com/MoralisWeb3/react-moralis](https://github.com/MoralisWeb3/react-moralis)
    
-   We can wrap our react app with Moralis - makes everything easier and production ready
    
-   We’ll look at many examples and understand as we make our way to more complex examples.
    

## Speed run ethereum - examples

-   [https://speedrunethereum.com/](https://speedrunethereum.com/)
    
-   We’ll go through the codebase of some examples here and see how can we fast track our projects through some boilerplate code.
    
-   There are other things like a notifier - [https://docs.blocknative.com/notify](https://docs.blocknative.com/notify), which we’ll understand as well.
    
-   Most examples are hard to build and easy to copy. Once you understand everything, things will be much easier for you.
    

  

## Stop here before moving forward

-   BUILD things now and stop focusing on reading more.
    
-   Think of new ideas and start building, push the code out to github, get some users, attend some hackathons, and enjoy the process of building.
    
-   What after this from us? We’ll cover more topics like chainlink, oracles, other chains like Solana, IPFS, NFTs and more. Many many videos coming out to cover end to end things.
    

  

![](https://lh4.googleusercontent.com/NWV6tE6ye3j8Sii7gwJJPGXf1dqiTjlQkyTiLN6XJ34nrOgMUJVep_NLE_J8yfc7rezrpnZKgw9jusrB2lZlPy_kDfvJMPWOoD5xGKTyrF3TVMmdnilfueVTTHV-G8iWFtZX_IxvDvv2mriV)

Understand the concepts, build stuff as you go, and be consistent.

Blockchain developer roadmap 2022 (updated)


<div class="ratio ratio-16x9"><iframe width="1467" height="733" src="https://www.youtube.com/embed/ivHTX8xWXBU" title="Solidity, Smart Contracts, Ethereum, Blockchain Development course" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>  

- Introduction, overview
- Music NFTs
- Metaverse, Gaming NFTs
- Fashion NFTs
- Certificates and Edtech NFTs
- Buying and selling
- How to find good projects?
- Tools and platforms
- NFT Development
- Scams, summary
    

![](https://lh3.googleusercontent.com/891OktP3e9VYzl2fZ7DQ9N5Dl_REQTvbnzUHUCnWo7Q1ZKt_oAHlStCDXwIKqD-hGBLx09aS4wBykym66CJfxoU4smqzzZqZ_lJGPDaT2MeD1OPt2nCx_g9SqHuQl73a33dLWDVGMP2tqBrC)

## Introduction

NFT is a non fungible token - simply meaning it cannot be traded for something else. You cannot trade your face with someone else’s face - but you can trade cash for something else. Or maybe bitcoin for another bitcoin - or $ETH for another $ETH token. We’ve seen pictures getting sold for millions of dollars but that’s not everything that there is for NFTs. There are a lot more use cases for NFTs around the world, let’s discuss some.

-   Metaverse, Games, P2E, DAOs, Real estate, Supply chain, Governance, Identity, etc
    

Opensea did $5B in sales - imagine how many people are buying, selling, trading NFTs every single day. It’s here to stay, so let’s learn together! Read more about it here: https://decrypt.co/91748/opensea-record-5b-ethereum-nft-market-swells

### Some of the most expensive NFTs

-   ‍[Beeple’s Crossroad](https://niftygateway.com/marketplace?collection=0x12f28e2106ce8fd8464885b80ea865e98b465149&tokenId=100010001) — $6.6m[‍](https://www.larvalabs.com/cryptopunks/details/7804)
-   [CryptoPunk #7804](https://www.larvalabs.com/cryptopunks/details/7804) — $7.6m[‍](https://www.larvalabs.com/cryptopunks/details/3100)
-   [CryptoPunk #3100](https://www.larvalabs.com/cryptopunks/details/3100) — $7.67m[‍](https://www.larvalabs.com/cryptopunks/details/7523)
-   [CryptoPunk #7523](https://www.larvalabs.com/cryptopunks/details/7523) — $11.75m[‍](https://onlineonly.christies.com/s/beeple-first-5000-days/beeple-b-1981-1/112924)
-   [Everydays: the First 5000 Days](https://onlineonly.christies.com/s/beeple-first-5000-days/beeple-b-1981-1/112924) — $69.3m
    

‍Let's discuss some use cases!

## Music NFTs

- Musicians sell – Artists decide what percentage of royalties they will put up for sale in the form of NFT. This gives fans the right to the purchased part and access to certain benefits. It depends on the creators what the benefits are, and they can combine digital art, fan experiences, and songs.
    
- Collectors buy – When artists sell royalties of their songs, they are available to customers in the form of non-fungible tokens (NFTs) directly from musicians. Also, in the package containing the token, the performer can add additional benefits for customers. For example, when selling royalties from a particular collection of the song Rare performed by Nas, you can also get tickets for the concert, signed vinyl, and more.
    
- Earning royalties – When you become the owner of the tokens purchased from the creator, you can claim royalties when they accrue. The payout time now depends on the artist.
    
- Token trading – You can manipulate your tokens as you wish and even sell them. NFT exchanges sell and buy these assets, so you can put them there with your offer. But the moment you sell your NFTs, then all your royalties, as well as the benefits they bring with them, become the property of the new buyer.
    

![](https://lh5.googleusercontent.com/kgR0m9RxV35vg4nQc7f5NUfkJ8IwQ8vzzgAPodMqUXOvLlfc1kSp1IYqE1tJPeod2G-VYgzGnMCikADwC8y9qQoBtcGDVVmXXNjIrSbLN8IlbWbVqM_-3k2HGyEqUCgKgFqihToTPLdQqmNG)

## Metaverse, Gaming NFTs

From a technical perspective, the metaverse is emerging as a set of persistent, 3D virtual environments that are linked together to create a virtual universe. A more straightforward description of the metaverse is that it is just the internet with a highly visual layer of interactive and immersive content on top.

[Axie Infinity](https://axieinfinity.com/) is arguably the leading NFT-based game of today. It lets players breed digital NFT pets called Axies and trade plots of virtual land. It also features a play-to-earn model, rewarding loyal players with tokens. This has made the game a big hit in the Philippines, where payouts from the game can top the average national salary.

[Gods Unchained](https://godsunchained.com/) — Gods Unchained is a digital collectible card game that pays players when they beat their opponents. It’s similar to card game classics like Magic: The Gathering, but as the cards are tokenized, players have true ownership over in-game items.

Zed run is another great example of how NFTs will change the way we play games online. We will buy NFTs as the ‘tokens’ we buy right now and use those to play or earn something.

Ever gone to an arcade? You go and buy coins first, then use those coins to play something there. Exactly! NFTs are similar and they're used to participate in these games. They offer more utility than just those tokens but still there is a lot more to explore.

People are buying land in the metaverse to put up their houses and art. It might not make sense, but think of it as an investment - sometimes you buy a house where you don't live - you have it for investment.

### Read more
-   [https://medium.com/synthetic-media/the-metaverse-nfts-8fae80368ad7](https://medium.com/synthetic-media/the-metaverse-nfts-8fae80368ad7)
-  [https://www.inverse.com/gaming/nfts-in-video-games-square-enix](https://www.inverse.com/gaming/nfts-in-video-games-square-enix)
-   [https://www.nintendolife.com/features/talking-point-what-could-nfts-mean-for-gaming-and-why-are-they-so-divisive](https://www.nintendolife.com/features/talking-point-what-could-nfts-mean-for-gaming-and-why-are-they-so-divisive)
-   [https://www.inverse.com/gaming/nfts-in-video-games-square-enix](https://www.inverse.com/gaming/nfts-in-video-games-square-enix)
- [https://medium.com/arianee/gaming-nfts-how-they-are-creating-new-value-for-video-games-f955fb073251](https://medium.com/arianee/gaming-nfts-how-they-are-creating-new-value-for-video-games-f955fb073251)
    

## Fashion NFTs
![Beyond the bubble: Making NFTs work for fashion | Vogue Business](https://media.voguebusiness.com/photos/6095307983b7719b9c1c3e36/3:4/w_1998,h_2664,c_limit/nfts-voguebus-rtfkt-may-21-story.jpg)

Metaverse and NFT fashionables are real. Tons of companies are bringing in artists to make wearables inside the virtual world.

In February last year, virtual sneaker brand [RTFKT Studios](https://www.instagram.com/rtfktstudios/?utm_source=ig_embed&ig_rid=5678c641-1f05-43df-8dfc-5ac91014c78a)[produced more than $3 million USD in sales](https://hypebeast.com/2021/3/rtfkt-studios-fewocious-sale-nfts) with a limited-edition drop, which included both a tangible pair of polychrome sneakers and an NFT that correlates with the shoe.

The MetaBirkins NFT showcases a digital art gallery of luxe handbags reminiscent of the silhouette of a Birkin bag, decorated with furry florals, cow print, distorted smiley face motifs and other psychedelic patterns.

### Read

-   [https://hypebae.com/2022/2/decentraland-metaverse-fashion-week-digital-clothing-runway](https://hypebae.com/2022/2/decentraland-metaverse-fashion-week-digital-clothing-runway)
    
## Certificates and Edtech NFTs

Colleges and ed tech bootcamps have given out certificates for the longest time.

It’s time to gamify it. You don’t get a boring certificate when you win a game - you get a nice reward with a fancy animation ‘attached’ to your digital account.

This is what is happening in ed tech as well.

Edtech solutions like learnWeb3 and buildspace give you NFTs when you complete their course. But how does this help?

Firstly, you get to show off that in the digital world and is connected to your address (anyone can see it)
  
Secondly, you become an alumni which is super easy to verify and get added to their additional feature list like the job board. So a company hiring can see who all have graduated from the course (it’s a HUGE business and need right now)

Thirdly, you become part of their DAO, which is a decentralized autonomous organization.

## Buying and selling NFTs
![OpenSea admits at least 80 percent of NFTs hosted on its platform are  plagiarized or knock-offs: Digital Photography Review](https://1.img-dpreview.com/files/p/E~C0x275S1677x943T1200x675~articles/5284763122/03FC3EFD-C943-44A1-BC1F-9B70258C1A0A.jpeg)

Now we’ll discuss what everyone is actually doing with NFTs - trying to make money. It’s super simple to buy an NFT but tricky to find actual good projects. Here’s how you buy an NFT

-   Get a wallet - Metamask account and transfer some ethereum: [https://metamask.io/](https://metamask.io/)
    
-   Go to Opensea, connect wallet, and buy whatever NFT you want to - click “Buy now”
    

## Good project checklist

DYOR - do your own research before buying into a project. This is a general checklist to determine if the project is going in the correct direction or not. There are many more things you should look at - which you’ll learn more as you dive deeper.

-   [ ] Do they have a great looking website without any typos?
    
-   [ ] Do they have any utility and a defined roadmap?
    
-   [ ] Are the founders active on social media and not anonymous?
    
-   [ ] Are the social accounts just bots or real followers with engagement?
    
-   [ ] Are they trying to solve a problem or do something unique?
    
-   [ ] Is the minting price reasonable or way too low?
    
-   [ ] Checked the number of owners, people who minted?
    
-   [ ] Do they have a great development team? Check their socials
    

## NFT helper tools

There are many tools which track how NFTs move in the real world - who is buying/selling, the rarity, upcoming projects, and more!

-   Nansen AI: [https://pro.nansen.ai/](https://pro.nansen.ai/)
    
-   Rarity tools: [https://rarity.tools](https://rarity.tools)
    
-   Rarity sniffer: [https://raritysniffer.com](https://raritysniffer.com)
    
-   RyzeNFT chrome extension: [https://ryzensolutions.net/home](https://ryzensolutions.net/home)
    

### Rarity tools

[Rarity.Tools](http://rarity.tools/) has an excellent scoring system for NFT rarity when you’re looking at NFT projects. The rarer the NFT you buy/hold is, the more likely it is to retain and increase its value. However, rarity.tools is only one NFT rarity tool. There are several other great tools we’ll go over that determine NFT rarity!

![](https://lh5.googleusercontent.com/Y9kWa7i2MFATKXqizbD8Qk7QSNWe5GJH3SxGbZFsBnzK3bxqDdso410Dy6tag4vXmlXwYNeR0TLkJcxV3qelIN336jjH_MSsO86JJBzhEYaIKYWO5D73NDo35TZ1YO_V-PEM5fA4igGW85t1)

-   Here's a great article: [https://cryptochronicle.io/an-nft-beginners-guide-to-using-rarity-tools/](https://cryptochronicle.io/an-nft-beginners-guide-to-using-rarity-tools/)
    

## Developers

Watch the complete Solidity, smart contract video before moving forward. 

You can do a lot of things in the NFT space as a developer. Start with a platform to buy, sell, trade and take it from there. ERC721 is **a standard for representing ownership of non-fungible tokens**, that is, where each token is unique.

Here's the main `mint` function which is called when the user tries to buy the NFT.
```
function mint(address to,  uint tokenId)  external  {
  require(to !=  address(0),  "mint to zero address");
  require(_owners[tokenId]  ==  address(0),  "token already minted");
  
  _balances[to]  +=  1;
  _owners[tokenId]  = to;
  emit Transfer(address(0), to, tokenId);
}
```

- Watch our complete NFT marketplace video to get into the development side.
- Explore the smart contracts for NFTs here: https://wizard.openzeppelin.com/
- There’s a new trend of fractional NFTs which is also interesting to read from a developer’s perspective. 
- Complete ERC721 implementation: https://solidity-by-example.org/app/erc721

> Stay tuned for more!


## Scams

-   ‍[6 Crypto and NFT Projects From This Month That Were Total Scams](https://gizmodo.com/6-crypto-and-nft-projects-from-march-2022-that-were-tot-1848639890)
    
-   [‍](https://gizmodo.com/6-crypto-and-nft-projects-from-march-2022-that-were-tot-1848639890)[Bored Ape and other major NFT Discord servers targeted by scammers | Engadget](https://www.engadget.com/bored-ape-nft-targeted-scammers-140923216.html)[‍](https://beincrypto.com/learn/nft-scams/)
    
-   [7 Most Common NFT Scams](https://beincrypto.com/learn/nft-scams/)[‍](https://youtu.be/PbBft8SPpCA)
    
-   [Busting a $20,000,000 NFT Scam (Squiggles)](https://youtu.be/PbBft8SPpCA)[‍](https://www.youtube.com/watch?v=O5GublWdMwI)
    
-   [Gary Vee's NFT Market Manipulation Scheme](https://www.youtube.com/watch?v=O5GublWdMwI)[‍](https://youtu.be/pLrRt8R9zRA)
    
-   [TechLead Scammed You With Million Token (as a millionaire)](https://youtu.be/pLrRt8R9zRA)
    

## Read more

-   https://www.producthunt.com/stories/three-use-cases-of-nfts
-   https://queue-it.com/blog/nft-ideas-for-inspiration
-   Metaverse NFTs: [https://oncyber.io/crypto-trap-house](https://oncyber.io/crypto-trap-house)
-   Gaming: [https://zed.run/](https://zed.run/) - Play horse games on the blockchain
-   [The Future of NFTs](https://youtu.be/sKxxc_cfwR0)
-   [NFT Uses for Today (and Tomorrow)](https://youtu.be/nsZQ73UOB4w)
    

## Summary

-   Every single person (including celebrities) promotes their projects - be super careful
-   Simple art pieces don’t usually bring any utility - you can still buy for the art
-   Youtubers partner with NFT projects all the time - everything is PAID
-   Don’t put in your savings - most projects are going to 0 anyways
-   Finding utility is hard - you have to research for hours - look at our checklist
-   DYOR - do your own research. NFA - Not financial advice
    
## Plan from here?

Take explosive action from here and dive into this field more:
-   Be active on social media - that’s where the most action is!
-   Post what you’re building or buying.
‍
---
`DYOR - NFA - Do your own research - Not financial advice`

Non fungible tokens are the hottest thing in the Web3 market right now. Come, let's understand everything about NFTs.

NFTs - the good, the bad, the worst?


<div class="ratio ratio-16x9">
<iframe width="1096" height="617" src="https://www.youtube.com/embed/3rxnWp0HG4o" title="Everything about Hackathons | Learn Web3 and Blockchain" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>  


## Topics

-   What is a hackathon?
    
-   Where to find hackathons?
    
-   How to apply and get into hackathons?
    
-   What to do at a hackathon?
    
-   Can beginners go to hackathons?
    
-   How to take full advantage? Food and Swag.
    

A hackathon is a design sprint-like event, in which often computer programmers and others involved in software development, including graphic designers, interface designers, product managers, project managers, domain experts, and others collaborate intensively on software projects

  

People come together and build awesome products. Give it a try and comment down if you’ve been to any!

## Mindset

-   Don’t build from scratch
    
-   Try to learn something new
    
-   Try to do something different
    
-   Find different teammates
    

  

Learn anything you want: Going to a hackathon means that you can get started with any new piece of technology you’ve wanted to explore.

  

Find templates and take them: If you want to build something cool which people use, it’s probably not going to happen if you write CSS in those 24 hours. Taking some ready made templates can fast track your journey to make something better.

  

Try learning something different: You’ll find tons of people making amazingly different things. AR, VR, maybe a game? Anything that you can think of – someone will probably be making it. Go talk to them and see how you can get started with that skill.

Find teammates who complement your skill. The same skill set wouldn’t really bring a lot of new knowledge to the table. Leave the friendship aside and find someone who can teach you something new in those 2 days.

## What to do at a hackathon?

  

Find free merch and food: Don’t go to a IRL hackathon without free food (big red flag)

  

Network with people: Find people who’re building amazing things. These connections will go a long way and help you become better in all ways.

  

Find sponsors, bounties: Tons of companies come to hackathons to give out money or opportunities. Make sure to talk to them and see if they have anything in room for you.

  

Make something cool: Finally, make something cool and show it to the world. Deploy it on a domain and put it out on social media. Get some initial users and then take things from there.

  

Chain Link hackathon

-   [https://chainlinkspring2022.devpost.com/project-gallery](https://chainlinkspring2022.devpost.com/project-gallery)
    

Find people, build cool stuff, find free food, and more!

How to attend, win, and enjoy HACKATHONS

A Complete Guide to Building Ethereum dApps: Front-end and Back-end

Build an AUCTION dapp from scratch


## Topics
- Introduction
- New react app
- Truffle
- Smart contracts
- Fundraiser setup
- Material UI
- React routing
- Finishing up

## Set up a fundraising campaign, donate ETH, generate a receipt, and withdraw the amount

![](https://miro.medium.com/max/700/1*129iGokTS6KpScwOSF5iLw.jpeg)

photo credit:  [Shubham Dhage](https://unsplash.com/@theshubhamdhage)

We’re going to use React Truffle Box to generate frontend code for our Web3 application to get it running quickly and interact with Web3. Let’s start by making a new directory for our fundraiser application and creating a fresh Truffle React Box application inside it.

The first thing we will need to do is create a new empty repository for our Fundraiser application. Next, we’ll change into that directory and unbox the React Truffle Box:

`mdkir fundraiser ` 
`cd fundraiser  `
`truffle unbox react`

Excluding the  `node_modules`  directory, our directory structure should now look like the following:

![](https://miro.medium.com/max/700/1*o5OG4Ek5WWxO3cWZkOwMTQ.png)

Remove  `contracts/SimpleStorage.sol`,  `migrations/2_deploy_contracts.js`  and empty  `test`  folder:

`rm contracts/SimpleStorage.sol **\** migrations/2_deploy_contracts.js \ test/*`

Next, you’ll need to create new files for our contracts and the migration. First, create all the empty files for our contracts and our migration:

`touch contracts/FundraiserFactory.sol  `
`touch contracts/Fundraiser.sol ` 
`touch migrations/2_factory_contract_migrations.js`

We’ll also need to install  `OpenZeppelin`  because we are using the Ownable contract:

`npm install @openzeppelin/contracts`

And in the  `Fundraiser.sol`  file, change the import statement to use the node_module we just installed from OpenZeppelin:

`import '../client/node_modules/@openzeppelin/contracts/ownership/Ownable.sol';`

The code for the  `Fundraiser.sol`  is given below:
https://gist.github.com/ac12644/98b2e9b2fba5cedf0b388a6e106b07b0#file-fundraiser-sol


The code for the  `FundraiserFactory.sol`  is here: https://gist.github.com/ac12644/bf381a0fbccb76d0b9bd5b01716d848f#file-fundraiserfactory-sol 

After we’ve added the contracts, let’s get our Truffle development environment up and running again.

In the fundraiser repository, let’s run the commands to compile and migrate our Fundraiser contracts so we can interact with them from our frontend application:

`truffle develop`

After that command has finished running, we’ll run the compile and migrate in that same terminal window:
```
compile  
migrate
```

> If you ever run into migration issues and get stuck on the solution, try running  **migrate — reset**.

If your contracts have migrated successfully, they should look like this output:

Starting migrations...  
======================  
> Network name:    'develop'  
> Network id:      5777  
> Block gas limit: 0x6691b71_initial_migration.js  
======================Replacing 'Migrations'  
----------------------  
> transaction hash: 0xf04ee2a0c62330e7a051148d4660de...  
> Blocks: 0        Seconds: 0  
> contract address: 0x6Af651D4c6E9f32a627381B...  
> block number: 1  
> block timestamp: 1566526994  
> account: 0xb94454C83ff541c82391b...  
> balance: 99.99477342  
> gas used: 261329  
> gas price: 20 gwei  
> value sent: 0 ETH  
> total cost: 0.00522658 ETH> Saving migration to chain.  
> Saving artifacts  
-------------------------------------  
> Total cost:          0.00522658 ETH2_factory_contract_migrations.js  
================================Replacing 'Factory'  
-------------------  
> transaction hash: 0xebc5a26bbe12f52b809d9144...  
> Blocks: 0    Seconds: 0  
> contract address: 0xB7780C9AD3ef38bb4C8B48fab37...  
> block number: 3  
> block timestamp: 1566526995  
> account: 0xb94454C83ff541c82391b4...  
> balance: 99.95063086  
> gas used: 2165105  
> gas price: 20 gwei  
> value sent: 0 ETH  
> total cost: 0.0433021 ETH> Saving migration to chain.  
> Saving artifacts  
-------------------------------------  
> Total cost:           0.0433021 ETH  
Summary  
=======> Total deployments:   2  
> Final cost:          0.04852868 ETH

## Fundraiser Setup

Let’s work on getting our React Truffle Box up and running so we can interact with our application.

We’ll first need to cd into the  `src`  file of our React application and install all of the dependencies that the React Truffle Box provided for us.

After that, we’ll need to start up the frontend of our application just like we did in the previous chapter:

```
cd client  
npm i
```
After the modules have finished installing, start up the server:

`npm start`

If everything has been installed properly and started successfully, we can now navigate to localhost:3000 to see our Web3 application. See

![](https://miro.medium.com/max/700/1*u_M5JV3KIzunWlWCxNDU3A.png)

Oops! We forgot to switch our network to match our new application. We’ll need to be on the same network so our app can run properly.

Let’s first go into MetaMask and switch the network at the top to be Localhost 8545.

Localhost 8545 should be in the default list. If not, you can refer back to the previous chapter and add it.

When we ran truffle develop, we saw this:  _Truffle Develop started at_ [_http://127.0.0.1:9545/_](http://127.0.0.1:9545/)

![](https://miro.medium.com/max/700/1*PT_CMX1vcM8mjK6XPGcz4w.png)

Copy  [http://127.0.0.1:9545/](http://127.0.0.1:9545/)  to your clipboard. Next, we need to open MetaMask and import that network. Open the MetaMask extension and select Main Ethereum Network. We’ll need to select Custom RPC and enter  [http://127.0.0.1:9545](http://127.0.0.1:9545/)  where it says New RPC URL.”

![](https://miro.medium.com/max/700/1*ZzOqWL_nreIo3a-OdVXzyw.png)

metamask

Go to My Accounts > Import Account

![](https://miro.medium.com/max/700/1*ZnWXyl5sgsnLwAMKHbyrjg.png)

Paste the private key generated after  _truffle develop_  in the MetaMask import and select Import.

![](https://miro.medium.com/max/700/1*0vCOQTEbAg4dOu-ECinh1w.png)

Now, refresh the screen and you should see the simple storage UI we saw before. Verify that your page looks like

![](https://miro.medium.com/max/700/1*aZPx347u1Y2XZKYOFOYA4g.png)

With our app running, let’s start in our  [App.js](https://github.com/ac12644/fundraiser_dapp/blob/master/client/src/App.js)  file and rip out some of the boilerplate code to prepare our frontend to interact with the fundraiser.

First, navigate to the  `[client/src](https://github.com/ac12644/fundraiser_dapp/tree/master/client/src)`  directory and open the  `App.js`  file. We’ll need to remove the old React code and replace it with our own React code: https://gist.github.com/ac12644/4ae75f9dcbb21819490cc70551be7b51#file-app-js

## React Routing

We’ll need to set up routes in our React application. We’ll use react-router-dom to let a user see different pages, depending on what they’ve selected from the navbar.

We’ll start by installing the npm package for  `react-router-dom`:

`npm install — save react-router-dom`

After you’ve installed the npm package and restarted your frontend server, import the necessary files from react-router-dom in your  `App.js`  file, as shown here:

`import { BrowserRouter as Router, Route, NavLink } from "react-router-dom"`

We’ll also need to import our two new components for the home page and the new fundraiser to use in our routes:
```
import NewFundraiser from './NewFundraiser'  
import Home from './Home'
```
Next, let’s replace the render function with the following code. This will enable us to use the navbar provided from Material UI to navigate to different pages throughout our app:
https://gist.github.com/ac12644/7123d8390d5937a6eeb404ca8a5d3968#file-app-js

Create two new files:  `Home.js`  and  `NewFundraiser.js`.

We’ll use the home page component as our main landing page for our application and the New Fundraiser page to create a new fundraiser in our application:
```
touch Home.js  
touch NewFundraiser.js
```
Let’s work on creating the  `Home`  view. Inside your  `[Home.js](https://github.com/ac12644/fundraiser_dapp/blob/master/client/src/Home.js)`  file, use the following placeholder code and save that file:
https://gist.github.com/ac12644/249f05f5e1a7470caeb218f07605752e#file-home-js

Similarly, in the  `NewFundraiser.js`  file, add this code:
https://gist.github.com/ac12644/034a5ebeadf6d48aec51d19e47b83403#file-newfundraiser-js

We’ll need to do is modify the code in our  `index.js`  file so we can render routes properly.

We’ll use  `BrowserRouter`  from  `react-router-dom`  to wrap our application in a Router:
https://gist.github.com/ac12644/98767afe42ebb9d12bfcb7c8f5941483#file-index-js

## React and Material UI

Let’s begin by installing Material UI into our application.

Run the install command in your  `client`  directory to install react-bootstrap in our fundraiser application as follows:

`npm install @material-ui/core --save`

From the Material UI site, let’s look at the app bar page here.  
Let’s start with the simple app bar.

First, we’ll need to add all the imports to the top of our  `App.js`  file. This will allow us to use the Material UI components we need:
```
import { makeStyles } from '@material-ui/core/styles';  
import AppBar from '@material-ui/core/AppBar';  
import Toolbar from '@material-ui/core/Toolbar';  
import Typography from '@material-ui/core/Typography';
```
Now that we have the imports, we need to add in the styles so our fundraiser app looks good.

You’ll need to add in these styles after your  `useEffect`  function:
```
const useStyles = makeStyles({  
      root: {  
        flexGrow: 1,  
      },  
});  
const classes = useStyles();
```

After you’ve imported the correct files and added the style preceding code, let’s replace the actual render code so we can see our new navbar:

Let’s quickly add a little styling to the  `NavLink`  component so it looks more professional.

In your  [_App.css_](https://github.com/ac12644/fundraiser_dapp/blob/master/client/src/App.css)  file, add these to the file:

## Creating Our New Fundraiser Page View

We’ll start by using Material UI’s text field component. Add an import statement to your  `NewFundraiser.js`  file right after your latest import statement. Now, let’s move on to getting Web3 so we can access our Factory contract  _[line 42]_.

In our  `NewFundraiser.js`  file, update the  `useEffect`  function to use the Web3 code. The following code will create a new instance of our contract and set the state of Web3, our contract, and our current account.

Next, we need to import our contract and point to our contract that has been deployed locally in our  `NewFundraiser.js`  file  _[line 6–7]_.
https://gist.github.com/ac12644/7a365977d7ce51e3eecf196c65bd21a4#file-newfundraiser-js

Now that we’ve received the data from our contract, we’ll work on the front end to display each Fundraiser card to the user.

The first thing we’ll need to do is create a new component that we’ll use to display our Card component. Create a new file  `FundraiserCard.js`**_._**
https://gist.github.com/ac12644/58936e3d9acbdf8a296773b5b1738b76#file-fundraisercard-js

If you navigate to localhost:3000, you’ll see that it’s blank for now. Let’s create a render function to go through each fundraiser and display them on a card.

Now, switch to  `[Home.js](https://github.com/ac12644/fundraiser_dapp/blob/master/client/src/Home.js)` [](https://github.com/ac12644/fundraiser_dapp/blob/master/client/src/Home.js) file, we’ll iterate through the list of fundraisers and display the Card component for each one:
```
const displayFundraisers = () => {  
      return funds.map((fundraiser) => {   
        return (  
          <FundraiserCard fundraiser={fundraiser} />  
       ) })  
}
```

![](https://miro.medium.com/max/700/1*bTXr7FGWlrAgcAu2Td6FxA.png)

fundraiser

# Finishing Up

## Adding Detailed Information About Each Fundraiser

The next item on our agenda is to display more information about each fundraiser to our users. Copy the following code and add it to  `FundraiserCard.js`:
https://gist.github.com/ac12644/3c38f7d7594f91f9d42a55d3c9905139#file-fundraisercard-js

The code for the  `App.js`  is given below:
https://gist.github.com/ac12644/9af208636a6c7cbf186fd76c2a4e4ace#file-app-js

The code for the  `Receipts.js`  is given below:
https://gist.github.com/ac12644/9faec855f937b70d29077b5947a11f5c#file-receipts-js

![](https://miro.medium.com/max/700/1*iSTjyz2wfzvb94a9_UDvjw.png)

Create a Full-stack Fundraiser Dapp Using Truffle, Solidity, React, Material UI, and Web3

Full stack web3 - fundraising decentralized app



The best way to learn is to build. We'll show you how to build a blockhchain so you understand the principles behind all this.

Credits: https://github.com/codecrafters-io/build-your-own-x

## Different ways to build

* [**ATS**: _Functional Blockchain_](https://beta.observablehq.com/@galletti94/functional-blockchain)
* [**C#**: _Programming The Blockchain in C#_](https://programmingblockchain.gitbooks.io/programmingblockchain/)
* [**Crystal**: _Write your own blockchain and PoW algorithm using Crystal_](https://medium.com/@bradford_hamilton/write-your-own-blockchain-and-pow-algorithm-using-crystal-d53d5d9d0c52)
* [**Go**: _Building Blockchain in Go_](https://jeiwan.net/posts/building-blockchain-in-go-part-1/)
* [**Go**: _Code your own blockchain in less than 200 lines of Go_](https://medium.com/@mycoralhealth/code-your-own-blockchain-in-less-than-200-lines-of-go-e296282bcffc)
* [**Java**: _Creating Your First Blockchain with Java_](https://medium.com/programmers-blockchain/create-simple-blockchain-java-tutorial-from-scratch-6eeed3cb03fa)
* [**JavaScript**: _A cryptocurrency implementation in less than 1500 lines of code_](https://github.com/conradoqg/naivecoin)
* [**JavaScript**: _Build your own Blockchain in JavaScript_](https://github.com/nambrot/blockchain-in-js)
* [**JavaScript**: _Learn & Build a JavaScript Blockchain_](https://medium.com/digital-alchemy-holdings/learn-build-a-javascript-blockchain-part-1-ca61c285821e)
* [**JavaScript**: _Creating a blockchain with JavaScript_](https://github.com/SavjeeTutorials/SavjeeCoin)
* [**JavaScript**: _How To Launch Your Own Production-Ready Cryptocurrency_](https://hackernoon.com/how-to-launch-your-own-production-ready-cryptocurrency-ab97cb773371)
* [**JavaScript**: _Writing a Blockchain in Node.js_](https://www.hackdoor.io/articles/writing-a-blockchain-in-nodejs-6512fec33307)
* [**Kotlin**: _Let’s implement a cryptocurrency in Kotlin_](https://medium.com/@vasilyf/lets-implement-a-cryptocurrency-in-kotlin-part-1-blockchain-8704069f8580)
* [**Python**: _Learn Blockchains by Building One_](https://hackernoon.com/learn-blockchains-by-building-one-117428612f46)
* [**Python**: _Build your own blockchain: a Python tutorial_](http://ecomunsing.com/build-your-own-blockchain)
* [**Python**: _A Practical Introduction to Blockchain with Python_](http://adilmoujahid.com/posts/2018/03/intro-blockchain-bitcoin-python/)
* [**Python**: _Let’s Build the Tiniest Blockchain_](https://medium.com/crypto-currently/lets-build-the-tiniest-blockchain-e70965a248b)
* [**Ruby**: _Programming Blockchains Step-by-Step (Manuscripts Book Edition)_](https://github.com/yukimotopress/programming-blockchains-step-by-step)
* [**Scala**: _How to build a simple actor-based blockchain_](https://medium.freecodecamp.org/how-to-build-a-simple-actor-based-blockchain-aac1e996c177)
* [**TypeScript**: _Naivecoin: a tutorial for building a cryptocurrency_](https://lhartikk.github.io/)
* [**TypeScript**: _NaivecoinStake: a tutorial for building a cryptocurrency with the Proof of Stake consensus_](https://naivecoinstake.learn.uno/)



Learn how to build a blockchain to understand the principles behind this beautiful technology.

Build your blockchain


<div class="ratio ratio-16x9">
<iframe width="1096" height="617" src="https://www.youtube.com/embed/3rxnWp0HG4o" title="Everything about Hackathons | Learn Web3 and Blockchain" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>  

## Hackathons

-   Hackathons are 2-3 day long events where you work in a team and make new projects. At the end, you present the project in front of judges and get feedback.
    
-   It’s a great way to find like-minded people, create something cool, and win awesome prizes! It’s the best place to simultaneously find people and projects, create something new within 24-36 hours, and enjoy free food + swag from companies.
    
-   [The 8 Best Websites to Find a Hackathon — The HackLife Guide 💾 💻🤓](https://medium.com/@jonathanallengrant/the-7-best-websites-to-find-a-hackathon-the-hacklife-guide-3e420f2a565b)
    
-   [How To Find Hackathons. One of the best experiences of my life… | by Felix Cabrera](https://medium.com/@felixthedev/how-to-find-hackathons-53d6381205e9)
    
-   Tons of online and offline hackathons happening. Find, sign up, and attend:  [Major League Hacking (MLH)](https://mlh.io/).
    

## GitHub + Open source

-   [Code Together · GitHub](https://github.com/Awesome-Open-Soure)
    
-   Clone and fork every repository you find useful. If you’re interested in the project, track its progress or extend some features on it. For instance, there’s a portfolio template -> extend it into something more centric to a topic. Try different things and keep exploring!
    
-   Follow people who regularly add content. It’s nice to see interesting tech on the Github feed. Once you follow people who post regularly, you’ll see how so many amazing things exist in the tech world.
    
-   Be active overall
    
-   Start with small projects.
    
-   Upload and maintain your projects on GitHub.
    
-   Add documentation wherever you can. Often, if someone is looking at your project, they’ll only focus on the Readme. Not a lot of people will dig deep and find something in the code, but a lot of people are interested in what the project is about. So, it’s important to add screenshots, write some about the project, and maybe explain the journey of how you made it.
    
-   Improve Git practices: Git is something that every company uses, and it’s a great way to manage and collaborate on projects - definitely an essential part!
    
-   The open source community is huge and it’s great to follow these projects.
    
-   A simple Google search of “beginner project in react” will land you at hundreds of repositories. Take advantage of this, clone the repos, and start learning from there.
    
-   There’s an awesome list for every framework out there - simply Google “awesome list react” and you’ll see projects related to that.  [enaqx/awesome-react: A collection of awesome things regarding React ecosystem](https://github.com/enaqx/awesome-react)
    
-   There are public repositories that bigger companies consistently manage - you can watch them and find an opportunity to contribute.
    
-   Programs like Gsoc are absolutely amazing. Apply and try to get in - discuss with students who already had that experience.
    

## Linkedin

-   Tons of people post their projects on LinkedIn. Make sure to like and comment on their posts and message them about their journey.
    
-   Post your project progress, ask for feedback, and connect with people who could work with you on it.
    
-   Identify people who are generally active on Linkedin and reach out to them, learn more about what they're doing, and seek their advice. It’s likely they’ll help you or guide you to the right resources.
    
-   [LinkedIn Learning](https://www.linkedin.com/learning/me)  also offers some great project related learning: add a new skill set and take it from there.
    

## Product Hunt

-   [Product Hunt – The best new products in tech.](https://www.producthunt.com/)
    
-   Product hunt has tons of professional products posted every day. Reach out to the founders and ask if they want to collaborate.
    
-   You'll probably need skills relevant to that product, so make sure to do research and read about the product beforehand.
    

## Simple projects

-   Learn a framework, make simple projects, and work your way to something bigger. Start with popular frontend frameworks like React, Angular, and Django, then move to whatever you like more.
    
-   There’s tons of documentation out there. Google search or go on YouTube to learn the basics and create something small today. Add quick features, iterate it over time, and eventually make it big enough for others to join.
    
-   Find problems around you and see if there is a simple solution.  [Top 10 Coding Projects for Beginners](https://bootcamp.ce.ucf.edu/blog/top-10-coding-projects-for-beginners/)
    
-   Find people once you have something mid-size. Ask for collaborations in a post on Linkedin, Reddit, Discord etc to find people.
    
-   Look for other simple projects on GitHub, Reddit, Discord and ask if you can contribute. Open source is the way to go. We will make a separate guide on this.
    

## Chrome extensions

-   Create Chrome extensions to solve simple problems. I tried making a timer, note taker, etc for my own use, and learned a lot of new things.
    
-   There are tons of new opportunities in this space. Start making small extensions and see how you can turn it into something big.
    
-   Get started:
    
-   [Build a Chrome Extension (Manifest V2) with React COMPLETE SOLUTION (2021 Web Development)](https://www.youtube.com/watch?v=nvm3c6ilcN8)
    
-   [I Built My First Google Chrome Extension!](https://www.youtube.com/watch?v=3Xq_QfYdmMQ&ab_channel=JamesQQuick)
    

## University

-   Find other students who are in your classes. Tons of students are working on side projects. Just ask!
    
-   Choose classes where you can make projects -> take the projects seriously and make them actually good. Continue to update them after the class is over.
    
-   Clubs, events, and other small gatherings at your university may offer opportunities to make projects or work on ideas. Collaborate, network, and build something cool.
    

## Upskill yourself

At the end of the day, people love working with skillful developers.

Find projects and people

Simple way to use linkedin to land your next big opportunity

Complete Linkedin guide


## Profile building

- [Cold emailing](https://twitter.com/ShaanVP/status/1357058739551932417)
- [Cold emails](https://twitter.com/Aazarshad/status/1555176748328701953)

## Blockchain
- [MEV bots](https://twitter.com/SalomonCrypto/status/1556448359300227072)
- [Layer 2](https://twitter.com/jake_pahor/status/1554669589908553729)
- [Voyager](https://twitter.com/SBF_FTX/status/1551364656085602305)
- [Eth stages](https://twitter.com/milesdeutscher/status/1550315295402668032)
- [Solana](https://twitter.com/Justin_Bons/status/1550514273964724225)

## Software
- [Developer advice](https://twitter.com/codewithvoid/status/1555931071363137538)

## Startups
- [$250k grant](https://twitter.com/benjlaufer/status/1552697476729212932)
- [Sequoia capital](https://twitter.com/thealexbanks/status/1551562525732327426)
- [Zero to one](https://twitter.com/jbonhotal/status/1548419396116238336)