DEV Community: Rahat Chowdhury

Resolving ENS Usernames in React

Rahat Chowdhury — Tue, 21 Dec 2021 15:38:20 +0000

An awesome part of using a dApp is the fact that you can connect your wallet and and be logged in or signed up for the application right away. The problem that this may bring is that wallets are this large string of alphanumeric characters and don't make the best usernames. See example below:

0xd2f8ed343386FB042178c7e133A837CB8043d0dc

Ew right? This isn't the greatest way of displaying a username. You could do something like create a form and ask for a preferred username or we could leverage the decentralized web and look at using existing ENS usernames in our applications.

Let's take a look at how we can do this using React and the Ethers library.

I started off by scaffolding out a react application using:

npx create-react-app

Then I installed a dependency I need using yarn. (You can use npm instead if you prefer).

yarn add ethers

Afterwards I went into App.js and got rid of everything inside the div and then imported the ethers library and useState from React to keep track of the username of the signed in person. If you want to code along with this blog then here is what my App.js looked like:

import './App.css';
import { useState } from 'react';
import { ethers } from 'ethers';

function App() {
  const [name, setName] = useState("");
  return (
    <div className="App">
      <h1>{name}</h1>
    </div>
  );
}

export default App;

Not too much going on just yet. Let's add a button inside of our app div and give it a function that can execute on click.

<div className="App">
      <button className ="button" onClick={() => handleWalletConnect()}>connect</button>
      <h1>{name}</h1>
    </div>

So this handleWalletConnect function is going to accomplish a couple of things. We want to make sure we get access to the users wallet as well as their ens username if they have one. Here is the function which I'll break down line by line:

const [name, setName] = useState("");
  const handleWalletConnect = async () => {
    const { ethereum } = window;
    if(ethereum) {
      const provider = new ethers.providers.Web3Provider(ethereum)
      await provider.send("eth_requestAccounts", []);
      const signer = provider.getSigner()
      const address = await signer.getAddress()
      const ens = await provider.lookupAddress(address);
      if (ens !== null) {
        setName(ens)
      } else {
        setName(address)
      }
    } else {
      alert('no wallet detected!')
    }
  }

The first thing we're doing is destructuring the Ethereum object from the Window:

const { ethereum } = window

This is something that is injected into the window from a wallet like Metamask. As long as it exists we will continue on with the rest of our code, otherwise we want to alert the user that we aren't detecting any wallets in their browser.

Next up is creating a provider that will give us access to a lot of methods that makes our life easier.

const provider = new ethers.providers.Web3Provider(ethereum)

A provider is a nice little abstraction of the connection to the Ethereum network. We're leveraging the work that the nice folks at Ethers have already done for us instead of reinventing the wheel.

The first thing we want to do with our provider is ask for permission to connect to the users wallet which is taken care of with this line:

await provider.send("eth_requestAccounts", [])

This sends a request over to the wallet asking the user to allow connection with our dApp.

Next we want to get information about the user. We do this by creating a signer object:

const signer = provider.getSigner()

This gives us access to more methods like this handy one for getting the signer's address:

const address = await signer.getAddress()

Now in theory we have everything we need to start building out our dApp. We have the address but we want to make things a little more human readable. Our provider has a nice little method of doing a reverse lookup to see if the Ethereum address is linked to an ENS username and that's done in the line below:

const ens = await provider.lookupAddress(address)

This will return the ens username if it exists otherwise we will get back null. Now we can either set the name to be the username or just fall back to the address if they do not have an ens username.

Now that we can access our user's decentralized identity we can allow for a greater user experience instead of forcing our users to fill out yet another form on profile details for a new service.

The final code for this can all be found on this repository:

https://github.com/Rahat-ch/reactensusernames

You can also watch a quick video of this tutorial below:

Momentum and Burnout

Rahat Chowdhury — Mon, 29 Nov 2021 15:54:00 +0000

