IndiCov is a platform that works towards helping patients during this pandemic by informing and constantly updating them of the covid stats and available resources. People can visit this site and check in the status of the resource availability according to the states or district wise.
UI/UX Designer & Front-end Developer.
Major League Hacking - Hackathon Project
Inspiration
We were invigorated to create a website that could provide people with the required information they need to know with just a few clicks. We aim to assist the people amidst this pandemic.
Color Palette
Typography
Grid Layout
Landing Page
Resources Page
About Page
How we built it
While designing the project, we thought about which frameworks and APIs we could use. The experience of building this solution was indeed a result of the team effort. By following the Scrum framework, we were able to stay aligned through daily stand-ups, planning sessions, refinements, and reviews at the end of the day.
Interactive Map
An interactive map of india which lets you select each state and check all the covid-19 statistics in that state along with the resources availability such as Oxygen, Ambulance, Beds, Medicine.
Filter Statistics
It also allows you to filter between Confirmed, Active, Recovered, Deaths for each state statistics.
Responsive on all devices
Challenges we faced
The graph was very hard to implement as the Covid19India API is configured for their website. We used the chart-js library to implement the graph as it was simple to use this, but it was compatible with Vanilla-js only. Hence we used another framework, React-Chart-JS-2 which was used for the line graph. Once UI design was done we emphasized the buttons and other tabs, to achieve a smooth Ux we used Material UI for buttons, sidebars, and other components.
Accomplishments
We are proud of the solution we built in how we hope it can contribute to society. We tried to construct our solution as flexible and scalable as possible. We are proud that we could use our experience to build a solution that could benefit humanity and contribute to a better tomorrow.
Hackathon Winner
Best Beginner Hack Winner at Hack At Home II Hackathon organized by MLH (Major League Hacking). Check it out Here
Our Learnings
We learned how to implement graphs using React-chart-js-2, how to solve a real-life problem in the present situation, and the complexity behind planning an appropriate website to meet people's needs. We all worked together on designing our Website on Figma, helped correct the flaws in each other's work. We had meets lined up to discuss the project which enhanced our communication skills. We found the need to support our community and learned how to rift the bridge between technology and humanity.
Future Scope
We also have future plan ready to work on the search for the availability of resources where People could visit this site and check in the status of the resource availability according to the states or district wise. Upon clicking over a particular state, you would see the current status of all the resource availability. On clicking over a particular resource you would be taken over a page where u can search the resource availability, the details of the retailers or service providers which you could than use to satisfy your needs.