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

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 "FAQ" section responsive

Redesigning the FAQ section

The heading, font, positions, color, etc can be improved. Please assign this issue to me for hacktoberfest.

Connect the profiles from auth0 to the database

Connect the profiles from auth0 to the database so that each user sees their own NFTs on their profile page.

Requires auth0 integration with site and backend service so profile edits can only be permitted with auth token.

Profile - Fan page

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

Footer

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

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

Make "Latest drops" section responsive

Pull profile picture from Auth0

Currently, profile picture is static regardless of who signs up, but it should reflect the profile picture from the Auth0 profile.

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

Deploy to Vercel/Netlify

Pick a free hosting tier on Netlify/Vercel and set up auto-deployment

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.

Edit "What's it all about section" with new images and copy

Images are located in public/images

Heading Texts are black so not visible

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

Make footer responsive

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

Latest Drops section is not a carousal

The latest Drops section should be a carousel
@aryamankha

Home - What's it all about section

What's it all about section. Second section on home page. Full Figma - https://www.figma.com/file/I03uCw196ZjlzxHQelByBU/Landing-Page

Design sign up/sign in pages

Would love a Figma design of a sign up/sign in flow that we could implement for Backstage

package-lock.json and yarn.lock are creating a lot of conflicts during merging. Remove and ignore those files.

Improve style profile Page

Currently the profile page can be improved it because the styles doesn't according the Figma

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.