There is a huge difference between dedication and unhealthy work habits. If you're someone new to the dev space then I'm sure you'll be seeing a lot of folks who tell you - you need to be coding every day, you need to be dedicating 40+ hours on top of whatever else you might be doing and only then will you be successful. I see the same thing among indie hackers/founders and really anyone getting "onboarded" to anything by Twitter and LinkedIn thought leaders.

I've been thinking through the nonsense I'll always see from some people about giving up time with family or giving up time with really anything that might spark joy for you. Sometimes we feel like we don't have the time to sit back and enjoy those things because we have some goal in our heads to become a dev, or get a new job, or launch our fifth failed startup. I should probably stop referring to all my projects as failed startups haha.

It can get hard to remember that your mental health matters. I've been in that laser focus period where I've forgotten to eat, to take a break, get some fresh air or do really anything that didn't require me to look at a screen and make clicky noises with my keyboard.

Around the summer of 2019 I was working on a few different things in addition to my regular job. I wanted to move up and become a senior dev as soon as possible and get a higher paying job because lets be honest no one really gets in for the junior tech salaries and most companies won't care enough to try and keep us by paying us what we're worth all the time.

Money is plenty of motivation. I've got loans, mortgage, and a family to take care of so maximizing my salary was always going to be the top priority to make sure all of that is taken care of. I was working my 9-5 and then taking no break and immediately switching into working on what I think was failed startup number 2. We had some momentum going with the team and I didn't want to lose it. I kept telling myself I had to keep going we need to pick up the pace and get stuff shipped. All the unhealthy habits that were coming up could just be fixed later.

I didn't have time to spend one evening watching some Netflix, or an afternoon playing some video games. I didn't have time to properly sit and eat, I just had to scarf down whatever it was and get back to work. I needed to just keep moving things along and getting things to a point where it could all be shipped.

I didn't have time to lose my momentum.

The problem here was I wasn't thinking about momentum in the long run, only what I saw in there "here and now". I eventually crashed and for almost a whole year after that I was completely burnt out. I couldn't get things shipped properly and all the work I had done started falling apart because I started resenting it. I started hating the fact that it sucked so much out of me. I couldn't stand what I was doing anymore and the motivation to keep going was absolutely lost.

Now my momentum was gone.

I was stuck and I couldn't do anything for my side projects and my performance at my regular job was suffering too because of it. I worked so hard not to lose my momentum and yet it was that constant hard work that seemed to be the cause of why it was all gone.

I'm not going to give you a framework for getting out of burnout, I'm not really qualified to do so. It took me a lot of time and ultimately it was therapy, relaxing, spending more time with family and doing things that sparked joy that helped me get through it. It works differently for everyone.

One thing I do know however, is that the steps to mitigate the burnout can be somewhat universal. The biggest thing really is taking a break and understanding that a break does not destroy your momentum. In the long run a break doesn't slow you down, it actually makes you faster.

If I had just taken some time to step away and did something other than clicky clacky noises and screen time I might have been able to turn those clicks and clacks into something awesome. We're often guilting ourselves or allowing thought leadership to guilt us into thinking that we need to keep working at all times to get anywhere and we can't stop.

This is one of the unhealthiest parts of the tech industry. It's something we need to make sure anyone who is coming into the space is aware of. We need more acceptance of just taking a damn break. Acknowledging that consistent small steps are always better than large ones all the time that may not work out. Small steps can show you that maybe you aren't heading the right way and the thing you're trying isn't going to spark the joy you think it will. Small steps will help you discover other things that may end up being better for you in the long run.

To my past self: it's ok to catch up on you favorite k drama for one night. It's ok to play some video games. Don't forget the people you're doing all of this for, none of it matters if you can't spend time just enjoying being with the people you love.

Wandering thoughts

Rahat Chowdhury — Tue, 23 Nov 2021 20:32:08 +0000

Lots of developers joke about this quite a bit: buying a new domain name when you have a bunch of other projects that are there just unfinished. I know for a fact that I have more domains across a couple of my accounts than I would ever dare admit. My wife is somewhat aware that I have a lot but I don't think she even knows the full extent of it haha.

