AngelFace ⛓

Home Page

NFT Gallery Page

What is AngelFace:

• AngelFace is a project built on React as a submission to AngelHack Monthly Challenge. AngelFace is made up of two words AngelHack and Interface
• AngelFace is fully built on vite React, with Tailwind CSS to enhance the UI of the platform.
• We have made AngelFace in the form of an NFT Gallery, with many NFT images in The NFT Gallery tab of the project.
• This project is built for web3 peeps who want to get started in web3 frontend development and are looking for projects to get inspired to build upon.
• The purpose of building this project was to use our knowledge of Frontend development and Figma skills to create something creative.

Our Website

---

Links to our Project:

• Our Website: https://angelface.vercel.app/
• YouTube Link to our Project: https://youtu.be/wT8EFPa1u08
• Figma Link of our project AngelFace: https://www.figma.com/file/pE44gfegFjePu94j0edAey/AngelFace?type=design&node-id=0%3A1&t=DSTz6YSPMzif8Onu-1

---

Tech Stack Used👨‍💻

Reactjs

Refer to https://react.dev/ install React

TailwindCSS

Refer to TailwindCSS docs

Metamask

Metamask is a browser extension that allows users to interact with the Ethereum blockchain. It allows users to connect to the Ethereum network and interact with smart contracts.

Rainbowkit

Learn more about RainbowKit here

---

Prerequisites 👨‍💻

Install Node JS

Refer to https://nodejs.org/en/ to install nodejs

Install Create-React-App

Install react app using Vite.

Learn Tailwind CSS

This project uses Tailwind CSS for styling. Refer to https://tailwindcss.com/ to learn more about Tailwind CSS.

Live WebSite URL

The WebSite is deployed in https://angelface.vercel.app/

Click on the link to see the website.

Cloning and Running the Application in local

Clone the project into local.

Install all the npm packages. Go into the root folder in each folder client and server and type the following command to install all npm packages

npm install

And Type the following command in the client folder of the project

npm run dev

The Client Runs on http://localhost:3000/

Challenges Faced:

• We faced a couple of challenges while building this project, the major one was integrating the newly released Thirdweb Wallet SDK.
• We also faced challenges in making the website NFT Gated, as we tried to add some backend with Solidity, but failed in integrating it with Frontend.

Future Plans:

• We will be using this frontend with some changes for the ongoing Hedera hackathon