Techmaker Studio

In this Solidity tutorial, we'll walk through how to build a bank contract that lets users securely deposit and withdraw funds from the smart contract. This video is meant to be beginner friendly, so don't worry if you haven't worked in Solidity before. The only real prerequisites are having a decent understanding of Javascript and a basic understanding of what Ethereum is and how it works. If you're interested in Solidity development, here are a couple of other things that might also interest you: - Launching an NFT Project in Solidity: https://youtu.be/UpHlkkTt_F0 - Building an ERC20 token: https://www.youtube.com/playlist?list=PLjItgYqIzJ9XC8VJkaH34UjVqKpcgkBBT Interested in working with us? Check out https://www.techmaker.studio.

In this Solidity tutorial, we'll take a look at how to build a custom ERC721 NFT contract from scratch and deploy it to the Polygon Mainnet in about half an hour. There are tons of tutorials that show you how to create an NFT contract in Solidity. We'll do that too, but I wanted to take it a step further and show you how to go all the way to deploying to a real blockchain and being able to list NFTs for sale on OpenSea. 🤝 Helpful Links 🍻 JSON API: https://lit-sands-73084.herokuapp.com/nfts/1 Node.js API Series: https://www.youtube.com/playlist?list=PLjItgYqIzJ9XKvL_T7DlXTmInoUJ7jSR9 Mixing Images with Python: https://youtu.be/hvy9msjJdMs Building a Generative NFT Project Series: https://www.youtube.com/playlist?list=PLjItgYqIzJ9WlHgZGIkR-n52gH_kIMRB9

In this Solidity tutorial, we'll take a look at how to build a custom ERC721 NFT contract from scratch and deploy it to the Polygon Mainnet in about half an hour. There are tons of tutorials that show you how to create an NFT contract in Solidity. We'll do that too, but I wanted to take it a step further and show you how to go all the way to deploying to a real blockchain and being able to list NFTs for sale on OpenSea. 🤝 Helpful Links 🍻 JSON API: https://lit-sands-73084.herokuapp.com/nfts/1 Node.js API Series: https://www.youtube.com/playlist?list=PLjItgYqIzJ9XKvL_T7DlXTmInoUJ7jSR9 Mixing Images with Python: https://youtu.be/hvy9msjJdMs Building a Generative NFT Project Series: https://www.youtube.com/playlist?list=PLjItgYqIzJ9WlHgZGIkR-n52gH_kIMRB9

In this Node.js API tutorial for beginners, we'll walk through the basics of setting up a Node.js API using the Express library. In part 3, we integrate Mongo via Mongoose to actually wrap this up and build out the full CRUD API. What is a REST API? REST stands for representational state transfer. If that sounds too complicated, you're right 🤣 A very oversimplified explanation is that we need to have everything we need to process an API request included in the request. We see this in action when we use the ID to look up a specific Dog record during the video. Mongoose tutorial: https://youtu.be/Q1gewixDMYs

In this Node.js API tutorial for beginners, we'll walk through the basics of setting up a Node.js API using the Express library. In part 2, we get the project take a look at setting up Postman and how to get it to talk to Express.js using the body-parser library. In the next episode, we'll integrate Mongo via Mongoose to actually wrap this up and build out the full CRUD API. What is a REST API? REST stands for representational state transfer. If that sounds too complicated, you're right 🤣 A very oversimplified explanation is that we need to have everything we need to process an API request included in the request. We see this in action when we use the ID to look up a specific Dog record during the video. Mongoose tutorial: https://youtu.be/Q1gewixDMYs

In this Mongoose tutorial, we'll walk through everything you need to know about Mongoose to get up and running with creating and saving data into your MongoDB database. MongoDB is a popular NoSQL database which stores things in "documents" instead of tables. Working with mongo feels much more native to Javascript than a traditional database due to its JSON-like data storage. This is a great tutorial for beginners as it shows the core concepts in a concise way. Mongoose.js is is a javascript library built on top of MongoDB that makes data modeling much easier. It's a popular library to use in combination with Node and Express to develop web applications and JSON APIs. You can watch us build a JSON API with Node.js, Express.js, and MongoDB (with Mongoose JS) here: https://youtu.be/HPo0QhlX5Ao

In this Node.js API tutorial for beginners, we'll walk through the basics of setting up a Node.js API using the Express library. In part 1, we get the project set up, and we walk through the basics of how routing works in Express.js. We also get some queries set up so that we can have a functional "index" page and a "show" page. In the next episode, we'll integrate Mongo via Mongoose to actually wrap this up and build out the full CRUD API. What is a REST API? REST stands for representational state transfer. If that sounds too complicated, you're right 🤣 A very oversimplified explanation is that we need to have everything we need to process an API request included in the request. We see this in action when we use the ID to look up a specific Dog record during the video.

