Clone Wars. The Final Project of the JS The Rolling Scopes Course.

Introduction

The final task of our course involved cloning the full functionality of the original application or creating its simplified version. Our team was inspired by IMDb site and was able to partially implement its features. This article is about the process of building, structural solutions, teamwork and the final result of our activity.

Briefly about us

Anatoliy Kiguradze | GitHub: anatkig

Yuliya Russinova | GitHub: YuPashintseva

Vagiz Musin | GitHub: vegas-muffin

About the project

For this project our team chose to clone IMDb movie site. Our version of the site was built on ReactJS. It contains 5 dynamically loaded pages where one can learn about the latest popular movies, their rating, number of viewers, synopsis, etc. It is also possible to see statistics of user’s activity, search in the movies database, create your own watchlist and view trailers. Every functional feature was given its own component, which made it possible to reach the maximum of flexibility and convenience in the development of the project. As the API resource we chose https://developers.themoviedb.org.

Features

For every available film it is possible to see brief information in a modal window instead of going to the film page itself.

The User can add the film he/she likes to the watchlist.

If the film has already been added to the watchlist, the user will see the corresponding message on the screenshot below.

In the top panel the number of films chosen by the user can been seen.

Clicking on the right mouse button demonstrates the context menu, which allows to reset the current watchlist if necessary without the need to remove each film separately. There is also a possibility to go to the WatchList page from the context menu.

Router is used, which makes it possible to switch pages without reloading.

For viewing the films from the WatchList Local Storage is used, where all the films chosen by the user are kept.

Session Storage is used for sharing data between pages. For example, when the user clicks on the film picture on the main page, the film info in transfered via Session Storage to the dynamically created page of this film. (React State could be used for that purpose).

Settings let the user change the background color as well as fonts on all pages. This feature was created with React State. The page’s layout changes without reloading.

Statistics — for its creation react google charts library was used (for the graph) and Local Storage (for collecting and keeping the statistics on the user). Many factors are taken into account — films viewed by the user, popularity of films, release dates, etc.

Search was made with React Form. Its results are shown on a separate page, which is connected to the site via React Router. The Search demonstrates all the films fit for the search query. For example, if the user enters “Terminator”, all the films of the franchise can be observed on the Search page.

Animation of stars and buttons — implemented with the help of CSS Animation. The animated elements rotate, change color and size.

User’s authentication is done with google auth. In case the user already has a google account, he/she can log in. As a result, his/her full name and profile photo will appear in the application.

It is possible to switch between English and Russion languages.

Teamwork organisation

Kanban was used for the teamwork organisation. This approach allowed us to achieve the maximum clarity for each team member. The screenshot below illustrates our team’s process of development.

Every week 2–3 Skype meetings were held, where current tasks and issues were discussed.

In the first meeting we created the list of tasks which would allow us to produce MVP (minimum viable product). Each team member chose the tasks he/she was interested in or the task which had to be done anyway. MVP approach was the most convenient for us as analysing the results of the development we could make corrections in the tasks themselves, come up with new ideas and thus improve the final product.

The hardest part of teamwork was depending on others in solving particular tasks. It was fairly difficult to coordinate our work. However, eventually we learnt to set dead lines, help each other and, in case some time was available, take the tasks which were on the waiting list. This allowed us to minimise the waiting time and maximise the efficiency of our work.

The Architecture and Custom Solutions

In fact, we managed to create quite a simple and not particularly reusable architecture, which is not probably suitable for product solutions. Nevertheless, this was our first experience of working with this kind of task. The experience was successful as far as learning and skill development are concerned.

For the application building we decided to use React due to the following considerations.

  • First and perhaps the most important, React is one the most popular libraries and earlier in the course we were not allowed to use libraries using vanilla js as the only tool for our projects;
  • It is perfectly suitable for teamwork — strict UI and working patterns;
  • UI code is easy to understand and work with UI based on separate components makes the process of development simpler because it is possible to use already implemented components;
  • JSX — the main benefit is in the fact that the logic of rendering of a component is inseparable from the logic of the user’s interface. There is no need to put the implementation of the component and logic into different files. We create components with both layout and logic;

We chose to use class approach for our components as it was more straightforward for our team in comparison to functional components and hooks.

For the web interface we chose bootstrap as it includes ready-made CSS and HTML patterns, which significantly simplifies the creation of UI and sets certain standards, which are easy to be followed.

Google oauth2 was chosen for user’s authentication. This method is ideal for users who already have a google account. Using React posed its difficulties — it took some time to learn the necessary technology and get used to it. Reach — google — charts were used for creation of graphs where users can see film statistics. Language switching works on i18next. This is an internationalization framework, which was written on JavaScript.

The Course of Development

The beginning of development coincides with the moment of task allocation for the creation of the application MVP.

Anatoliy Kiguradze— worked on page routing, film page development, statistics and settings.

Yuliya Russinova — worked on main page development, WatchList, authentication, translation

Vagiz Musin — layout, header/navbar, footer, application architecture

The full commit account is in appendix 1. Below the screen of the latest commits is shown.

Screenshot of Insight/Contributors на GitHub

Quality control caused the biggest problems in our team. Initially, each team member was developing his/her own repository branch which was called according to the feature.

On completion and after local testing developers sent pull requests to the develop branch and waited for the response of the others. When the corrections were minimal, the changes were merged quickly.

However, if the changes were big, it was problematic to respond fast enough, as we all had our jobs which took at least 8 hours a day.

For all those reasons, we decided to make corrections immediately on the main branch having previously informed other team members.

What was planned but never came true…

  1. Make possible to like the film, which would create a list of similar films
  2. Attach Back End. In fact, it was almost achieved. We could not figure out why it stopped working periodically and in the end decided to get rid of the Back End. The desired structure of the application

3. Creation of unit tests

4. Special page for viewing trailers

Conclusion

As a result of working on the current project we got invaluable experience of teamwork, managed to build a modest application and got accustomed to some features of React.

Appendix 1

Software developer