MetaBrainz Foundation

Convert all the tabs of the BookBrainz editor information page to React

  • Aim: complete the migration of the editor information page from Pug to React
  • Estimated Time: 5 hours

Our system for rendering webpages is currently split between two technologies - Pug and React. This is far from ideal, and we're trying to convert all of our rendering to use React.

One of the editor page tabs, the achievements tab (e.g. currently uses React to render the majority of its content. The remaining tabs, the main tab and the revisions tab still both use Pug.

These three pages have many similarities, and it should be possible to create one or more new React component that can be shared by all three tabs to render these similar parts. The remainder of the two tabs to be rewritten can be converted to two React components, each using the shared React components. The final step of the process will be to modify the achievements React page to use the new shared components, and reduce duplication.

To submit your work, clone the repository on GitHub and locally, create a git branch for your work, prefixed "editor-tab-conversion-" and ending in your GCI username (eg. "editor-tab-conversion-bob"). Commit your modifications, using small commits which make clear, self-contained changes. Finally, push your work to GitHub, and create a new Pull Request containing the changes.

Task tags

  • react
  • pug
  • bookbrainz
  • refactor
  • javascript

Students who completed this task

Daniel Hsing

Task type

  • code Code