I had a moment where I was trying to think through, why? Why is it so tough to stick to something and pull it all the way through to completion. Theres only a handful of my projects that I have actually gotten to the finish line, those are ones I'm very proud of and have been great achievements in my career so far.

It's been pretty hard to stay excited about one thing for well most of my life. I was recently diagnosed with ADHD and that explains a lot of it but I always felt like there was something more. I wanted to dig into what really makes a project mean so much to me that I will pick it up no matter what state it is in and try to get it finished.

There are a few obvious ones I came up with right away. Is it a project for work? Am I getting paid for it? I'll get it done because I got bills. The need to survive and have a roof over my head will usually win out over anything else. Even if I'm miserable while doing whatever it is I am tasked with doing.

The majority of my side projects however give me no additional income. Usually I'm spending money in order to do the thing. It might be for a domain or some design work that ends up living on my computer and not being utilized for anything. For some of them I tried building thinks out in public. I have this one side project that I was making some pretty good progress on, it's called harken, and it's a voice notes application for speakers. Helps you stay on point for your presentation by detecting what points you've already spoken about. It actually works decently well and as of writing this post all I really have to do is add in a few details and give it some small bit of styling and it would be all set.

Yet I can't do it. I find myself thinking, "yea I'll finish and release that one day." Then the domain comes along and gets auto renewed and I have a whole other year to procrastinate on it. I'll probably give it a shot if I get a couple more talks accepted, at that point it would be really useful for me. So when it comes down to it I guess it really needs to be doing something for me and spark some bit of joy.

I realized even when I'm teaching or mentoring, a lot of the time I'm not doing it for the student. I'm doing it because it helps me in solidifying knowledge and getting better at my craft. The help the student gets is almost just a side effect. Is that messed up? Is it wrong to think of it that way? I mean the person is still getting some help right? I'll usually get a thank you or something along those lines and that will usually add some serotonin into my day.

Thinking through this the only conclusion I can really come to from this is that, whatever I'm doing just needs to spark joy. If it doesn't then its ok to set it aside and let it go either permanently or temporarily. That's got to be ok, especially if it is messing with our mental health. It's got to be ok to have a few projects lying around that we didn't finish because we aren't interested in them anymore. It's got to be ok not to finish every single thing we start. At the end of the day even attempting it, even just going through part of the journey has some merits.

Through my unfinished projects I learned how to build GraphQL API's, the basics of building mobile applications, a little bit on using JavaScript for natural language processing, I've gotten better at accessibility with my react code and so much more stuff in the web3 rabbit hole that I've been jumping into lately. Do I have finished robust projects to show for all of that? No I do have some stuff and the rest of it I can talk about. The rest of it I can apply to similar things that come up on the job.

Some of the next steps I am thinking of taking is looking at these things and instead of releasing large projects just doing a small thing like a blog post to showcase my knowledge is probably fine. In the future if I'm looking for a new position these posts might come in handy for proof that I know the specific technologies and buzz words that exist on my resume.

Projects are great, I promote doing them all the time to better learn about programming. It's one of the best ways to really get to learn something. It's not worth your mental health however if after doing some of the project it no longer sparks joy. Just let it go and learn from what you already accomplished. That has to be ok.

Dealing with Shiny Object Syndrome as a Dev

Rahat Chowdhury — Sat, 06 Nov 2021 00:08:17 +0000

Learning to code can be tough, deciding what to learn while learning to code is tougher. I remember after finishing my bootcamp there were several things I tried to do. I tried learning Python, Java, Go, Rust, AWS, and every new tech that people were talking about on Twitter. I guess I was trying to become that magic unicorn developer that some of these job postings want.

This had a very adverse affect on my interviews. I had things on my resume that were nice flashy keywords but when asked about them I couldn't explain much more than the regurgitated tag line I read at the start of the docs. I couldn't explain what they do, how they work, or why I could choose to use the technologies. I mean I couldn't really say that people were talking about it on Twitter so I used it could I?

