Blockchain Project: CRYP TWITTER

CRYP TWITTER WEB 3.0 Project

About

Front-end with Next JS 15.5.2 and Bootstrap for the layout, and we used Kit Wallet Avatar to display user avatars. On the back-end, we used Solidity for the smart contract with the help of Remix Web, because that’s where we got the ABI.json, and for integration with Metamask, we used the Web3 library.

This article discusses the development of Cryp Twitter on Blockchain, exploring in detail the integration between front-end, back-end, and the Metamask wallet. The application was structured with a focus on leveraging the key technologies of the Web 3.0 and Blockchain ecosystem, ensuring efficiency and interoperability. On the front-end, Next.js 15 was used in conjunction with Bootstrap, ensuring a responsive, modern, and optimized layout. In addition, the Kit Wallet Avatar was implemented to provide a visual display of user profiles, enhancing the interaction experience. On the back-end, the choice of the Solidity language for creating the smart contract, combined with the use of Remix Web to obtain the ABI.json file, enabled greater agility and standardization in development. Finally, the integration between the front-end and the Metamask wallet was carried out with the help of the Web3.js library, which served as a bridge between the application components, ensuring secure and efficient communication.

In this article, I will talk more about Web3.js libraries and a little about Kit Wallet Avatar because it is used to add wallet avatars, as they were created to code directly for Web 3.0, and Web3.js is used to interact with the Metamask wallet. As for the other libraries, I will copy and paste some important information from their documentation. To read more about them, there is a link at the end of the article.

Libraries

• Next
• Bootstrap
• Web3
• Kit Wallet Avatar

Next JS

Used by some of the world’s largest companies, Next.js lets you build high-quality web applications with the power of React components.

What is Next.js?

Next.js is a React framework for building full-stack web applications. You use React components to build user interfaces and Next.js for additional features and optimizations.

It also automatically configures lower-level tools such as bundlers and compilers. This allows you to focus on building your product and delivering it quickly.

Whether you’re an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.

Pre-requisite knowledge

Our documentation assumes some familiarity with web development. Before getting started, it’ll help if you’re comfortable with:

• HTML
• CSS
• JavaScript
• React

Tip: If you are new to React or need to refresh your knowledge, we recommend starting with our React Foundations course and the Next.js Foundations course, which allows you to build an application while you learn.

Bootstrap

Build fast, responsive websites with Bootstrap, a powerful, extensible, and feature-rich front-end toolkit. Create and customize with Sass, use the grid system and pre-built components, and bring your projects to life with powerful JavaScript plugins.

Bootstrap is a powerful and feature-rich front-end toolkit. Create anything—from prototypes to production—in minutes.

Web3.js

The Web3.js libraries will be discontinued on March 4, 2025. For migration guides and more details, see the Chainsafe blog

Web3.js is a robust and flexible collection of TypeScript and JavaScript libraries that allows developers to interact with local or remote Ethereum nodes (or any EVM-compatible blockchain) via HTTP, IPC, or WebSocket connections. It is a powerful and efficient toolkit for building applications within the Ethereum ecosystem and beyond.

Technical migration documentation

ChainSafe will provide documentation resources for the transition from Web3.js to the following alternatives:

• Éteres.js
• Viem

Kit Wallet Avatar

The @cfx-kit/wallet-avatar library is a collection of functions that can help you generate the same avatar as Metamask. Install it, check out its definition, and you’ll be ready to use it in no time.

🤡 A library for generating MetaMask avatars based on the account address.

✨ For example, use your Metamask account to generate an avatar. You can get the same avatar as Metamask. Of course, you don’t have to use your Metamask account.

Demonstration

Donation

Coffee to stay awake, thank you very much for your contribution to keeping our website online.

Donation

Coffee to stay awake, thank you very much for your contribution to keeping our website online.

Secound page

Conclusion

With this architecture, it was possible to efficiently integrate the smart contract into the user interface through the Web3 library, ensuring communication between the application and the Metamask wallet. Thus, the developed solution not only promoted an intuitive and interactive user experience, but also established a solid foundation for future expansions, reconciling security, scalability, and usability within the Web3 environment.

check out my blog: https://413blocks.com

413 Blocks, your premier destination for navigating the vast Blockchain ecosystem. We deliver clear, insightful content on everything from Bitcoin and Ethereum to DeFi, NFTs, and Web3. Whether you’re a beginner or an expert, join us to decode the future of technology and finance together.

Sources

• https://github.com/humbertoromanojr/web3-CrypTwitter
• https://nextjs.org/docs/app/getting-started/installation
• https://getbootstrap.com
• https://github.com/web3/web3.js
• https://www.npmjs.com/package/@cfx-kit/wallet-avatar
• https://blog.chainsafe.io/web3-js-sunset
• https://nextjs.org/docs