Google Code-in

Aim: create a set of attractive error pages Estimated time: 5 hours

The current BookBrainz error template does not allow us to provide much information to the user about what to do after encountering something going wrong with the site. For example, our current 404 error page only tells the user that the page was not found, and not where to go next, or even what URL of the missing page is.

For this task, you should design a React component to be rendered by the server when an error is encountered. The rendered page should include the title of the error, the error code, a description of the error, the URL of the current page, space for a small graphic or icon specific to the error type (square, and taking up about 1/4 of the space), and instructions on what to do next.

Start by researching some existing 404 error pages from popular sites, and get some inspiration for your design. Then develop the component, with the above information being passed in via React props. Finally, create the server side code specifying the content for the pages and update the error handling to render the React components rather than the existing pug templates.

To submit your work, clone the repository on GitHub and locally, create a git branch for your work, prefixed "new-error-component-" and ending in your GCI username. Commit your modifications, using small commits which make clear, self-contained changes. Finally, push your work to GitHub, and create a new PR with the changes.