Covid19
Amid the COVID-19 pandemic, I developed a comprehensive website to track statistics across all countries in the world. Using Figma, Adobe Illustrator, Tailwind CSS, and React.js, I designed a user-friendly interface with a focus on functionality. The back-end, powered by Node.js, managed API requests and database storage using PostgreSQL. The site's interactive dashboard displays real-time statistics, while detailed information for each country is accessible through the front-end. Overall, the project aimed to provide reliable and accessible COVID-19 data to users worldwide.
Technologies used:
Background
The COVID-19 pandemic has had a profound impact on the entire world, leading to an urgent need for a trustworthy source of up-to-date information about the virus. As a part of a personal project, I took on the challenge of designing and developing a website that tracks COVID-19 statistics for every country in the world. To achieve this, I employed various tools and technologies such as Figma, Adobe Illustrator, Tailwind CSS, React.js, and Node.js, which enabled me to create a comprehensive, user-friendly platform.
Objective
The primary objective of this project was to create a website that would offer users accurate and current information about the COVID-19 pandemic, including vital statistics like the number of cases, deaths, and recoveries in each country. Providing this information would empower users to better understand the pandemic and the global situation, allowing them to make informed decisions about their safety and well-being.
Process
I initiated the project by developing the website's design system in Figma, a collaborative design tool that allowed me to create a visual representation of the website's layout, typography, color palette, and components. To further enhance the visual appeal, I utilized Adobe Illustrator to craft custom icons and graphics for the website, ensuring a cohesive and visually engaging experience for users.
For the front-end development of the website, I turned to React.js, a powerful JavaScript library specifically designed for building user interfaces. In tandem with React.js, I employed Tailwind CSS, a utility-first CSS framework, to style the components of the website. This combination of technologies facilitated the rapid creation of a responsive and visually appealing website that adapts seamlessly to various screen sizes and devices.
On the back-end, I relied on Node.js, a versatile JavaScript runtime built on the Chrome V8 engine, to construct a robust and scalable server-side application. This application fetches data from multiple APIs and efficiently delivers it to the front-end, ensuring that users always receive the most up-to-date information.
Result
The finished website provides precise and current data on COVID-19 cases, deaths, and recoveries for every country worldwide. With a visually appealing and user-friendly interface, users can easily navigate the site and access crucial information. The website has garnered positive feedback from users, who have found the information provided to be both reliable and informative. Additionally, various news outlets have featured the website, increasing its visibility and reach.
Conclusion
This project has not only allowed me to refine my skills in design and development but also enabled me to contribute to the public's knowledge and understanding of the global COVID-19 pandemic. I am proud to have played a role in creating this valuable resource that offers up-to-date information on cases, deaths, and recoveries in every country. The combination of Figma, Adobe Illustrator, Tailwind CSS, React.js, and Node.js has proven instrumental in developing a reliable and user-friendly website that serves as an invaluable tool during these unprecedented times.