Create a Spotify HomePage with NextJs.

Github Repo

Project Structure

--Components(Ui React Components)
--data:(Hardcoded Spotify Plans Data)
--styles(All css Styles)
--pages(All pages that can be navigate)

Note 📙 All components in the project is Functional React components and there is no fully interaction as in Real Spotify Website it's just a standalone not fully dynamic nor a fully static.

Components

1.Footer.jsx

This component represent the Footer UI of the Home Page.

2.HomeHero.jsx

HomeHero build the Top Hero Section of the Home Page.

3.InputGroup.jsx

A Custom React Component used for Login & SignUp form.

4.Layout.jsx

A Layout component which render some UI components based on page route.

5.Logo.jsx

A Custom component to render the Spotify Logo in Navbar Component.

6.Logo2.jsx

Another React Component which is used to render spotify black logo in svg format used in Login & Signup Page.

7.Navbar.jsx

A React functional component which use to render the Navbar UI of the Page.

8.PlanCard.jsx

A React Card Component use to Display a Single Plan Card for the Spotify subscription plan.

9.Plans.jsx

A React component which contains a wrapper in which we iterate through the list of plans imported from the data directory by using Array.map() method.

10.Sidenav.jsx

Last React Component use to build the Sidenav for the Pages which we can toggle by clicking on hamburger menu button from top right.

Pages

1.index.js

This will render the index or home page of the spotify home page.

2.login.js

This represent the Login Screen of the Spotify Login Page.

3.register.js

This will render the registration page containing some other custom components which i declared above.

4.premium.js

This will display the Plans for the Premium Users.

5.support.js