Well I guess now is as good a time as any to make a start on this blog!

I have finally released my first publically accessible full stack dApp at ropstenmessageboard.netlify.app

I'm going to talk about how I got here, what stack I used and what the app does. Let's go.

Web development has always been the thing that has interested me, I just hadn't been particularly focused on pursuing it as a career. In high school I used to make websites with embedded games to bypass the LanSchool filtering software. XAMPP and server side PHP made me want to rip my hair out.

I've dabbled in lots of technologies (I even have a computer science degree!), but about a month ago a friend recommended blockchain development. I'd known a bit about blockchain stuff for a while as an early ETH adopter 🥳 and even building a small Javascript blockchain during my time at university, but life had distracted me from taking it any further.

So I took the advice and started looking at Solidity and the EVM (Ethereum Virtual Machine) and it all just made sense. A persistent decentralized web of storage that you could access from anywhere and data serving that only allows you to grab what you cryptographically have access to. This really felt like a new paradigm, I was hooked.

My first step was to learn about the Solidity language and a suitable IDE. So I turned to YouTube, shoutout Dapp University, WhiteBoard Crypto and EatTheBlocks, and I landed on an online IDE called Remix. This was great because you can learn coding flow, functions, visibility modifiers and have instant access to return values and variables on one webpage.

After playing around in Remix for a bit I found Cryptozombies.io. This contributed the most to my early understanding and I highly recommend going through the stages. After learning more about mappings, address payables and structs I was even more enthused to go forward with blockchain development.

That's when I knew it was time to find my own tech stack.

Full Stack is what I've always aspired to achieve, just Front End dev did not appeal to me as I do not have the patience to deal with implementing intricate designs, I like building and problem solving. I had done some personal projects in ReactJs and one commercial product in React Native, I was familiar with Mongo, but it was the 'Express' and 'NodeJs' elements of the MERN stack that just didn't provide any joy to me, maybe I dont fully understand their purpose and reasoning. Dynamically serving HTML and executing function calls on the server makes for a lighter client side app I guess.

But a Web3 stack fell together so well and made so much sense to me.

First I had to organize my development environment. How was I going to write, test, compile and deploy my Smart Contracts (.sol files) to the EVM. I found 2 tools, HardHat and Truffle. Through my research it does look like HardHat has some functionality that makes it very nice to develop with, including a console logger. I feel I will eventually move over to HardHat but as I still have things to learn I decided to go with Truffle, and not just because most of my questions already had Stack Overflow answers!

Great, so now I have my framework to write awesome Smart Contracts but where do I test them out without permanently deploying them onto an immutable blockchain.

The first thing I found was something called 'GEth', it seems to spin up a local blockchain on your device and allows you to control it using commands in the CLI. While probably what I'll soon need, it felt like overkill at the time so I kept looking. Fortunately Truffle had already taken care of what I need and released an application called 'Ganache', I downloaded the GUI as it is easy to use and the CLI provides no needed benefits to me at the moment.

Perfect, so now I can write, compile and "migrate" Smart Contracts using Truffle onto my locally deployed blockchain ran by Ganache. But what now? VSCode doesnt let me access my variables or functions like Remix did. Ganache doesnt give me anything but account transactions and contract transactions if I connect the truffle-config.js file. Now i need a way to view and interact with this smart contract that now lives on an immutable, albeit local, blockchain.

To interact with the contract I need a front end, I already knew ReactJs and I'm picking that over React Native as I believe in browsers more than mobile phones and Native applications. But now how do I connect my React front end to a deployed Smart Contract, there's no endpoint sat on an AWS server somewhere waiting for me. How do I talk to a blockchain?

Enter node packages Web3.js and Ethers.js. These allow your application to now do all things Web3 related whether its blockchain or ipfs stuff. You only need to pick one, so take the time to see which one is best suited to you. Looking at reviews Ethers.js allows you to get the same things done as Web3.js just with less lines of code. But again because of documentation I stuck to the older Web3.js package.

I learnt more about addresses, ABIs and creating contract instances on the front end. This was it! Or so I thought, I was writing and deploying contracts, connecting to them and executing transactions via my React front end, console logging function results and adding data onto the blockchain!

That's when I started building my Message Board app, using a mapping to store messages sent to a users address. The user could then access their messages by using their keys/metamask wallet. I had to weigh up using msg.sender on the contract or eth.defaultAccount on the front end. Msg.sender was not giving me the desired results so I ended up going with the default account method. It worked! Users could send messages to each other just using an Eth address and they could retrieve just by using their connected metamask wallet. But I wasn't sold, I was concerned that the front end could somehow spoof an address and gain access to other peoples messages.

All of a sudden, boom. In steps 'Moralis', a name I'd been seeing around YouTube but didn't take the time to investigate. It was exactly what I needed, a serverless backend with ipfs capabilities. Moralis makes users sign and authenticate with their wallets before allowing them access to an application and gives them a session cookie. I now feel that I have developed a more secure application.

Almost there! Now I have a decentralised application that works as perfectly well as desired on my local machine, but I need to get this out there and let the Web3 enabled public have access to this great app! Time for real deployment.

The first step was to get my Smart Contract onto a live blockchain. For this I picked the Ropsten testnet. Initially I was actually going to go with Rinkeby but I couldn't seem to get any coins from a faucet.

To deploy my live contract I had to tell Truffle to migrate to a real network and not just my local dev environment. For this I used 'Infura' it gives you an Ethereum node endpoint to connect to that gives you access to the live blockchains. There are others such as 'Alchemy' and I believe you can also use GEth for this. Once you have your blockchain endpoint and configured Truffle, you must process.env a funded wallet mnemonic to execute the transaction that puts the Contract on chain. Youll need to install a HDWallet package. Truffle uses this information to migrate your contract to a live chain. And there it is, your Smart Contract lives! It will now have a permanent address. Use this address in your front end when creating your contract instance.

Contract is live, now time to deploy the front end to allow users to interact with the contract. I used Netlify to deploy my React app to the web as from my experience it has been faster than Heroku. I connected my Netlify site to my Github repo and enabled Continuous Deployment which means that everytime I push to my 'master' branch it automatically rebuilds and updates my live site on the web.

And there you have it! A full stack deployed dApp, thanks for reading! Be sure to check your messages and our message boards at ropstenmessageboard.netlify.app. I have big plans for its development and how I want it to end up!

What do you think of my journey and what was your journey into Web3 like? What challenges did you face? Let me know in the comments. I'm looking forward to talking to you all!

The rest of my posts may or may not be as long but they should be more technical and concise as we have now covered the entry into and beginner steps needed for full stack development.

@aj_techh