How we cloned a news website, The New York Times

Hello readers, If you want to know about how one can reinforce his knowledge and skills in web development and implement newly learnt technologies like React and Redux, then you have landed on a right place. Here I will be talking with you how we embarked upon a journey, the journey of cloning a website called THE NEW YORK TIMES. There is no other better way to reinforce knowledge or newly learnt technologies than working on projects and that too in a team.

Lets get started

So we were four people in a team, Rakesh, Lokesh , Suraj and me. The very important part of any project is to lay out a plan and build a strategy regardless of how short or long project might long, Our strategy was to play a role at what we are good at and likewise we divided tasks among us. On the first day we did not directly jump on building the clone but we first brainstormed about the subject . In our first team meeting we discussed about what we will be going to do? and how we will be going to do? and how many times there will be team meetings in a day like that.

Now the real thing

Without going into much nitty-gritty, I am writing below some libraries that we used in this project some are essential and the other are for best look and feel.

• Redux
• React-Redux
• Material UI
• Redux Thunk
• Axios
• Styled Components
• React Icons

APIs

• Weather API
• New York Times’ Search API
• New York Times’ Top Stories API

The main features we implemented in our project are like weather according to the location of user, only subscribed user will see ad free news. User can search about his interesting topics user can see latest news updates, shown with respect to time like minutes ago hours ago or if the news is 24 hours older then it will show month, date and year.

Now some screenshots

Landing Page

Sidebar Menu

World Page

Footer

Search Page

Login Page

Registration Page

Challenges We came across

Always, when we work on any new technology, it is apparent that we will face some challenges, so as we were for the first time working on a React project.

We faced troubles like:

• how to merge codes with other team partner.
• Keeping web pages from distorting their styling.
• Keeping redux store consistent

Conclusion Last but not Least

As I mentioned in the very beginning that it is very important to work on projects after learning any new technology, because it further strengthen your concepts.

Team

• Rakesh Thampy https://github.com/Rakesh-Thampy
• Lokesh Nimje https://github.com/lokeshnimje
• Suraj Bhan Singh https://github.com/suraj588
• Aejaz Ahmed https://github.com/aejaz1995