aryamankha / backstage-hacktoberfest Goto Github PK

Backstage is a web app built to support an NFT marketplace

Home Page: https://backstage-hacktoberfest.vercel.app/

JavaScript 4.23% TypeScript 74.19% CSS 10.59% MDX 10.99%

hacktoberfest hacktoberfest-accepted nextjs react tailwind vivid hacktoberfest2022 open-source frontend javascript typescript

backstage-hacktoberfest's Introduction

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

backstage-hacktoberfest's People

Contributors

Stargazers

Watchers

Forkers

flubbypuppy hrsh22 isabellasoares shubhamp48 vazqueztomas 0xclint umeshchavda05 sumeetshelar ahsanwtc jsvigneshkanna parthapaul7 nirajpdn jatayu-u ctahirih jankvc shanu79 abhishekpatel123 negar-75

backstage-hacktoberfest's Issues

Profile - Fan page

Profile page for fans. Full Figma design: https://www.figma.com/file/aTnodnfVNVkOus9dLZ5U96/Profile-Page

Heading Texts are black so not visible

Font color is black so not visible in what all about and FAQs section

Home - Latest Drops Section

Latest Drops section. Third section on home page. Full Figma - https://www.figma.com/file/I03uCw196ZjlzxHQelByBU/Landing-Page

Wallet integration

Set up Metamask connection when a user clicks the Metamask button on the home page.

Home - Hero section

First section on home page. Background image is in public/images. Full Figma is here: https://www.figma.com/file/I03uCw196ZjlzxHQelByBU/Landing-Page

Make footer responsive

Self explanatory. Try using Vivid to make the changes in-browser!

Make "What's it all about" section responsive

Footer

Design and implement a footer to be present on all pages of the web app.

Latest Drops section is not a carousal

The latest Drops section should be a carousel
@aryamankha

Consolidate nav bars

We currently have two different nav bars, one on the main page, and a separate one on the /profile page. Consolidate those two nav bars into one, make it a separate component, and have it display on both pages.

Change profile picture to reflect sign in from Auth0

Currently, profile picture in top right of nav bar is static regardless of sign in. Change nav bar so that if user is not signed in, only "sign up" button shows up in top right. If user is signed in, add their profile picture in the nav bar and include the "Metamask" button.

Make card component for Latest Drops

Make a card component for NFTs to be displayed

Home - FAQs section

FAQs section. Last section on home page. Full Figma - https://www.figma.com/file/I03uCw196ZjlzxHQelByBU/Landing-Page

Improving the Nav Bar

The fonts, spacing, hover effect, and position of the navbar can be improved. Please, assign this issue to me for hacktoberfest.

UI Improvements + New Pages

I'm open to any UI improvements a contributor might want to make while the database + NFT cards are set up. Would love to see you guys use Vivid for any changes you want to make (Option-Click on a component in dev mode to edit code and Command-K to add/preview Tailwind classes).

If you want to make any new features, feel free to fork and create a new issue!

Can assign multiple contributors to this task. Just comment with the change you want to make.

Make "Latest drops" section responsive

Profile - star page

Frontend for profile page for musicians dropping NFTs. Full Figma - https://www.figma.com/file/aTnodnfVNVkOus9dLZ5U96/Profile-Page?node-id=0%3A1

Add SignIn and Signout button

@aryamankha

Description:

Currently there is only signup button.
It would be user-friendly to show signin button in navbar in logout session and signout button in loggedin session

Please assign this issue to my name, will implement this feature