The problem here was that I was learning way too many things at the same time and not actually learning a thing. My mind wanders, I get distracted by cool things and sometimes I can't help it. I might be hyper focused on one thing sometimes and then all of a sudden lose interest and focus on something else entirely.

During on specific interview I was told to bring in a project that I worked on and present it and talk about the tech that I had used to build it. Looking at their tech stack I decided to bring a project that I was working on based on a tutorial all about Postgres, GraphQL, and React. I had a decent understanding of React at this point and not a great understanding of either Postgres or GraphQL.

I couldn't answer any questions about the underlying tech. Couldn't explain how to build new queries for more data in Postgres. I mean I just followed what the tutorial told me to do on this cool tech I found out everyone is learning.

I was focused too much on the flashy cool things and not enough on the fundamentals behind why these things are working or why these solutions exist.

Technology is constantly changing and there is always going to be something new to learn. At the beginning however it is always better to focus on the boring stuff, the fundamentals, the things that aren't that exciting. Those skills are what is going to help get you into your first role so you can then, if you decide to or need it for work, learn some cooler tech.

After that disaster of an interview I took a couple weeks to review the fundamentals of JS/React and really just focused on the fundamentals. I tried recreating tutorial projects by myself, doing focused small projects instead of larger ones that might not get done and that eventually led me to my first job as a dev.

Now I find myself diving into and learning about web3 in an effort to switch careers into this space. The entire web3 ecosystem is shiny and new and I find myself at times slipping into old habits of wanting to learn something new every other day. Or really every other hour if we're being honest since this space just moves that rapidly sometimes. I remembered everything from the start of my journey a couple weeks ago and I became determined just to refocus on one aspect of the web3 world. I am already a frontend developer, so I decided to focus on looking at how I can use my frontend skills to interact with blockchain technology while learning the fundamentals of it and teaching it to others.

It's been almost a year since I started actively trying to look into this tech and I keep going back to the fundamentals like I did before. Learning about Solidity basics over and over and teaching them to others is what is really helping me, and as of writing this I'm waiting to see if maybe I might be landing a full time role in the web3 space.

Those shiny objects are everywhere, even among the shiny objects you are trying to focus on there are glints of brighter shininess that might distract you from the bigger picture. The best results usually come from having a general understanding of the shininess but focusing on the less exciting aspects that help you keep everything else exciting.

There was definitely a pun or metaphor there that I failed to get at but hopefully the point still came across!

What is a DAO?

Rahat Chowdhury — Fri, 10 Sep 2021 01:52:04 +0000

Cryptocurrency, NFT, and gm seem to have become common knowledge among most folks interested in Web3 at the moment. There is a lot of growing chatter now about Decentralized Autonomous Organizations or DAO for short.

Let's imagine for a second that you, your neighbor, random people across town or across the country you have never met all had the ability to actually make decisions about what a specific organization can do. Maybe you all have an interest in video games and want to decide on what new video game gets the funding to be completed. Maybe you're all investors and want to decide who the next big web3 startup to invest in will be.

The point is you all have some similar interests and without needed to know each other can work together in determining what creators in the space you're interested should be funded or what proposals the organization has brought needs to be focused on. You all even help decide who works for the organization!

This isn't some fantasy - this is actually happening with DAO's. The more I've learned about web3 the more it seems that DAO's keep coming up. I've recently joined Nader Dabit's Developer DAO and became a mod there to help with the community. The great thing about this is that I'm seeing how this works and is being built from the ground up and hoping to learn a few things here.

The main problem I've had in general with DAO's is trying to figure out where to find them and how to participate in them. Developer DAO made that super easy and everyone in there is quite interested in working together on all things web3. I think I'll be pitching a couple ideas in there to see how my ideas land.

For now though I'm looking for more DAO's to be a part of. Do you know of any that are actively looking for new members that can contribute to their growth? Particularly those needed frontend/solidity devs?

Hit me up and let's see what the community has!

Effective Learning with Tutorials - Web3 Version

