Skip to content

Psychedelic/nft-marketplace-fe

Repository files navigation

🍭 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=@Psychedelic

Note: 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"

⚠️ Alternatively, a token could be passed to the .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 install

Runs 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 production

Builds 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:start

You'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'