The Times Of India — Cloning Project.

Gayathry JM
4 min readMar 21, 2021

The Times of India (TOI) is one of the oldest and classic newspapers available in India. It is an Indian English-language daily newspaper and digital news media, owned and managed by The Times Group.

As a part of my journey to become a Full Stack Developer, I along with my team Propane consisting of 3 more members, Vishal Kumar, Divya Prakash, and Pavithra, have tried to clone The Times Of India website, including a few functionalities, within a specified time.

Tech Stack Used 💻

  • HTML
  • CSS
  • Java Script
  • React.js
  • Redux

Libraries and Packages 🌟

  1. React-Redux
  2. Axios
  3. React-Router-dom
  4. Redux-Thunk
  5. Material UI
  6. Ant design
  7. UUID
  8. draft-convert
  9. draft-js

Accomplishments

At the end of our project, we were able to develop a website with the following pages having some awesome features. Given below is the map you would require if you use our cloned website:

  1. Register and Login Page
  • Make sure you do this process to land on the Home page. If you are a new user, you need to Register and then login.

2. Home Page

  • The Home page displays all the latest news.
  • Majorly, there are 3 active links in the navbar using which you can go to different pages. They are Business, Tech, and Blog.
  • You can also see the live advertisement running in the background and has a feature of removing the Ads, If you wish not to see those.

3. Business Page

  • The navbar here also contains 5 active links. They are Business, India Business, International Business, Tax Calculator, and the Home button. On clicking the links, you will be redirected to that section.
  • Here, you can see news depending on the genre of the news. You can click on any of the news randomly and you will be landed on that particular news.

4. Individual News Section

  • Every page has a comment box where you can express your thoughts as well as Like and Share the news. Also, you can sort the comments based on different categories.
  • The last section shows all the Related news. It displays on the basis of the news that you have chosen to read.

5. Search Bar

  • The NavBar has the search feature attached to it. You can search for any news and you will be getting the respective news results.

6. Tax Calculator

  • Ever got confused about how to calculate the tax? No worries, we have implemented the feature of calculation of Tax for you!
  • All you need to do is, follow the process, enter the amount on the input box and you will be given the Tax amount based on the Existing Tax slab and New Tax Regime. You will also be getting which one of them is the best for you to opt for.

7. Tech Page

  • Visit the Tech page from the Home page NavBar to get to know about the latest Tech News.

8. Editor? Then, Post A News

  • Are you an Editor? If yes, then you can access the Blog Post page and add news to any section you want to. You can post new news with the headline, news body, and image link for the news of any category.

Thanking Note

Thank you Reader for sticking till the last. Hope you liked the post. Also, thanks to my teammates with whom I had a very good experience and could learn a lot. We helped each other to eliminate our weaknesses and had the same commitment level to complete this project.

I would like to thank Masai School for their constant support and guidance throughout the project.

Actual TOI Website Link :

The Times Of India

Our Git Link :

https://github.com/Vishal643/propane

--

--