- Fork the repository.
- Clone a local working copy.
- Make sure you have recent enough versions of NodeJS and Yarn installed. We used NodeJS v10.15.1 and Yarn 1.13.0.
- Open a terminal and
cdto your local working copy. - Execute
yarn installto install dependencies. - Execute
yarn start. It should open a browser onto http://localhost:3000/ and you should see a list of Vivid event tiles in the browser. If you don’t, your first task is to get it running successfully!
As you proceed through the subsequent steps, commit to git as you normally would and push your commits to your fork.
The events load asynchronously in the browser. While they are loading, keep the title unchanged i.e. “Results”. When they are ready, have the title change to “Results: n events found” where n is the total number of events that were received.
Events load really fast locally, but that might not be the case in the real world. We can do better than
<p>Loading...</p>! Use your own judgement to design and build a spinner or other visual indication that the content
is on its way. Make it in line with the Vivid visual identity.
You might find the Redux Dev Tools extension useful for this task, so you can hold the UI in its loading state without any code changes.
Try visiting http://localhost:3000/music and see what happens.
The API returned an error, but the UI isn’t doing anything with it. We can do better than that! Use your own judgement to design and build a friendly error message.
Note: we don’t want you to fix the error or stop it from occurring, we just want to render a friendly message to the user in scenarios such as this.
Go back to http://localhost:3000/ and try clicking the ♡ icon on a tile. Is it working?
If you check in the Redux dev tools extension, you see that an action is dispatched but the state doesn’t change. Let’s fix that!
There is a RESTful API for favourites already included in this repo, so we just need you to integrate with it. The API endpoints are:
- GET
/api/favourites: returns an array of event ids. - PUT
/api/favourites/:id: adds the event with id given in the:idurl segment to the user’s favourites, which are stored in the session (i.e. cookies need to be enabled on the client) - DELETE
/api/favourites/:id: removes the event with id given in the:idurl segment from the user’s favourites
Try them out in a client of your choosing (e.g. Postman) to satisfy yourself that they are working.
Now integrate them! When complete, your favourites should be persisted across page reloads. Try to make your implementation fit in with our existing codebase, by adopting our code style and using similar architecture.
Don’t forget to push your work up to your fork of the repo, and let us know you’re ready for us to take a look!
This project was bootstrapped with Create React App, and has been enhanced with server-side rendering, Redux, JSS and Standard code style.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more
information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Runs the app in production mode. Intended for use on the server, but should be used locally when you need to test in
production mode. Executes the built assets in the build/ folder.
Note: There is a safety check in case you have never run yarn build when you run yarn start:prod, but it doesn’t
check whether those files are up to date. So make sure you’ve run yarn build yourself before starting the server in
production mode.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.