Rahat Chowdhury — Wed, 08 Sep 2021 03:10:16 +0000

Earlier this year I wrote about effective learning with tutorials. You can view that here:

https://community.codenewbie.org/rahat/effective-learning-with-tutorials-2ji8

Now I wanted to map out a way to use tutorials and other resources to help folks interested in learning about Web3 and the Crypto space. A lot of this is what I've been doing and different resources I've been using so far will be mentioned below!

First off it's important to learn the fundamentals of Solidity. If you're coming from JavaScript this is going to be a little easier as Solidity shares a lot of similarities in syntax with JavaScript. I felt at home pretty quickly thanks to the similar syntax! My favorite resource for going over the fundamentals is Crypto Zombies!

https://cryptozombies.io/

This is a fun and interactive way to learn Solidity by building a Zombie production factory. You're given examples of what you need to accomplish and then you use the in browser IDE to solve specific challenges which may include writing contracts, functions, interacting with other existing contracts and more.

A great way to solidify your Solidity (heh) is to reuse that code and build something else. You can do something as simple as changing the variables to represent giant killer robots instead of zombies. This will still force you to go through the code and understand which variables and what parts of the code do certain things and help dive deeper into it. If you're into video based learning I've started doing some bite sized solidity fundamentals on this new free course I'm slowly building and releasing:

https://www.30secondsolidity.com/

Once you've learned a little about Solidity I highly recommend checking out the smart contract course at Buildspace!

https://buildspace.so/

I took the free course which is a mix of live sessions and text based learning and was able to get my first Dapp deployed on a testnet!

Check out more of what I learned from there on this post:

https://dev.to/rahat/real-time-react-fun-on-the-blockchain-27jg

Similar to what I mentioned with crypto zombies I changed up the project to be something I enjoy. Instead of the project being built in the course I took what I learned and built a pokemon battle simulation. This again forced me to really go through the code and understand what was going on.

I then branched off and dived into Real time interactions with React and the Blockchain which was not part of the class. It's awesome to take what you learn somewhere and add new things to it like the real time functionality in this case. Build on top of your tutorials and add new features to them to really explore new things!

There are more intermediate resources once you have gotten these things down that I'm currently using and will be sharing more of in a follow up post. Would love to see what you all are working on with Solidity! Hit me up on twitter and let me know! @rahatcodes

Real Time React Fun on the Blockchain

Rahat Chowdhury — Fri, 27 Aug 2021 21:48:16 +0000

Events are great, listening for events and doing something is one of the core uses of JavaScript on the frontend. It's what allows us to see some amazing interactions happen in our web applications.

It's fun to listen for clicks and whenever we press a key but it's even more fun when we can listen for events that happen somewhere else completely. This allows us to create real time applications and if you're building on the blockchain it can be done with just a few lines of code!

The code we're going to be discussing below was built while I was taking a course all about building Smart Contracts at BuildSpace. If you're interested in really diving into the things I'm going to discuss I highly recommend checking out their courses which are all cohort based and free!

The Project I built here was a little concept Pokemon Battle Simulator where anyone can jump in and have a Pokemon perform an action in battle against another. Almost like a crowd sourced Pokemon battle on the blockchain. A quick demo of it can be found on this tweet.

Let's start by taking a look at some Solidity code. Solidity is a language you can use to build Smart Contracts which is code that helps you interact with the Ethereum Blockchain. Here's some code from a smart contract I've written below:

event NewAction(
        address indexed from,
        uint256 timestamp,
        string message,
        uint256 lugiahp,
        uint256 zardhp
    );

    struct Action {
        address trainer;
        string message;
        uint256 timestamp;
        uint256 lugiahp;
        uint256 zardhp;
    }

    Action[] actions;

This isn't the full smart contract but we're just going to be focused on the parts that enable us to have real time interactions with the block chain. Now remember how I was talking about events at the start of this post? With Solidity you can actually create events to listen for. In this case I am listening for an event that I have named NewAction. That is going to be whenever and Action struct is added to the actions Array.

