GSoC 2019: Unified Creation Form

Tags: #<Tag:0x00007f8d63a7e1d8> #<Tag:0x00007f8d63a7e048>

Personal information

Name: Chong Chee Yuan

Nickname: spookyninja

nick: spookyninja




This project aims to streamline the process of adding new entities and forming relationships between them into BookBrainz, making it more intuitive and convenient for users to contribute.

Currently, to add a single book in BookBrainz, the user is required to understand the detailed relationship between each entity.


Furthermore, each entity currently has a separate creation form. As such, users have to create each separate entity and then form the relationships between the entities. This leads to a complex workflow for simple use cases (such as ‘adding a book’) and repeating data (for example the title of a work repeated for an edition and an edition group, in a simple use case of a book), increasing chances of making errors.

This complex and repetitive workflow could discourage users, especially newcomers being from the contributing.

As such this projects aims to provide a step-by-step workflow that shifts the responsibility of forming relationships from the user to the website. For each step, entities can be searched for or created, with the full range of options the current forms do. The form will automatically form relationships between the various entities accordingly.

In summary, the workflow would be to allow users to create new entities or to select existing entities without having to fill in a separate form.

While the workflow is simple, users are able to optionally enter more complicated cases (for example an anthology of short stories will have multiple Works, and the title of the Edition may be different from any of the Works it contains). The creation form would then need to be flexible in terms of accommodating all types of books

This project would develop the User Interface by using the MetaBrainz new React-storybook design-system. Since the design-system is still in beta, this project would thus be contributing to the development of the design-system as well.

For example, the user interface of the new book creation form would have a progress bar for easy navigation of entities related to the book.

As such, this project would need to create a new general purpose and scalable component in the design-system. Such a component would likely be created using the react-bootstrap’s tab component, adding additional styling and adding it under ./components/. In addition, there should be options to customize the component, such as changing the number of tabs or colors for flexibility. This would improve the reusability of the component and maintain the general theme of MetaBrainz websites.
When users type in the name of the entity they wishes to add, a list of similarly named entities would appear below. This serves as a search engine to allow users to quickly select the entities relevant to the book that they are adding. Additionally, this acts as a warning to prevent users from adding duplicate entities. This is powered by Elasticsearch, which is already implemented in the frontend under src/client/components/pages/parts/search-results.js. As such, it would just need to be modified to serve the purpose selecting the entities to be linked to the Book in addition to providing a hyperlink to the entity pages.

The entire creation form would be stored in the redux store and only send post requests to form all the relationships at the end after the user confirms all his entries.

The more comprehensive user interface mockup can be found here:


Community Bonding

During the community bonding time, I would be mainly focusing on getting acquainted with the current codebase by fixing bugs relevant to the projects.

Week 1:

Sort out exact requirements of the User Interface, e.g. minor details on how every button is supposed to look like, how transitions should look like.
Imagine as many scenarios as possible to accommodate all different use cases of the form, e.g. multiple works, multiple authors
Get a general feel of the direction of the project, which are the tough issues to solve

Week 2 - 4

Work on developing MetaBrainz design-system, developing required components
Figure out how to integrate MetaBrainz design-system into BookBrainz

*First evaluation

Week 5

Get at least a working prototype of the User Interface, i.e. page transitions working, search function working.

Week 6 - 8

Figure out how to automatically form links between entities
Figure out how to properly send post request to the server to save all input data from the user.

*Second evaluation

Week 9 - 10

Get feedback on the general feel of the user interface
Work on these feedback

Week 11

Do testing on form to figure out any bugs
Start writing documentations

Week 12 – 13

Fix any remaining bug
Start cleaning up code, adding comments to relevant places
Finalize project

Detailed information about myself

I am a 1st year student in the National University of Singapore pursuing B.Comp(Computer Science). I was introduced to programming 2 years ago but I had rather little exposure to any real project. This would be my first real project and I am very excited about this as this would enhance my understanding of the process of developing a real working product.

Tell us about the computer(s) you have available for working on your SoC project!

My current laptop is a Lenovo Legion Y520 dual booting Windows and Ubuntu

When did you first start programming?

I started programming 2 years ago, focusing mainly on solving programming problems on websites such as hackerrank.

What type of books do you read?

Fantasy books. Most recently Lord of the Rings.

What aspects of the project you’re applying for (e.g., MusicBrainz, AcousticBrainz, etc.) interest you the most?

I like the idea of allowing people to neatly categorizing the books they like, and they can make use of BookBrainz to further understand and explore to find similar books that they may also enjoy. I also like the front-end design portion of the project very much. I quite like the way React allows for a very intuitive design workflow.

Have you ever used MusicBrainz to tag your files?

I didn’t use MusicBrainz to tag my files before, and did not even know that it was possible!

Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?

No, this would be my first Open Source projects. However, I’ve been working on a school project that you are welcomed to check out in my github repository.

What sorts of programming projects have you done on your own time?

I try to get exposed to as many different fields as possible, such as learning machine-learning, web development, app development and automating many parts in my daily workflow.

How much time do you have available, and how would you plan to use it?

I can work full-time on this project for around 10 hours per day after all my semester exams end in early May.

Do you plan to have a job or study during the summer in conjunction with Summer of Code?

I do not plan to have a job or to study in school in conjunction with Summer of Code.

1 Like

(Emphasis mine.) Just a heads up to please use gender neutral pronouns when not talking about a specific person of a known gender. :slight_smile: (See our Code of Conduct.)

I’ll leave the actual reviewing of your proposal to @mr_monkey. Good luck!


Thank you, I’ve made the change. Sorry about that.

1 Like

Hi @spookyninja, and thanks for your proposal!

• A general comment before i delve into details: the proposal is too short and lacking details, especially for the implementation details and the timeline.
For example, "The entire creation form would be stored in the redux store and only send post requests to form all the relationships at the end after the user confirms all his entries": this is going to be a good third or half of the project, yet there is only one line and no details.
This will be the hard part and I would need a lot of reassurance that you will find your way around in the codebase. Participating in BookBrainz (like fixing tickets) would have given you a taste of what the codebase looks like, which would have helped describe the implementation in more details.
• In the timeline, you mention "Figure out how to automatically form links between entities. Figure out how to properly send post request to the server to save all input data from the user." You should already have a good understanding of how to do both (and the details described in your proposal), and I would be very uneasy with leaving that to week 6 of the project. That should really be week 1 and before.
• I would expect tests and documentation to be written as you code, ideally using test-driven development, instead of leaving it to week 11
• There is no “Book” entity; what is your first tab referring to?