Slice Interface
Slice frontend application.
- Mainnet: https://slice.so
- Rinkeby: https://testnet.slice.so
- Development (staging): https://dev.slice.so
Development
Installation
-
Create a fork of this repository.
-
Clone your fork and navigate to the root directory.
-
Install project dependencies.
npm install
-
Create a
.env
file in the root directory which mirrors the.example.env
file. Learn how to define each field in the.env
file in Setup.
Setup
Slice-interface
relies on a number of services for development. A separate set of contracts on Rinkeby was appositely created for development purposes.
The following sections describe how to set up each service for local development.
A shared staging environment has also been set up on https://dev.slice.so. The shared environment uses the same contracts and subgraphs as the ones used for local development, so the slicers and products created locally will also appear there.
Alchemy
Slice uses Alchemy to connect to an Ethereum network (mainnet, or one of the testnets).
Follow these steps to create an Alchemy key:
- Create an account on Alchemy
- Create a new App, specifying Rinkeby as network
- Enter the app and click on View Key
- Copy the HTTP key and paste it into the NEXT_PUBLIC_NETWORK_URL in your
.env
file
Pinata
Slice uses Pinata to store products metadata.
Follow these steps to create a Pinata key
- Create or log into your account on Pinata by clicking on Login
- On the top left corner, open the user menu and click on API Keys
- Create a new API key with admin permissions and copy the JWT secret access token into PINATA_JWT in your
.env
file
Web3Storage
Slice uses Web3Storage to store encrypted product metadata.
Follow these steps to create a web3Storage key
- Create or log into your account on Web3Storage by clicking on Login
- Create an API token and copy it in WEB3STORAGE_KEY in your
.env
file
Supabase
Slice uses Supabase as its database and storage solution. The database is used for optimization purposes and to store slicers metadata, product metadata, list reverted products, as well as to support interface-only features such as likes.
The database represents the source of truth when it comes to slicer metadata.
Follow these steps to set up your db and storage:
- Create or log into your account on Supabase by clicking on Start your project
- Create an organization and create a New project (take note of the password you choose)
- Copy the following values into your
.env
fileanon key
->ANON_SUPABASE_KEY
secret key
->BACKEND_SUPABASE_KEY
project configuration url
->NEXT_PUBLIC_SUPABASE_URL
- Create a storage
- Click on storage on the left sidebar and click on create a new bucket
- (Important) Name it slicer-images and make it public
- Click on policies in the left menu and create a new policy from scratch for the new bucket. You can name it "allow anon users to upload to slicer-images"
- Check
INSERT
as the allowed operations and paste the following snippet in the policy definition
((bucket_id = 'slicer-images'::text) AND (role() = 'anon'::text))
-
Link the database to your app
- Click on settings on the left sidebar and select database under project settings
- Copy the
connection string
at the bottom of the page and paste it into DATABASE_URL in your.env
file - Substitute [YOUR-PASSWORD] in the string with your project password
-
Navigate to the root directory and run the following command in your terminal to initiate your db
npx prisma generate && npx prisma migrate deploy
-
Add the string
?pgbouncer=true
at the end of the DATABASE_URL in your.env
file
The interface uses incremental static regeneration to populate the db, so once you start the app you will see any slicer that other devs have created in their own local environments, without their images or metadata.
Products generation for a slicer can only be triggered by a superowner, so you won't be able to see any products created in other slicers by default.
Usage
-
Start the app.
npm run dev
If you use a different port than 3000 for local development, update the NEXT_PUBLIC_APP_URL in your
.env
file accordingly
Deployment
Frontend application(s) is hosted on Vercel and new versions are automatically deployed when pushed to master
, testnet
or staging
.