If you're coming from JavaScript you can think of this as an actions object being added to an array of actions. Now let's take a look at a function from my smart contract:

 function attack(string memory _message) public {
        totalDamage += charizardAttack;
        totalHp -= charizardAttack;
        charizardDamage += lugiaAttack;
        charizardHp -= lugiaAttack;
        console.log("%s has attacked the shadow Lugia!", msg.sender);
        console.log("%s was attacked back by shadow Lugia!", msg.sender);
        actions.push(
            Action(msg.sender, _message, block.timestamp, totalHp, charizardHp)
        );
        emit NewAction(
            msg.sender,
            block.timestamp,
            _message,
            totalHp,
            charizardHp
        );
    }

This function is taking care of an attack sequence between Charizard and Lugia with both dealing some damage to each other. At the end of the function you will notice I have this

emit NewAction(
            msg.sender,
            block.timestamp,
            _message,
            totalHp,
            charizardHp
        );

Remember I created the NewAction event earlier? Calling emit is what allows me to say ok this event is now taking place and a new action struct is being created with the information passed in and added to the array of actions.

That's all we need on the Solidity side of things to make sure an event is there to be listened for but how do we actually listen for this on the front end?

During the time I spent building this, our awesome instructor Farza introduced us to using ethers js with React to interact with the blockchain. One of the awesome things about this course that I really enjoyed is that there are some bonus concepts like events that he introduces and lets us explore for ourselves.

So while searching google and hunting through some documentation I was able to discover the code needed to listen for this event on the frontend. Check out this useEffect hook below from one of my components:


  const listener = (block) => {
    console.log("new action emited")
    console.log(block)
    getAllActions()
  }

  React.useEffect(() => {
    lugiaBattleContract.on("NewAction", listener)
    return () => {
    lugiaBattleContract.off("NewAction", listener)
    }
  },[])

A little context: the getAllActions function is getting the data from the actions Array in my smart contract, sanitizing it a bit, then updating some state with that data. In my useEffect hook I am using some functionality given to us by ethers js in order to listen for an event named "NewAction" which if you recall I defined in my smart contract. Now anytime anyone performs an attack - everyone else will also know because the action will be updated for everyone in real time!

A quick note: always make sure that if you're using some type of listener function in React - put it in a useEffect and return a function for cleaning it up. Otherwise you'll end up like me trying to debug why your component is re-rendering several hundred times when the event only happens once.

Here is a quick demo below of this in action:

It's a large gif 😬 so once it loads you'll see that Charizard is attacking in one browser but the actions logs update in both browsers!

I've done some real time stuff before and this is just amazing to see that I can do this so easily on the Ethereum blockchain!

If you would like to play with the demo yourself you can do so here.

You will need to have the metamask chrome extension set up and you'll need some test ETH on the Rinkeby Test Network.

I've been on a journey to learn web3 for a while now in hopes of getting into the space eventually as a developer advocate. If you want to join me on this journey give me a follow on Twitter!

Scaling Ethereum - ZK Rollup

Rahat Chowdhury — Thu, 26 Aug 2021 17:13:20 +0000

I’ve thoroughly enjoyed learning about web3 but one thing that has caught me off guard a little about it is the cost associated with deploying something on the Ethereum main network. Scaling Ethereum at first glance seemed almost impossible! High gas prices start being an issue when the network is getting busier since many are hoping to outbid others when sending transactions.

Some awesome tools like Polygon which is a framework for creating blockchain solutions that is compatible with Ethereum have brought in some great fast, low cost transactions into the space making it easier to scale. This type of solution is called a sidechain. These solutions are awesome but let’s take a look at other new ways for scaling data on Ethereum.

There is an Ethereum 2.0, also known as Serenity which is being worked on which is meant to be more scalable, sustainable, and secure. This upgrade cuts down on the large amounts of computing power and energy needed. Estimates show that Ethereum will use 99% less power on Serenity. This is amazing, it will cost less, be quicker, more secure and scalable but the thing is, the work to get this up and running won’t be done until later in 2022. In the meantime however, according to Ethereum cofounder Vitalik Buterin ETH2 scaling for data will be available much sooner.

