This project contains the front-end application for the SongBirdz NFT collection.
You can find the back-end contract and server here.
The ./src folder contains all logic related to the front-end application for the NFT collection.
The pages for the application are:
-
/-> The home page. -
/about-> An about page describing the project. -
/collection-> A listing page for all birds in the NFT collection. -
/collection/:id-> Details page for an individual bird in the NFT collection.
The application requires an active connection to a web3 wallet in order to view and interact with the NFT. It currently supports only MetaMask and Coinbase Wallet.
Make sure that you have already completed the setup steps for the back-end server and NFT contract.
-
If you don’t have Node.js installed, install it from here (Node.js version >= 16.18.0 required)
-
Clone this repository
-
Navigate into the project directory
$ cd songbirdz-collection-frontend -
Install the requirements
$ npm install
-
Make a copy of the example environment variables file
On Linux systems:
$ cp .env.example .env.development
On Windows:
$ copy .env.example .env.development
-
Start the application on your local machine at https://localhost:3000
$ npm run start
You should now be able to view the front-end application at https://localhost:3000!
The page will reload when you make changes.
You may also see any lint errors in the console.
- Ensure
.env.stagingfile includes the appropriate values - Build the distribution files for staging via
npm run build:staging - Commit the distribution files in
./static-stagingto git - Deploy the front-end application to gcloud/aws/azure/etc.
- Serve the distribution files via steps here: https://create-react-app.dev/docs/deployment/
- Navigate to https://songbirdz.cc and verify that the application is working!
- Ensure
.env.productionfile includes the appropriate values - Build the distribution files for production via
npm run build:production - Deploy the front-end application to gcloud/aws/azure/etc.
- Serve the distribution files via steps here: https://create-react-app.dev/docs/deployment/
- Navigate to https://songbirdz.cc and verify that the application is working!
- Verify that SSL certificate is up-to-date
Builds the app for the staging environment to the static-staging folder.
It correctly bundles React in production mode, optimizes the build for the best performance, and pulls in settings via the .env.staging file. The build is minified and the filenames include the hashes.
See the section about deployment for more information.
Builds the app for the production environment to the static-production folder.
It correctly bundles React in production mode, optimizes the build for the best performance, and pulls in settings via the .env.production file. The build is minified and the filenames include the hashes.
See the section about deployment for more information.
NOTE: there is no test code for the front-end application as of now.
NOTE: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.