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
“I am an English teacher and my profession is not related to Front-End in any way. Nevertheless, a few years ago in my free time I got interested in programming. A friend of mine found RS School in Instagram las summer. I decided to test my ability to code and, in case of success, probably try myself in a new profession.
I have done all the projects (not all of them perfectly). Whatever the outcome, the projects and the process of building them got me really involved and excited. The scoring system motivated me highly as well as working as part of a team.
As for the problems, the first project — WEBDEV — was rather too large and complicated for the first project in my opinion. In addition, some of the pure JS tasks were really hard. Overall, for me, time was the main issue as I had to combine work and studies throughout all the course.”
Yuliya Russinova | GitHub: YuPashintseva
“While searching for Front-End courses I found RS SCHOOL. The goal for me was to observe the best examples of web development, improve my skills, find my weak spots and gaps in knowledge. The presence of a mentor together with a team while working on group tasks, interviews with experienced developers and interactive webinars for students were especially useful for me.
The hardest for me were the first tasks on web layout. In general, it was quite difficult to combine the course with work for half a year. That, however, was worth the effort. ”
Vagiz Musin | GitHub: vegas-muffin
“My name is Vagiz and I am from Kazakhstan, Kostanay city. My background — a teacher of ICT. At the moment I work as a system administrator. Recently, I have been considering shifting my career in the direction of web design.
My enrollment into RS School happened by accident. I had been doing a Udemy course and watching various developers on Youtube when on Egor Mal’kevich’s channel I saw in the comments a link to RS School. Having explored the site, I was astonished at the fact that everything was free and decided to give it a try. In the course I completed almost all the tasks apart from Core JS due to the lack of time.
I came across numerous difficulties while dealing with the tasks. It was not always clear how Flex-box works, JS array methods ( like: map, reduce,filter) were sometimes hard to grasp. There are also such JS features as: fetch, classes, promises, closure, which I understood only partially. Anyway, I am going to work on them again.”
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…
- Make possible to like the film, which would create a list of similar films
- 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
