Creation of ethscore.net in 16 days
Can Huzmeli
I intend to grow engineering leaders from within and create teams with high standards while establishing a culture of fairness, autonomy and mastery in an enjoyable workplace.
In this article, I will explain how you can create a product like ethscore.net in 16 days. This started as a hobby project that I've done on my days off from my day job as the senior director of engineering. My main purpose was to learn React and keep myself up to date with AWS hands-on experience. My role was purely leadership and managerial and I missed getting my hands on some coding and AWS.
ethscore.net is using the following technologies; React, MUI, AWS and Logistic Regression for ML scoring. 16 days sounds too good to be true. And it actually is too good to be true which I will explain at the end of these series of blog posts. This is the first of the 4 articles. The second one will be about the machine learning part of the project and the third one about the AWS architecture, and finally the last one to explain why this is really too good to be true.
Let's start from the beginning. First of all, I didn't know React but I decided to use React so that I can make a start to my React learning journey. As always, I started reading documentation then got bored quickly. The way I learn things is try, fail, try again... it is a painful method but I learn a lot faster this way. So, I looked for a library of React components to accelerate the development. If I can find something that will do the job, why code my own components? I decided to go ahead with MUI, only because I liked the designs. It took me only a few hours to create the static page for the homepage (and the only page actually). That's how the index.html looked like;
? <body>
? ? <noscript>You need to enable JavaScript to run this app.</noscript>
? ? <div id="root"></div>
? ? <footer style="width: 100%; text-align: center;">
? ? ? <p>What else would you like to see in Trust Web3</p>
? ? ? <p><a >User Feedback</a></p>
? ? </footer>
? </body>
And that's how the index.js looked like;
import React from 'react'
import ReactDOM from 'react-dom/client';
import Search from './Search';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
? <React.StrictMode>
? ? <Search />
? </React.StrictMode>
);
And this is the screenshot of the output;
While I was going to declare victory over React, I started reading about the Hooks and about how I can dynamically update my React components, connecting to JSON APIs all sorts... took me another 2 days only to understand how it works. I was almost giving up on React, thinking why on earth people like React, it is so overcomplicated. However, after succesfully implementing my first dynamic API call and updating my component, I don't know how it happenned but I fell in love with React. Now, I understand why everyone is a big fan of React. This is how my first dynamic page code snippet looked like;
export default function Search()
? ? const handleSubmit = (event) => {
? ? event.preventDefault()
? ? setLoading(true)
? ? setError(null)
? ? const form_data = new FormData(event.currentTarget);
? ? fetch('/test/getaccountdata?account_id='+form_data.get('account')+'&captcha='+token)
? ? .then(response => response.json())
? ? .then(data => {
? ? ? ? setLoading(false)?
? ? ? ? const statistics_div = ReactDOM.createRoot(document.getElementById("statistics_div"))
? ? ? ? statistics_div.render(
? ? ? ? <Statistics json_data={data} />
? ? ? )
}
The Lambda function I created in AWS included only a static JSON response regardless of the parameters. I wanted to use a mock API for now. It took me another 5 days only to get the Cloudfront - S3 Origin - API Gateway - Lambda connection setup. I am not talking about the code in Lambda but only the connection for a basic HTTP request-response. I will explain how it is done in my third article where I wrote about the AWS architecture.
领英推荐
8 days gone by this point.
In 2 days, I coded my python function that runs on AWS Lambda to fetch the information of the Ethereum wallet, do some calculations and send back the information to be displayed on ethscore.net
I spent a lot of time to understand how parameters are passed to AWS API Gateway and then to the AWS Lambda. To save you time, I copied the snippet from the AWS Lambda function that shows how to use the standard event variable passed to your function;
def lambda_handler(event,context)
captcha_code = event["queryStringParameters"]["captcha"]
wallet = event["queryStringParameters"]["account_id"]:
This simple function was only to show statistics for the wallet. It is not smart, yet. However, it helped me to get my biggest change out on the 10th day that looked like below;
After that, I wanted to follow one of the most important product management principle, listen to your users. I went out to the forums to ask for feedback and asked what they would like me to add. I was expecting requests around more statistics, more data, exporting data etc. However, the first request was to add dark mode, I must admit I didn't expect that.
Luckily, the React library I used, MUI, had it ready for me. It took me another 2 days to add this. Why did it take so long if it was ready in MUI? Because I had to do my first refactoring. The dark mode had to update all my components and the first component design I had made it very difficult and complicated to achieve that. So, I updated my index code as you saw above, connect everything to one main root. This enabled me to write the Dark/Light toggle button to message the root which then automatically descended to all child components of root.
12 days gone and I still don't have anything to do with Machine Learning! How did I add the smart scoring using Machine Learning in just 4 days? This is where Dataiku came to rescue. And this is my next blog post in the series to explain how I used Machine Learning to make ethscore.net smarter.