# Aptos: Build a Faucet Tutorial

**Published by:** [0xZOZ](https://paragraph.com/@zoz/)
**Published on:** 2022-04-01
**URL:** https://paragraph.com/@zoz/aptos-build-a-faucet-tutorial

## Content

Backstory: Meta(formerly Facebook) spent many years trying to build for the web3/Blockchain space. After long regulatory battles Meta ultimately gave up for the time being but what was left was a beautifully designed system known as Diem and a safe, easy-to-use language built specifically for blockchain - Move.Enter AptosMany of the engineers that help build the codebase did not just want to leave the work that was done and after Meta announced it would no longer be going ahead with the project, the builders decided to build their own network. In their words:A Layer 1 for everyone - Building the safest and most scalable Layer 1 blockchain.The ecosystem is growing fast with multiple projects building using the Diem/Move codebase. This includes:0L(Open Libra) - A unique economic experiment not backed by VC’s and instead built by a community of dedicated individuals.Mysten Labs - Other previous Meta employees who have built Sui and are bringing Move, along with Technologies like Narwhal and Tusk to projects like Celo and SommelierPontem - The Experimentation Platform for Diem Blockchain Technology built around the Polkadot networkIntroductionThis article intends to show how easy it is to build a client-facing React project using the Aptos API. This is by no means an end product and development is happening daily that will likely make this obsolete very quickly. If this helps at least a few people get exposed to this new ecosystem and project it served its purpose. Subsequent articles will follow the journey and dive deeper into writing and using the Move language to build applications.Repo: Aptos FaucetCreating the React Appnpx create-react-app aptos-faucet --template typescript Folder Structuremy-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg This will build a base React App we can work with. There are essentially minimal changes that need to be made so we will break them up into three categories:UI changesUI logicConnecting to the Aptos API and handling the connections in the clientUI ChangesMost of these changes can be done in the App.tsx file in the projects /src folder Beforeimport React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; Change the logo to a nice faucet design and remove cssChange logo.jpg file in /srcRemove CSS - here and hereImport modules for UI and Aptos logoImport ModulesAdd a new aptos_logo.png in /srcAdd additional UI codeAdjust CSSUI LogicWe then need to make sure the appropriate logic is in place to handle the buttons and modals associated with the UI changes.Add UI stateAdd Modal functionsAdd Warning functionsConnecting to the Aptos APIThe code and examples mostly come from the Aptos tutorials.Add an accounts.ts file in a new /src/ts folder to use to interact with the Aptos APIConnect this with the UIImport the accounts.ts functionsAdd the Aptos endpointsCreate Account functionAdd Funds functionAdd wallet stateUsing Your New Faucet ApplicationCreate a New AccountYou can create a new account by clicking the ‘CREATE ACCOUNT’ button. This will provide you with an address, public key, auth key and private key.Note: The account will not be stored on the Aptos blockchain untill it recieves funds and interacts with it.New Account - be sure to save this somewhere safeFund your new AccountYou can now fund this new Account by clicking ‘FUND ACCOUNT’. The last created account will be used by default but you can change it to your address of choice if needed. Enter the amount and click ‘GET FUNDS’. Voila you now have an account on the Aptos Devnet.Fund your new AccountHopefully this gives you the push you need to get involved at dive deeper. You can follow my journey as I post about my journey becoming a psuedononymous developer on Mirror or Twitter.

## Publication Information

- [0xZOZ](https://paragraph.com/@zoz/): Publication homepage
- [All Posts](https://paragraph.com/@zoz/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@zoz): Subscribe to updates