Summary of the project:

This project is a "COVID-19 awareness landing page", Build on HTML, CSS, Javascript. The project aims to create awareness among the people about the new COVID-19 virus. The information provided in this project is based on current data regarding the best practices obtained from guidance and publications issued by the health Centers on Disease Control and Prevention.

This project is designed to:

• Raise safety awareness about COVID-19.
• Provide the latest safety guidance.
• Provide instructions on how to correctly wear personal protective equipments.

The project is divided into six different sections. All sections are independent of each other and provides vital information about the COVID-19 virus and their preventive measures.

The division of the different sections are explained below:

Overview:

Whenever the user visit to the page, They will be greeted with this section first. This section contain the overview of the whole project that makes the user familiar with the project topic.

About:

This section is responsible for providing the short summary of the COVID-19 virus with an image.

Contagion:

This section contain the three different ways by which the virus is spreading rapidly from one person to another.

Symptoms:

This section contain various symptoms of the COVID-19 virus with a UI friendly image.

Prevention:

This section provide Four different preventive measures by which one can reduce their chance of getting infected.

Spread:

This section displays the spread of the virus among the whole world by using a fictitious Map.

Contact:

This section contain small information about the designer of the webpage with few contact links to reach out the developer.

The most challenging part of the project:

From the last couple of months I am coding more on React Js, Firebase and using different libraries for styling my recent projects. But this assignment was much focused into the core concepts of the web development. It took me a little while to come back to my old pace, but after reading the doccumentation and few blogs I finally started the project from scratch. The implementation of few concept of CSS like positioning, flex-box was creating a bit trouble in the beginning. But with the help of few tutorials, doccumentation and stackoverflow i implemented them successfully and build the final product.

The most fun part of the project:

Building any project from the scratch is always fun for me. Implementing the core technologies after a while was really a nice experience for me. And after building the final product I was more satisfied with the project because the final product looks more clean then I expected in the beginning.

The good part of the project:

• The final build is the almost the replica of the assigned template.
• I have added some custom animations in the project to make it more interactive and beautiful.
• All the assigned project sections are covered in my build.
• Customized the footer with my skills and make it more informative and interactive.
• Implemented the well commented code along with a professional folder structure.
• The final build is almost responsive for all the devices.

The bad or ugly part of the project:

There is always room for improvement in any project, however good or efficient it might be. But the important thing is that the project should be flexible enough for future modification. This project is build in modules that are efficient enough to introduce and change in future. Some of the modification are needed to make the build fully responsive.

What do I think is wrong with this task or could be made better in this task:

The idea behind this assignment is interesting because the assignment is focusing on the core concept of web development. HTML/CSS and Javascript are the building blocks for any web project and this assignment is testing the in-depth knowledge of web.

But after completing the project i felt like i was not proving myself to a certain level. There are more advance technologies that i know well but haven't implemented in this project. And the last flaw i notice is that the final project is not solving any real-world problem or my code is not bringing out much values. So i decided to code a BONUS ASSIGNMENT that covers the remaining technologies and skills that was missing in this project.

What could be done better if given more time:

• worked more on the responsiveness of the project.
• Added more features like graphs, APIs etc.
• I would have written a well formatted and in-depth doccumentation for the project.

Rating myself on the technologies used in the assignment out of 10:

• HTML: 9/10
• CSS: 8/10
• Javascript: 8/10
• React Js: 8/10
• API: 9/10

About the Bonus Assignment:

After completing the assigned task i felt like their is something missing in the project. The project is a static page which is creating awareness about COVID-19. So I thought of building this BONUS assignment which will cover the remaining technologies and the missing functionality.

Idea of the Bonus Assignment:

In the first round I had in-depth discussion about the role i will be assigned in the company if selected. My task will be to convert the API data into human readable form. So i thought to building something that gives my Proff of work for the same task.

Project Summary:

This project is a "COVID-19 Tracker" which is build with React.js, Chart.js, Material UI, and much more. The project aims to track the real time data of the COVID-19 virus around the globe using API.

Features of the Project:

• The application will provide real time and the accurate data of the Infected, Recovered, Deaths due to COVID-19.
• The Global data is displayed in the form of line graph with Infected and the Death data.
• User can select the specific country from the drop down option available to get the data of the specific country.
• Data of the specific country is displayed in the Bar Graph format.
• User can also view the specific data like only recovered or the death data, just by utilizing the options available.
• Using Nice animations in the application to make it more interactive.
• The Application is fully responsive for any kind of devices.

Project Links:

Github Link: github.com/shivamchawda/React-COVID-Tracker

Live Site: shivam-covid-tracker.netlify.app