Cloning The New York Times
Using React JS, Redux, Material UI and Styled Component
GitHub Link:- https://github.com/lokeshnimje/Pentane
Time flies in pace and another month of learning came to an end. It was really very interesting to learn the most trending JavaScript library and most probably the favorite among the front-end developers. React provides us a great way to create single page applications while maintaining a particular state. But state management is even easier when you are using Redux. So, you can get rid of getting elements by id or class name or create elements manually as in HTML. The best thing is that, just create different functional components and keep reusing it as and when required. This is achieved using JSX.
As part of our curriculum, our team was assigned to clone the website of one of the most famous American newspaper, The New York Times using React. Through this blog, I am going to give a short description of how this project was a success and what are the functionalities we worked upon in building this website.
If you want to have this project in your system, just clone the GitHub repo from the link, follow the readme file and make sure to create react app. Also you will be required to run a mock server for the authentication purpose for login and the email id and password can be found on the user.json file in Utils folder.
So after you run the application, the first page which appears is the home page which fetches data from the New York Times API and shows you the current date’s published news. The page looks like as shown below:
From the Side Navigation menu, you can select from the list of news categories as per your choice. For example, if you select world, you will find the page as shown:
There is also a login page for users and admins to login. If a user logs in, he is directed to the home page whereas if an admin logs in, he is directed to admin page where he is able to create an article based on latest news or story according to his choice. This created article appears in the latest section of the opinion page. Apart from this there is also a share functionality, where a user will be able to share the news articles on facebook or twitter. There is also a search functionality by a user can search any article.
That’s not it ! You can find more in the github repo provided above. We have also used Material UI for styling our pages wherever required.
So, that was a small glimpse of what we built in 3–4 days of the allocated time. Hope you enjoyed it and will love to hear from you for any kind of advice which would have made this project better.
Thanks a lot !
Note: All the image and icon links have been taken from the main website (https://www.nytimes.com) and some other internet sources and may be subject to copyright. So, try not to use the images or icons for business purposes or reproduce it without prior approval from the owner. The images and icons used here are just for making this project and for learning purpose.