This week's project is to use React components to build a page which shows new album and single releases.
Since the focus of this assignment is to practice with React, we've downloaded a response from the Spotify API which you can use, rather than calling the API yourself.
You should build something which looks like this:
When hovering over album covers or artist names, you should implement the following hover styles:
- How to write React components
- How to use
.map
to iterate over an array of data and mount many components - How to use React props to feed information to components
- How to structure React projects into small chunks
- Fork this repo
- Clone this repo into your projects folder on your computer
- Open up VS Code
- In the terminal, run
cd code
to change into the code folder - Install the dependencies needed for react by running
npm install
- Run the react development server by running
npm start
In the code/src/data.json
, we've included an API response from Spotify which contains data for 50 recent releases. You can import
this JSON file into a components using import data from './data.json'
(which we've already done for you in the App component).
The result of importing the json is a variable called data
which includes the full JSON response. Your task is to use this, along with .map()
to mount an 'Album' component for each album. Within those components, you could then break things up further. For example, your app could have a structure like this:
App
component which has thedata
Album
component which is rendered using.map()
and which you pass the album data into using props.Artist
component which is rendered using.map()
using each item in theartists
array, inside theAlbum
component to show the artist name and a link.
This is just a suggestion - how you decide to structure your components is completely up to you.
You should follow the design screenshots as closely as possible. We've provided icons for the play, heart and more info icons when hovering on an album. Use the following for fonts;
- Album title - 14px Helvetica #ffffff
- Artist name - 14px Helvetica #a0a0a0
- Your page should look as close as possible to the design provided.
- You should display the following for each album; album cover image, album name, the name of each artist involved.
- When you hover over an album you should show a play button
- When you hover over the play button, it should grow (see the design sketches)
- When you click on the album, it should link to the album's external url in the data
- When you click on an artist, it should link to the artist's external url in the data
- Your page should be response, showing 4 albums per row on desktop, 2 per row on tablet, and 1 per row on mobile.
- Code follows Technigoβs code guidelines.
- Contribute by helping others with this project on Stack Overflow.
- If selected; demo your solution for your team.
-
When youβre finished with the project, push your code to GitHub with these commands:
git add . git commit -m "your commit message" git push origin master
-
Navigate to your repo and create a Pull Request into the Technigo repo (Add a link to your deployed project.)
-
Wait for the code review from your teachers
Ask for help and share your knowledge about this project with the 'project-music-page' tag on Stack Overflow. Talk to your team on Slack and help each other out. Do some research about your problem, you are surely not the first one with this problem, Google is your friend π. And you can of course also book a tech call.
Make sure you've commited and pushed a version of your project before starting with the stretch goals.
Playlists Sidebar
We've provided another API response which includes a list of popular playlists. Use this, along with some new components to render a list of playlists in a sidebar.