Backstage

Building an NFT marketplace web app with Vivid as an in-browser styling tool!

Hacktoberfest 2022!

Getting Started

Clone the repository, install the necessary dependencies, and then run the application.

git clone https://github.com/aryamankha/backstage-hacktoberfest.git
npm install
npm run dev
# or
git clone https://github.com/aryamankha/backstage-hacktoberfest.git
yarn
yarn dev

Open http://localhost:3000 with your browser to see the result. Go over the Vivid docs at docs.vivid.lol/functionality to get familiar with how in-browser styling works.

Contributing

This repository is beginner friendly! We'll first be creating the frontend for the web application, then we'll set up the database and finally we'll add crypto functionality if there's time. We'll be creating issues for contributors to own components in the frontend, but feel free to propose your own issues!

Code organization

We'll be using React, Next, and Typescript for our frontend with Tailwind for all styling. Any new sections created should be added to the "components" folder, with sections put together to create full pages.

What is Vivid?

Vivid is an in-browser styling we've developed (check out www.vivid.lol). It's still in alpha, but it allows you to style with Tailwind directly from your browser. Check out our docs to learn how it works! If you find any bugs in Vivid, feel free to create issues in this repository so we can address them. Would love your feedback!

Designs

Home Page: https://www.figma.com/file/I03uCw196ZjlzxHQelByBU/Landing-Page?node-id=2%3A2

Profile Page: https://www.figma.com/file/aTnodnfVNVkOus9dLZ5U96/Profile-Page?node-id=0%3A1

Browse Page: https://www.figma.com/file/8RpbZL9OlzJIYUR4k0rTlb/Browse-Page?node-id=0%3A1