Cricbuzz is a very popular sports website which mainly focuses on cricket. It helps individual to catch the live match scores, scorecard, schedules of international and domestic matches along with latest news and videos.
Hello, we are learning MERN Stack at Masai School. During our Unit-4 on this web development journey, we got the group project with our batchmates to clone the website of cricbuzz. We have tried to clone the website in the time span of 1 week only.
- HTML5
- CSS3
- JavaScript
- We have created the navigation bar which has dropdown menu on hover.
- The Homepage of cricbuzz website shows the various Live Cricket Score, Scorecard, Schedules of International and Domestic cricket matches along with Latest News and related Videos.
- User can see Navbar on the top section, some static information on middle part and at the bottom of the page there is a footer which we have build so far in this page.
- We have also made a scorecard of one match which will be displayed by clicking on the first match.
- On the home page there is a option of profile icon clicking that icon will redirect the user to the login page.
- In the login page email id will be asked and then proceed to the otp page.
- On the otp page user will be able to see the otp if user fill the wrong otp it will show an error else it will redirect the user to the payment plan page.
- We have also include the feature of resend otp on the otp page.
- We have also created one my account page where user can see his/her profile, manage subscription and can see older transactions.
- After successful login, user will be shown the payment plan to choose. Choosing the plan will redirect the user to the payments page
- On the payment page user will be asked to fill the basic payment details i.e, card number, expiry date and CVV
- After filling the basic details, the user will be given the otp and submitting the otp will make transaction successful and redirect the user to the Cricbuzz Plus page
- On the Cricbuzz plus page the user will be able to see the premium content.
- On that page we have used the filter to show the data according to the wish of the user, which can be enabled by choosing the buttons on the top after the navigation bar
- On the first day of the project we have decided the role of every member in the team.
- We have divided the task wisely among the team members.
- We organise a meeting daily to know the progress and error if any.
- Main challenge of the whole project was to avoiding conflicts of the name of the variable, class, id name. We have solved it wisely.
- second challenge was to merge the different files in the same final folder.
learning a technology is a different thing and showing what you have learnt is different thing. This project has given us the confidence to showcase whatever we have learnt so far. This project also help us to learn those concept that can't be taught during class. Lastly I would like to thank all the team member of the group who coordinate remotely and let the project go smoothly.
