📋 Nightjar React Coding Exercise
What you need to do
1. Initial setup
- Fork the repository.
- Clone a local working copy.
- Make sure you have recent enough versions of NodeJS and Yarn installed. We used NodeJS v10.16.3 and Yarn 1.19.1.
- Open a terminal and
cdto your local working copy.
yarnto install dependencies.
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 idea is to do things like you would in a real project:
- adopt the house code style;
- make your changes look like they belong in the codebase;
- minimise surprises for future developers;
- be neat and tidy.
2. Display the total number of events in the title
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.
3. Display a loading indicator while the events are loading
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.
4. Error handling
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.
5. Implement favourites
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:
/api/favourites: returns an array of event ids.
/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)
/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.
6. Thank you
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
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
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
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
yarn build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify