DEV Community: NicolasBiondini

My Journey at the Polkadot Blockchain Academy's UC Berkeley edition

NicolasBiondini — Mon, 11 Sep 2023 23:18:44 +0000

In the dynamic realm of blockchain and Web3 technologies, education is the cornerstone of progress. One transformative experience that stands out for me is the Polkadot Blockchain Academy, hosted at UC Berkeley. Having recently graduated from its 3rd edition, I'm eager to share my thoughts on this invaluable program.

The Polkadot Blockchain Academy is an intensive educational program designed to equip participants with comprehensive knowledge and skills in the field of blockchain technology and Web3 ecosystems. Led by prominent figures in the Polkadot/Kusama community, the academy covers a wide range of topics including cryptography, economics, blockchain architecture, smart contracts, and more. Graduates of this program emerge with the tools and understanding needed to actively contribute to the thriving Web3 ecosystem. The academy's immersive curriculum and access to industry experts make it a pivotal opportunity for anyone seeking to dive deep into the world of blockchain technology.

In this blog post, I'll be reflecting on my journey through the Polkadot Blockchain Academy at UC Berkeley. From the intensive curriculum to the unparalleled networking opportunities, this program has equipped me with insights that continue to shape my understanding of Web3.

Join me in this brief exploration of the Polkadot Blockchain Academy and the impact it's had on my journey.

Click here to read the full article!

Completing the academy's 3rd edition was not only a personal milestone, but also a testament to the quality of education provided. The program's blend of academic rigor and real-world applicability sets it apart in the ever-evolving blockchain space.

👨‍💻 FullStack simple tutorial to fetch data and display it

NicolasBiondini — Fri, 20 May 2022 18:42:24 +0000

Hi guys! How are you? I wanted to do a post about how to create a frontend and fetch data from a backend made it with node js and express.

When I started as a web developer I didn’t understand how that works. I was really lost. I knew that something called the “back-end” was connected with the front-end to give him data, but I didn’t know how it worked.

After a lot of hours invested in learning, I finally understand that now. But, I know that there are a lot of people struggling with that, so I decided to make this simple tutorial.

Making the front-end

Okay, if you are a front-end dev, I think you know how to do this, but, to make this tutorial more complete, I’m going to start with it.

To start just use create-react-app.

We delete everything on the App.js file and we add this

We start the app with

npm start

And on the localhost:3000 we are going to have this

Ok, we are going to let here the front-end and we are going to continue with the back-end.

Back-end with node js and Express

I’m going to explain to you what I did.

On the first line, I just go back to the main project folder. Then I list the folders inside of it. As you can see the only folder there it’s “fetch-data-example”, which is the front-end folder.
Then I create a new directory called “back-end”.
After that, I move into that folder and I run “npm init -y” to create the package.json file.
Then I create an “app.js” file.
And finally, I use “code .” to open Visual Studio Code and start coding.

Before we start, we need to install some libraries.

We are going to install express which is a framework for node js designed to build APIs and Web Apps.

We install it

And we are going to install nodemon as a dev dependency (-D). Nodemon will watch the application and restart the server when we make some changes to the files.

We are going to add a script to the package JSON to start our app on dev mode.
Also, I going to add the “type” property to use “ES modules”.
And this will be our package.json.

Now we are going to open the app.js file and we are going to add some things.

And our console will display

I know, that seems a lot but let me explain it.
First of all, we created a “Server” class. We use the constructor to use the express library and use the class methods. Then we define those methods.

The last method starts the server on port 3001 and displays the message in the console.

In the second one, we can add routes. In this example, I just going to add only one route (”/”) to keep it simple.

The routes refer to how an application’s endpoints (URIs) respond to client requests.
In this example, our only route is “/” and uses the “GET” method. There are a lot of methods like POST, PUT, DELETE, etc (you can see the Express Documentation for more information).

The get method receives 2 main properties. The “path” or URI (in this case it’s “/”) and a callback function. This callback function also receives 2 arguments, the “Request” (req) and the “Response” (res).

The Request has all the information from who sent the request petition (the front-end). The Response’s the way to respond with data to who sent the request petition. In this example, we send to the front-end a JSON with some information. What we send it’s an object with a property of “users” who has an array of users.

So, if we look at localhost:3001 we can see this

