DEV Community

loading...
Cover image for Create a Spotify HomePage with NextJs.

Create a Spotify HomePage with NextJs.

sumit kumar bighaniya
Self Taught Coder!
・2 min read

HomePage=>👁 View Now:

Github Repo

Repo Link:

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

This page renders the support page ui of the spotify home page.

6.download

This is the last page in whole project just renders the download page of the spotify website.

Author

😜~ Sumit

1.Website:
2.Github:
3.LinkedIn:

Show Your Support

~by giving ⭐️ to this Project

Discussion (2)

Collapse
vishal2001hub profile image
vishal2001-hub

Great project nice one sir

Collapse
rafeeqpinjar profile image
Rafeeq Pinjar

🙌🙌