🍭 Jelly - Marketplace FE (V1)
This is the repository for Jelly's V1 single-collection marketplace app. The FE will evolve with the protocol as it transitions to a multi-collection marketplace hub.
📒 Table of Contents
⚙️ Requirements
- Nodejs
- Yarn or NPM
👻 Configure NPM for Github Package Registry
You'll need to have @Psychedelic Github Package Registry setup, if you haven't done for other projects find out how here.
To pull and install from @Psychedelic via the NPM CLI, you'll need:
- A personal access token (you can create a personal acess token here)
- The personal access token with the correct scopes, repositories, org repositories and read:packages to be granted access to the GitHub Package Registry.
Once you have those ready, run:
npm login --registry=https://npm.pkg.github.com --scope=@PsychedelicNote: You only need to configure this once to install the package!
On npm login provide your Github email as your username and the Personal access token as the password.
You can also setup your npm global settings to fetch from the Github registry everytime it finds a @Psychdelic package:
npm set //npm.pkg.github.com/:_authToken "$PAT".npmrc as //npm.pkg.github.com/:_authToken=xxxxxx but we'd like to keep it clean, tokenless. Here's an example where the PAT is an environment variable:
@psychedelic:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${PAT}Whichever option is best for you, you'll then be able to install packages from @psychedelic, such as the @psychedelic/plug-connect.
🤔 Getting started
This project was bootstrapped with Create React App.
⚡ Development
Install required packages.
yarn installRuns the app in the development mode, or run the app using a desired backend environment. Open http://localhost:3000 to view it in the browser.
yarn start
- or -
yarn start staging
- or -
yarn start test
- or -
yarn start productionBuilds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
yarn build👾 Service dependencies
The Marketplace Frontend interacts with Cap, Dab, Crowns (a DIP-721 token) and wICP (a DIP-20 token), when developing, you'll need these to be running on your local network replica.
Utility commands are provided for your own convinience, find the Service dependencies guideline for more details.
In short, start the Services by executing:
yarn services:startYou'll need to read the Marketplace Service guidelines to understand how to interact with the Services.
🪚 Integration tools
The following Integrations document provides a brief explanation on how the integration process came into play. It won't provide every single detail about it, but hopefully an overview to help onboarding; or allow the frontend team find appropriate tools to interact with the services, as easily as possible. Learn more about it here!
🙏 Contribution guideline
Create branches from the main branch and name it in accordance to conventional commits here, or follow the examples bellow:
test: 💍 Adding missing tests
feat: 🎸 A new feature
fix: 🐛 A bug fix
chore: 🤖 Build process or auxiliary tool changes
docs: ✏️ Documentation only changes
refactor: 💡 A code change that neither fixes a bug or adds a feature
style: 💄 Markup, white-space, formatting, missing semi-colons...The following example, demonstrates how to branch-out from main, creating a test/a-test-scenario branch and commit two changes!
git checkout main
git checkout -b test/a-test-scenario
git commit -m 'test: verified X equals Z when Foobar'
git commit -m 'refactor: input value changes'Here's an example of a refactor of an hypotetical address-panel:
git checkout main
git checkout -b refactor/address-panel
git commit -m 'fix: font-size used in the address description'
git commit -m 'refactor: simplified markup for the address panel'