stephin007/cowin-vaccine-availablity-checker

CoWIN Vaccination Tracker, Below is the PRODUCTION LINK this is updated at end of each day. To see any latest Updates, please check the documentation

Hello World

Hi, I'm Stephin Reji, a budding frontend developer 🚀 from India, currently, working as a Integration Lead at Certa and beside's programming, i love to eat :0.

Connect with me

Skills

Talking about Personal Stuffs:

• 👨🏽‍💻 I’m currently working on something cool 😉;
• 🌱 I’m currently learning React;
• 💬 Ask me about anything, I am happy to help;
• 📫 How to reach me: [email protected]

🏆My Github Stats

cowin-vaccine-availablity-checker's Issues

Revamp About Page UI and content

Is your feature request related to a problem? Please describe.

Right now, the About page contains only one line which does not look good

Describe the solution you'd like

To start with we can add the following:

• Add the list of contributors for this repositories.
• Add a better description of the App.

Add Loading State Component

Is your feature request related to a problem? Please describe.
There is no feature to show loading when the API is not finished fetching.

Describe the solution you'd like
When API is still fetching data, it should show a loading component it can either be a loading gif or a good looking Loading Text

Add Pagination or infinite scroll feature

Is your feature request related to a problem? Please describe.
Right now project does not have paginated results when vaccine data is shown.

Describe the solution you'd like
If we add pagination, this will be easy for the user to go to any page they like.

Any suggestion is welcome regarding this issue

Thanks🎉

NO instructions on how to run or how to use it

Please add Instructions so that we people (noob) can use it also. As we are zero atleast give some gudiance.
I really appreciate you guys but if you would help us also will be really appreciated

Add Test Cases

Please refer this documentation for better explanation:

https://dzone.com/articles/unit-testing-in-reactjs-using-jest-and-enzyme

Adding a floating button while scrolling

Is your feature request related to a problem? Please describe.
While scrolling, the user cannot go upwards at once ..

Describe the solution you'd like
Adding a floating button while scrolling , which onClick should go upwards (input field)

Add Filters for type of vaccine, age, minimum fare etc

Is your feature request related to a problem? Please describe.
RIght now, when data is displayed, there is no option to filter on the basis of
- Type of Vaccine
- Age
- Minimum fare and more.
Adding this filter will help user to drill down their searches.

Describe the solution you'd like
A simple filter which uses filter functionality on the basis of the data coming from the API, this filter must either be dynamic enough to handle all the filter queries at once or create a filter which can give the user option to select only one filter at a time.

In other words: you should create a dropdown which has the filter labels as follows:

• Vaccine Type
• Age Group
• Fare Type

And according to each option you can show other relevant options , say for example if i select vaccine type , i should see another drop just beside the above dropdown which has dropdown option of covishield and covaxin.

So in the UI, User will only see 2 dropdowns!

💡 Additional required information 💡

Make sure you make a general filter so that we can add more filter parameters to the list if we want!
Let me know if you still have any doubts regarding the requirement.

Progressive Web App

Is your feature request related to a problem? Please describe.
Enable the website to be used as a native app by converting the site into an PWA(Progressive Web App)

All Ideas are welcome

Show the cordinates coming in the response in a map component,

Alllow user to directly put the date to show the data about vaccination

SEO

How do we add SEO to this Project?

Any ideas are welcome

Add light~dark mode Toggle

Is your feature request related to a problem? Please describe.
This feature will help to view the app in both day and night

Bug while Loading

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Select a 'state.'
2. Select a 'district'
3. Scroll down to pagination
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

The data returned is not sliced to the point we require!

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.
null

Added Loading State in the about page.

Is your feature request related to a problem? Please describe.
There was no visual to show if the data is loading or not!

Describe the solution you'd like
A circular loader will be added when the data is still getting fetched.

Add Notification functionality

Is your feature request related to a problem? Please describe.
This feature will allow use to get browser notifications when a slot is available

Describe the solution you'd like
Right now, not sure how to achieve this, but found some docs in Mozilla docs : https://developer.mozilla.org/en-US/docs/Web/API/Notification

Would love to assign who have a clear and concise solution for this.

Thanks ❤️

Better UI for Pagination