Congrats!🎉 We have our back-end working, but you still need to know the last concept: the middleware.

If you remember, we have 2 middlewares on our “middleware” method

So, what’s middleware? A middleware is just a function that’s executed before the routes. It has 3 arguments: Request, Response, and next.

The first 2 are the same as those of the routes. The new one is “next”. Next is a function whose work it’s to pass to the next middleware or, if there is no one else, finally to the route. If we use middlewares and we don’t use the “next” function, the app will be blocked and won't return anything.

In this example, I write a simple middleware that just made a console log, so every time that we made a request to the server, on the console we will see this

So, congrats! You have your first back-end app made it with node js and express.

Front-end part 2

Now that we have our API ready and working on port 3001 and our front-end ready on port 3000 we can start.

On the App.js file, we are going to import useState and useEffect from react.

Then we will use “useEffect” and fetch to fetch the data from our API

Every time that the page load is going to trigger the “getData” function who is an async function. This function it’s going to fetch the data, parse it and show it with a console.log.

But WAIT!, we don’t receive any data, we have an error.

That happened because we forgot to add the cors into the back-end. CORS is an internet protocol.

You can learn more about CORS here.

We have to come back to the back-end

Do you remember the middlewares? Well, we have to add one more: the CORS.
Luckily for us, we have a node js library for that.

In our back-end project, we install this

And now our back-end will look like

Front-end again

Now if we look at the console of our front-end project

We finally connect our back-end with our front-end! 🎉

Now we have to display the users on the front-end.
To do that we are going to use “useState”

And now we display the data

Our App.js component will be like this

And our web

We did it! 🎉💪🎉

That’s it friends! I hope it helps you!

I leave here the front-end repository and the back-end repository.

Thank you so much for reading this post.

Let me know in the comment section if you want to see a tutorial with a DB and deploy this app with docker, docker-compose, and AWS.

🎉 After 2 years I finally finished my portfolio🎉

NicolasBiondini — Thu, 19 May 2022 12:59:03 +0000

Hi guys!👋 How are you?
My name is Nicolás Biondini, I’m 23 and I'm a Front-End Developer.

I've always been passionate about technology and tech companies, that's why I started to study business models, finance, and marketing but I knew I still needed the third leg of the table: learn how to code. It was frustrating to understand things and try to contribute to the real world but be limited because you don't understand how tech works.

After finishing my third year of university, I decided (after much thought) to drop Economics and start learning how to code. All that happened just at the beginning of 2020 so, as you know, pandemic times. I stayed home and started learning to code 10 hours per day from Monday to Friday.

I started with a Python book, but after I finished it I felt lost. Then I found a web dev roadmap and started with Harvard’s CS50 course, an HTML and CSS book, Free Code Camp certifications, and so on.

And here I am today. After all this path I’m confident in myself, with all the energy, hunger, and ambition to make things and to continue learning and improving every day.

And after two years I finally finished my portfolio!
Two weeks ago I just finished my project Beat (I'm going to talk about it in the next few days) and I felt ready to start looking for a job.

I know, it's going to be difficult, it's a long trip, but I trust myself and I'm patient so we will see 😅.

Wish me luck and if you know about some Frontend developer positions available let me know. If you have any advice or opinion about my portfolio/projects let me know too.

The portfolio was made it with Next js and Framer Motion.

Here is the link to my portfolio: nicolasbiondini.com.

Thanks to this community for all the support over the years, dev really is a beautiful place full of wonderful people.
I promise to start writing much more here.

See you soon! 😊👋

Open Source Newbie! Please help!

NicolasBiondini — Sun, 10 Jan 2021 03:13:47 +0000

Hi to everyone! My name is Nicolás i have 21 years old, i droped the economics university after 3 years and i have been studied intensely "how to code" (10 to 14 hs at day) for 8 months ( i learned html, css, js, react, node.js, mongodb, gatsby, python, etc) and i want to start to contribute to the open source comunity but there is a problem : i don't know how to start and what kind of things i can do for them.

So im very glad if some of you can help me to see a way and start doing things. I really want to help to others but i don't no how to start. So if you know about some project that i can help or something like that, no doubt and tell me about it.
Also I want to say sorry for my english, because it's not perfect (i'm working on it) and thanks for your help.

Thanks a lot!