In this Tailwind tutorial, we will look at how you can use Tailwind CSS utility classes to handle background images, gradients, and overlays to create cool website banners. Yesterday we were working on our new website for Techmaker Studio (https://www.techmaker.studio). I wanted to have a background image at the top of the homepage with a gradient overlay, and I started to reach for some old tricks. Then, I realized that with Tailwind CSS, we can actually handle this old problem in a super easy way. And - we get some interesting side effects that we can use in our design. Tailwind CSS Overlay docs: https://tailwindcss.com/docs/background-blend-mode Tailwind makes it super easy to add background images OR use regular image tags as background images. Then it lets us add gradients as overlays using its awesome background blend mode feature. Tailwind is fairly beginner friendly, and we keep things pretty basic in this episode. In this 10 Minute Tutorial, we'll quickly walk you through everything you need to know to get up and running with Tailwind CSS when it comes to things like website banners.

In this Etherscan Tutorial, we'll take a look at how the Etherscan API makes it easy for us to query the transaction history for an address. This will help us build a more reliable system. OpenSea is annoying. Their site goes down all the time, everyone complains about their fees, and you have to fill out an application and wait for days for a response if you want an API key. I have several different apps where I need to know what NFTs a user owns. Up until recently I was using the OpenSea API because it was the easiest, fastest thing to do. Now, they've made it more complex, so I'm looking for a more reliable method. Instead, we'll make use of Etherscan and their free, open API to query a user's transactions in Javascript, and then we'll parse those transactions to see which NFTs they still own.

Do you want to find altcoins to invest in before they blow up? Here's the truth: there is no get rich quick scheme here. But... if you do your due diligence, early stage crypto investing can offer opportunities for growth that most larger projects cannot. That being said, it's also very high risk. Nothing here is financial advice. I'm just showing you how I typically start the process of finding projects to research.

In this Ethereum tutorial, we'll look at how you check how much gas on Ethereum your smart contract functions are using, and we'll discuss how to estimate how much ETH (or MATIC, AVAX, etc) that your users will have to pay to run the transaction. This is useful for example to know how much it will cost your users to mint an NFT. Once you know the gas used, you can get the actual cost by multiplying by the gas price, which is typically presented in GWEI. This is a great tutorial for beginners to get their heads around the basics of how gas works on Ethereum.

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 18, we refactor how we are querying the data from the Aleph network. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 17, we set up React Router DOM in our app so that we can navigate pages. We also hook up a new Aleph query to load a single post by hash. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 16, we start making the switch to our own custom data model, and we walk through what's coming up next in the project. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 15, we add a validation to our post form so that user's can't post to the network (via our app) with blank content, and we make a few more design updates. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 14, we make a few more small UX updates like adding a nice loading animation when a user submits a post. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 13, wrap up our design updates. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 12, we'll build out the design that we came up with in part 11. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 11, I show you how to create nice user interfaces with much less time and effort. In the next episode, we'll build out the ideas that we work through here. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 10, we take a quick look at how to filter unwanted posts from the feed. It's a very simple approach, but we can expand and build on it later. Web3 Article: https://www.techmaker.studio/articles/a-short-adventure-into-the-new-world-of-web3 React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 9, we wrap up the UX mechanism for posting to the network. In the next part, we'll update the design a bit and then move on to data modeling. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 8, we start working on the user experience (UX) for creating a post. Web3 UX can be a bit trickier than in a typical app, and you'll see why here. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 7, we wrap up the websocket connection to the Aleph network and *finally* get to see our posts appear in real time in the feed. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 6, we start hooking up Aleph websockets so that we can get real-time updates from the network. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk

In this series, we're building a decentralized Twitter clone from scratch with React.js and Aleph.im. In part 5, we finally finish up adding the ability to post data to the network. React is a powerful front end framework that makes it more intuitive to build reactive, user-centric applications. Aleph.im is a cutting-edge web3 platform that has a combination of features we'll be using such as their decentralized database. Helpful Links: - Web 3 Starter Kit: https://github.com/techmakerstudio/web3-starter-kit - Aleph.im Javascript docs: https://aleph-im.gitbook.io/aleph-js/ - Aleph.im Developer Telegram: https://t.me/joinchat/K-tPZk-5FzRlOThk