Just a few weeks back I wrote a blog post describing my initial experience in Masai School, and as people say time flies, it actually does. We have reached the last week of our Unit 2 which is the construct week in Masai School. During this week the students are assigned group projects to apply the skills learnt during the classes on real life projects.
Students were divided in groups of 6. Each group got a project to clone a specific website within a time span of 6 days.
Our group was assigned the cloning of the royalenfield.com website. Royal Enfield, popularly known for its Bullet series of bikes, is one of the oldest motorcycle manufacturers in the world.
Group Members:
- Abinash Panigrahi (myself)
- Ayush Anshu
- Suman Kumar Khan
- Gaurav Kumar
- Sunil Sahu
- Rohit Kumar Gupta
Tech Stack used:
- HTML
- CSS
- JavaScript
- LocalStorage in JavaScript to store data
Initial Phase:
On the first day we created a group on Slack and had our first zoom meeting. We discussed the general flow of the website. We discussed the essential features of the website that needs to be cloned for our project.
We concluded that the landing page needs to be perfectly cloned as this is what the user sees when he opens a website.
Development Phase:
The first challenge was that the page consisted of many dynamic elements. It contained a top video banner and an image carousel of different bikes. For the image carousel we took help of the Bootstrap CSS framework. We have used bootstrap CSS to create the carousel. The finished landing page looked like this,
We also developed the bikes viewing gallery, log-in page and sign-up page where the user can either create a new account or log-in to website. The details are stored in localStorage of the web browser.
E-Commerce Features:
We developed an e-commerce feature where the user can buy branded Royal Enfield Jackets from the Apparel section. Users can filter the products as per price/size and can also sort products as per name/price. Users can also use the search feature to search a required product. Users can add a product to the cart and make payment to confirm the order. As of now, the data is hard-coded. But in future we plan to link this to a database.
The jackets section and shopping cart section is completely dynamic. This section is completely developed using Javascript DOM Manipulation. Jackets database is stored in the localStorage and this is used to create the entire display area. Sorting, searching and filter functions are also implemented using DOM manipulation.
Challenges:
The journey was definitely not easy and we faced many challenges during our project collaboration:
- Working in remote
- Using Github for first-time
- Managing conflicts while merging codes
- Fetching jackets data from the website. We finally created a hack using a custom created input form to store data locally.
- Reading and debugging each others’ code.
- Working on responsiveness of web pages
Summary:
That was a brief summary of how we collaborated and completed our project. It taught us how to apply our skills on a real-life project. It also taught us how to work in a team which is a very essential feature of corporate life. Finally, we would like to thank our instructor Chandra Sekhar sir and theMasai school for giving us this wonderful opportunity.
You can view our project on below link.
Thank You. I hope you enjoyed the reading.