Is your feature request related to a problem? Please describe.
The pagination UI doesn't looks attractive and responsive ..

Describe the solution you'd like
Planing of using the pagination from material-ui
Describe alternatives you've considered
We can use Html and css ..

Additional context
Add any other context or screenshots about the feature request here.
Null

Height issue in the Contributors section of the About screen

Describe the bug
In the about page, the whole list of contributors is not rendering, its only showing a few in smaller screens, user is not able to scroll down.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'About page'
2. Try to scroll down to see the list of contributors, you wont be able to.

Initial RCA: its because of the max width property given to contributors container

Expected behavior
User should be able to scroll to see the full list of contributors.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Nil

Responsive UI

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Add graphical representation for the data in the world covid info page.

Is your feature request related to a problem? Please describe.
At the moment, In the world page which has information about covid 19 from around th world. it just shows the numbers. it would be better if we can add graphs,pie charts etc

Describe the solution you'd like
The user should not just see number but should be able to visualise the data using graphical methods or pie charts.

Additional context
Contributor should first explain what package or anything they will be using. It would better if we can use react-chartjs

Please comment here if you have any further queries

THANKYOU ❤️

Add Pagination.

App breaking when no state is selected

Describe the bug
if no state is selected, the App breaks when clicked on select state first

fix: Add disabled attribute to prevent the user to click on that.

Better UI suggestions.

Add your comments in the discussions, and that will be take into consideration.

Broken link in readme

Link to the contribution guideline in broken in the readme

Allow user to input the pincode directly to see the data about vaccination slot availability

Add No data found component

Initially a loader should be shown and when data is found, A text should be shown saying that,

NO DATA FOUND SEARCHED DISTRICT, KINDLY CHECK AFTER SOME TIME

Add CovidDetails and Vaccination details from around the world.

Is your feature request related to a problem? Please describe.
This feature will help to check for vaccinations going on around the world and also the covid information from around the world

Describe alternatives you've considered
For this ill be using an open source project which is : https://disease.sh/docs/

Other information

• This feature should have separate page and link to that page should be added in the navbar.
• Name of the page in the UIwill be : COVID19 Info

The above mentioned page will also have the india's COVID info as mentioned in issue #117 , Please check that as well

Adding proper documentation

Adding proper documentation about setting up the project in your local environment may act as a guide for other especially beginners to come forward and contribute

Add Null State Component

Is your feature request related to a problem? Please describe.
This feature will help in telling the user when no data is being received from the API.

Describe the solution you'd like
This component should show "No results found for the entered State, Pin code or Date, Please Try Again"

Marker component to indicate location

Create a marker component to help indicate the exact location of the respective vaccine center in the single-vaccine-card component.

Adding State Management

Is your feature request related to a problem? Please describe.
Right now, all API Calls are scattered over different files, which has drastically increased the number of lines of code.

Describe the solution you'd like
Add State management by using React Context since its a small project.

Show the amount of tests and vaccinations done in india.

Is your feature request related to a problem? Please describe.
This will help the user to view the progress of the vaccination drive currently going on in india

Describe the solution you'd like
A seperate Page in the app which shows all the data which describes the title of this issue

Describe alternatives you've considered
For this we can use an open source project
GH LINK: https://github.com/covid19india/api
Live link : https://api.covid19india.org/documentation/

Other information

• This feature should have separate page and link to that page should be added in the navbar.
• Name of the page will be : COVID19 Info

The above mentioned page will also have the world COVID info as mentioned in issue #116 , Please check that as well

Create A basic Setup for the app.

The incoming user should be able to input the following:

• Date(in a specific Manner)
• Pincodes(need a dropdown)
• State names(need a dropdown)

According to the Above parameters results should be shown in UI.

API Documentation : https://apisetu.gov.in/public/marketplace/api/cowin/cowin-public-v2

It should look somewhat like this:

Add a Hamburger icon for navitems

Is your feature request related to a problem? Please describe.
Right now, the nav items in the mobile view is just placed under the logo, which is not feasible as nav items will increase from time to time.

Describe the solution you'd like
A simple hamburger icon which on clicking should either show navitems as a pushdown menu or anything else, all suggestions are welcome