Paulo Bordignon's Portfolio

The purpose of this project is to create a personal website to introduce myself and show my projects to all people.

Architecture and decisions

The main objective was to create a portfolio using a different backend to manage the projects' list. I chose the Ethereum blockchain which offers us a decentralized, low-price, and transparent solution with data always available.

The smart contract was built using Hardhat, Mocha, and Alchemy. It has functions to add projects, remove projects, and list projects. Inside this smart contract, there is a projects' array that can be manipulated only by the owner(contract deployer). The images of projects also are decentralized hosting using IPFS.

In the front-end is used the atomic design methodology for creating the components, this improves a vision of how the interface and elements are connected promoving scalability.

Using React's Context API was built a global notification (inside each page) to always display the alert messages in the same place and always have only one alert displayed each time [1].

If a non-owner of the contract tries to access the admin page, the Next.js middleware redirects the user to the home page (without flashing content). The admin user is verified through his connected wallet address.

For users to connect their wallet was used Rainbowkit a modern and open-source project. To always have the smart contract content and wallet connect available was used a private provider through Alchemy.

The private provider has costs because of this was implemented the ISR data fetching method to get the content only one time per day indifferent of quantity access. The ISR also optimizes the SEO of the website displaying all content in the first render.

Technologies

Next.js, Typescript, Solidity, Hardhat, Ethers, Alchemy, Rainbowkit, Mocha, Pinata, Ethereum, Framer Motion, IPFS, and others.

Requirements

1 - Run yarn to install the dependencies;

2 - Deploy the smart contract using Hardhat and Alchemy, see more information by accessing the contracts folder;

3 - Fill out environment variables;

4 - Run: yarn dev.

Next features

Create also a decentralized domain and use the most possible decentralized resources, like Fleek to host the website and others.

References

[1] de Carvalho, D. M. (2020). Handling global notifications with React's Context API.