This scaling comes in the form of what are called ZK-rollup or Optimistic Rollup. Let’s dive into ZK-Rollups for this post.

The Ethereum Mainnet as we know it can also be referred to as Layer 1 while these Rollups are part of Layer 2 solutions. Layer 2 is there to help handle transactions off of the Ethereum main net and solutions like Rollups and Sidechains like Polygon help with this.

Why is this needed? I saw a perfectly good reason why when building out this little application while I was learning about interacting with smart contracts with React. In the video things are sped up but there is a lot of time between me performing an action and seeing that action actually take place due to the mining necessary for the transaction to complete.

Imagine playing a game and every action you take that affects data on the blockchain needs to be mined. It wouldn’t really be a fun game would it? On top of that it can just get very expensive to take these different actions.

Rollups like I mentioned before execute transactions outside of layer 1 but they post their actual data onto layer 1. This way Rollups are still secured by the Ethereum chain and inherits all of its security properties.

The ZK rollup is a smart contract that maintains the state of all transfers on layer 2. This is done by following a security model known as Validity proof. In order to increase speed the transactions are rolled up into batches and submitted to Ethereum in a single transaction. The computation is done off-chain and the results are supplied to the main chain with a proof of their validity. This maintains security while letting more transactions happen in a shorter amount of time.
Interested in testing some of this out? Here are some implementations of ZK-Rollups that you can build with:

zkSync
Aztek
Loopring

I’m going to start exploring some of these and would love to know if you are as well! Comment below or send me a message on Twitter!

Learning Web3 in Public

Rahat Chowdhury — Fri, 20 Aug 2021 11:54:54 +0000

Over the past couple of months I've been reading into Blockchain and Ethereum development. It's been interesting to learn about at first but the more I learned the more excited I got about the technology. Aside from the incredible lucrative salaries out there this technology is in its infancy and we're at a point where we can really see something new and powerful build up from the ground up.

I decided to create a podcast I've named Side Chain, to document my learnings and hopefully inspire others to learn with me. In the first episode I talk about what a blockchain is and some resources I have been using to learn. Check out the episode and resources on the link below! As of writing this post the podcast is up on Anchor and Spotify with more platforms being rolled out as well.

https://anchor.fm/sidechain

Are you learning about things in the Web3 space as well? Would love to know what resources you are using to learn!

The Sylar Project DO Hackathon Submission

Rahat Chowdhury — Tue, 05 Jan 2021 15:27:08 +0000

What I built

The Sylar Project is a curated list of mental health resources organized by location. The goal is to make it as easy as possible for people to find local mental health resources.

Category Submission:

Program for the People

App Link

https://www.sylarproject.com/

Screenshots

Description

The Sylar Project in its current form is a curated list of mental health resources in the United States organized by state. Visitors to the site can choose a state from the drop-down menu and view the mental health resources available to them. Additionally, they may also add new resources they feel would fit into the Sylar Project Database.

Link to Source Code

https://github.com/Rahat-ch/The_Sylar_Project

Permissive License

MIT

Background

During the course of the time, I spent doing mental health talks at conferences as well as on my mental health startup I kept wondering why there isn't a geo-location-based API for mental health resources. I've tried to find something like this but nothing that currently exists does what I want it to do. The goal of this is to eventually have an API exposed where people can bring in mental health resources on their sites or blog posts pertaining to mental health so that their audience can quickly get to those resources as needed. Before getting there, however, this is the first step, getting a list up on The Sylar Project so people can find local resources.

It is very difficult to make the decision to get help when you might need it. There is no reason to let it remain difficult to find resources once you make that decision.

How I built it

The technology used in this project is as follows:

Digital Oceans App Platform
Next JS
Tailwind CSS/Tailwind UI
Airtable
Zapier

