Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mikeghen/frames-app
https://github.com/mikeghen/frames-app
Last synced: about 8 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/mikeghen/frames-app
- Owner: mikeghen
- Created: 2024-03-23T20:22:23.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-03-24T15:05:09.000Z (8 months ago)
- Last Synced: 2024-05-16T19:01:31.913Z (6 months ago)
- Language: JavaScript
- Size: 8.69 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frame Maker App
## Directory Structure
* Root of this project has the Frame Maker React App
* `frameVercelDeployer` - Python Flask Server for Publishing Frame template to Vercel
* `frameTemplate` - Frame Template for the Frame Maker App when making frames
# Web3 Starter
Web 3 Starter is a modern web 3 starter template project.
Here's the full stack of frameworks/libraries used:
- Next.js React
- TailwindCSS for styling
- [HeadlessUI](https://headlessui.dev/) for Tailwind components
- [@rainbow-me/rainbowkit](https://github.com/rainbow-me/rainbowkit) to connect to ethereum wallets
- [react-hot-toast](https://react-hot-toast.com/) for toast messages
- [unstated-next](https://github.com/jamiebuilds/unstated-next) for state management
- [next-themes](https://www.npmjs.com/package/next-themes) for dark mode theme
## How to Setup Development Environment
#### A. Start the local hardhat ethereum node
```bash
npx hardhat node
```
#### B. In a seperate shell, start the NextJS Server.
```bash
yarn && yarn dev
```
Navigate to `http://localhost:3000` to see your app.
## First Time Project Template Setup
#### 1. Create a `.env` file.
```bash
# Private key used for testnets (ropsten)
ETH_PRIVATE_KEY=""
# This is the private key you will used to deploy to mainnet
ETH_MAINNET_PRIVATE_KEY=""
# This API Key is used for Etherscan contract verifications
# To obtain the API Key go here -> https://etherscan.io/apis
ETHERSCAN_API_KEY=""
# This is the address of the contract that will be used in production
# You'll neeed to set it here, and in Vercel (or wherever you choose
# to deploy the app.)
NEXT_PUBLIC_CONTRACT_ADDRESS=""
# Name of the network contract is deployed on
NEXT_PUBLIC_NETWORK_NAME=""
# This API is needed when you run `npx hardhat test` -- so that
# you can approximate the cost of deployin your contract on mainnet
COIN_MARKETCAP_API_KEY=""
```
## Resources
#### Frontend
- **[Tailwind UI](https://tailwindcss.com/docs)**
- **[Tailwind UI Components](https://tailwindui.com/)**
- **[Tailwind Community Components](https://tailwindcomponents.com/)**