IMDb — Clone
It is the construct week of Unit 5 at Masai School, where all the students get projects to work on. The projects are allotted group-wise and a full week is given for the completion of the project, which is actually cloning a website and adding backend functionalities. IMDb was the website we were asked to clone. Sourabh Huppare, Noori Fathima, Ritika Chauhan, Amit Rai and I, Ankita Dhiman had the responsibility to build this E-learning website.
In the initial meeting, the tasks were divided as per the skills and proficiency of the members. All the members dedicated efforts to accomplish the project. It was a journey of ups and downs for us, but with grit we made it eventually.
Before moving on to our work, let me tell you a few things about the website. IMDb (an abbreviation of Internet Movie Database) is an online database of information related to films, television series, home videos, video games, and streaming content online — including cast, production crew and personal biographies, plot summaries, trivia, ratings, and fan and critical reviews.
The tech-stack used in our project includes HTML, CSS, JavaScript, Node.js and React. We made our JSON-server for the database, authenticated using Firebase.
For deploying Backend , we used Herokuapp and for Frontend , we used Netlify.com
Coming to our work, the website landing page can be seen here.
The above snapshot is of the home page that is created by Ankita Dhiman and Noori Fathima which is almost similar to the landing page of IMDb. The header and footer for all the pages in this project were designed . As the landing page was connected to all the other pages, it consisted with much of the functionality in it. It has carousels of all the sections of the website. For carousels, we have used react-carousel npm library.
On clicking any of the element like movies and TV shows, the user is redirected to the details page where he can see the trailer of the same. In the navbar, we have the search option to search for any movie or show. We used JSON-server to store all the data.
For accessing the platform, the user must signup and sign in to the website by giving the details, such as full name, email address and password for signing up and email address and password for signing in. After signup, the user data is stored in the firebase and that data is used for signing in to the website. After signing in, the student comes to the home page.
On movie details page, we see the trailer of the related content and the full cast of the same. We can adjust the video settings like changing the audio, resolution and brightness.
You can also see the details of the items you added in the watchlist on the homepage of the website.
Final Verdict: As you can see in above images the handwork and part performed by each and every member is up to the mark and during merging of all the work at one place we had a look over every part in every detail so that work should be up to the mark. It is not just about coding, it is about problem-solving. I have always believed in learning by building the code. This project could not have been made possible without the contribution of my team-mates.
Thanks for taking out the time to read the whole blog.