Digital Oceans App Platform allowed me a no hassle and no configuration needed way of deploying my site. This is the most seamless deployment of a NextJS application I have seen. I really enjoyed combining the low/no-code solutions with code solutions to build this.

DO App Platform is essentially no code for deployment. Airtable for low code database. Zapier for a no-code email notification so I can take a look at what resources someone has tried to add to the database.

I loved the fact that I was also able to learn github actions while doing this as well to make sure that all tests and builds are passing before any code is merged!

The rest of it is code but I learned this is a great example of combining code and no-code solutions to create a serverless full-stack application. My backend on the NextJS API routes are serverless functions and they also just work on Digital Ocean once Next JS is deployed.

Additional Resources/Info

I have fully open-sourced this project and there are a number of contributors already helping to make this even better beyond the current MVP. I welcome anyone who would like to contribute and make The Sylar Project as good as it can be.

Roadmap Items:
Twitter Bot to Tweet newly approved Resources in each state
Expand to other countries - home page will be replaced with a country selection
Expose an API for other developers to build on top of this platform.

The Sylar Project V 1.0.0

Rahat Chowdhury — Sat, 02 Jan 2021 22:59:26 +0000

The unpolished MVP for The Sylar Project is now complete! Since we do have until the 10th for the hackathon I'm going to do a bit more polishing on the UI before making the final post for submission but it may well be the next post I make on this. Super excited to already have this up and working. I'm currently looking at domains since this is absolutely at a point where it deserves one. For the first time, I did not buy a domain for a side project before finishing it. 😅

So what's new on this one? It got a nice styling upgrade, I love tailwind UI which let me quickly (minutes the time spent figuring out what I liked) create the UI for this. I've enjoyed using Tailwind quite a bit for this and not worrying about writing CSS from scratch.

I now have two serverless functions running - one for getting all the resources and one for accepting new resources that will be sent to my Airtable backend. Once I approve it it will appear in the database. Due to the nature of these resources, I find myself not putting too much faith in trolls not being trolls.

I've been diving deep into React Context, I'm pretty sure there are improvements that can be made into the way I implemented it and I'm hoping to explore that a bit post MVP. I like the different hooks I don't use as much that I've been able to use here, like the useReducer for the form as well as useRef for the outside clicks on the dropdown.

Check out the current implementation of the site below! This is open source feel free to take a look at some open issues or fork this to create a version for your country or local community. You can do so easily with the deploy to Digital Ocean button in the readme!

https://github.com/Rahat-ch/The_Sylar_Project
https://the-sylar-project-6avzk.ondigitalocean.app/

The Sylar Project V 0.0.5

Rahat Chowdhury — Sat, 26 Dec 2020 15:33:36 +0000

New update! I've successfully used Next JS API routes to create a serverless function that handles getting state resources from an Airtable Database instead of serving some local JSON. I left the option to use the local JSON however in case others wish to contribute to other parts of the app and don't need access to Airtable. It was also super nice to see tests pass and build not fail from the GitHub actions checks which are also officially added and updated. An awesome new thing I learned while working on this.

Here is my next major goal: Allow for user-submitted resources. Setting up Airtable was a part of this but here is what I plan to do in the next couple versions of this leading up to my v1 for submission to the hackathon:

Make an API route for creating resources - by default they will be in an unapproved state
Use Tailwind UI to make things look nicer and build a pleasant-looking form
Integrate Zapier so I can get an email notification whenever someone submits on the form and my Airtable database gets updated
Create a workflow for myself that lets me quickly look at the email notifications with the resource and approve them if they are appropriate.

Something I've noticed so far with this that I wish I had done with earlier projects: even unfinished it is useable. The first update I put out only had resources for two states and was a very small and simple UI. It still worked and helped people in those states. Now it holds much more and I've already gotten feedback that someone was able to use it to find a resource in their local state. This alone makes this entire project worth it.

To see current progress check it out below! Hoping to have a domain name as well once I do submit.

https://github.com/Rahat-ch/The_Sylar_Project

https://the-sylar-project-6avzk.ondigitalocean.app/