BBC Clone in just 4 days
--
Yes, that's true, I have built the clone of the BBC News website in just 4 days along with my teammates. the overall collective effort made it possible.
So last week I worked on a group project were we tried to clone the BBC news website. our aim was to complete the working project in 4 days. that was a short period of time but managed it very well and in the end did it.
Tech Stack Used
We are learning React for quite some time so decided to go with it. other stack we used is mentioned below.
1. React
2. HTML
3. CSS
4. JavaScript
Libraries Used
To build a nearly perfect clone and replicate every feature we used many libraries as mentioned below such as,
1. redux
2. react-redux
3. redux-thunk
4. react-loading-skeleton
5. react-toastify
6. react-awesome-slider
7. react-youtube
8. react-player
9. react-social
10. react-icons
Overall Structure and Functionality
we properly followed the layout and structure of the original website and also try to replicate key features properly.
Key Feature
- New User Registration
- Login as Normal User and Admin
- Post New Stories if logged in as Admin
- Database with json-server
HomePage
The Homapage shows different card of news from database which we have created. it also has annoying popup advertisement.
Login Page
Anyone can see the news but if you want to post the news you first have to login as Admin from the Account Page.
After Login there will be an option to post the data, where you can just simply write any news article or your story and it will be displayed on the Homepage’s Latest Story Section.
Search Feature
Users can just search for anything on the search bar and results will be displayed. if there are more than 10 results then you will see pagination also.
To read about any particular article you just have to click on the card and the whole article will be displayed there.
Roles and Responsibilities
- We divided our work based on the most important features and stick to them, such as
- I was creating and maintaining the database, implemented Advertisement and toast feature also.
- Pranit was making the basic UI of the landing page.
- Bhairavesware was dedicated to logging in and Registration pages.
- Priyanka was creating the articles pages and implementing different stuff. - whenever someone stuck we helped each other and make sure that our task gets completed
Challenges faced
- Merge conflicts were the major issue we faced throughout that four days.
- That was our first project with React so we faced a little bit of challenge to manage state and implementing some features.
Conclusion
That was a memorable experience for me because the first time I worked with such a large team. our collective effort and pro-activeness about solving problems made it possible to build such a complex website in just 4 days.
Team Members and Contributors
1. Akash Vaghela
2. Abhinav Raj
3. Priyanka Poshala
- GitHub: https://github.com/priyanka-890
4. Pranit Jogwe
- GitHub: https://github.com/pranit95
