Hello everyone! I am super excited to submit my open source project for Netlify x Hashnode Hackathon.

So without wasting any valuable time of yours, let's get started and know everything about my project.

Idea Inspiration

First questions first! How did I come up with this idea? Once I talked to a friend who has diabetes; I asked him how his diabetes levels have been? He immediately responded that the latest test was good and that the stories were just marginally above the average mark. Then I asked about his previous tests to see how has his disease progressed over time. He couldn't remember more than one past test, which intrigued me. If he had a record of his past trials, I thought it would help track at least a year of test results to check and track the disease.

That's when I came up with the idea to build this tool. The plan to make something like this has been on my mind for a while, and this hackathon gave me the perfect opportunity to do it.

About the Project

Were you able to guess anything about the project from the name? No? Okay, no worries, I'll explain. Let's start with the title first. "Diabytics = Diabetes + Analytics" Any idea now ? Yea, you got it right. It is a project to get the analytics of your diabetes test. In short, the project will take your diabetes test stats as input and display them in a graph month-on-month giving a visual interpretation of how your overall diabetes situation has been.

Overview of Project

The project is built on a straightforward idea. So what I am doing here is an email authentication in place to verify the user. Once confirmed, the user is redirected to the dashboard, where the graph with the test stats is displayed.

The user can add new data on the same page, and as soon as new data is added, the recent test result is plotted on the graph. This is the project's current functionality, with more new features on the way.

Here's a short video on using the project :

Tech Stack

This section gives a brief overview of the Tech Stack used in the project. Knowing the project's tech stack will make it easy for you to decide if this project is good for you to contribute or not.

• Frontend - ReactJS and TailwindCSS
• Backend - Firebase ( Authentication, Storage of data)
• Deploy and Hosting - Netlify

Knowledge Pre-Requisites -

• Basic knowledge of ReactJS, using popular hooks like {useState}.
• Beginner-level TailwindCSS knowledge using background colors, flexbox, texts, and fonts.
• Good knowledge of Firebase, its services, and integrating them into code.
• And finally, love for code and web development.

Using the application

As a user, the steps to use the project are pretty simple.

1. Visit Diabytics
2. Create your account by clicking the try now button or logging in if you already have created an account.
3. Upon login, you will be at your dashboard page, where the graph with the chart will be present.
4. If you wish to add a new test result, click on "Add Data" and enter the test results.
5. That's it; the new values will be plotted on the chart.

Setting Up project in local

Now getting to the important part, how can you contribute to the project afterall its and open source. It's straightforward. Just follow the below steps :

1. Visit the Github Repo - Diabytics Repo
2. Clone the repo
3. Install the dependencies using the below command :

npm install

1. Checkout to a new branch (only if you wish to raise a Pull Request to contribute).
2. Create a Firebase account so that you can add the required API keys in the firebase-config.js file.
3. Then enable the following Firebase services: "Authentication," "Firestore Database," "Realtime Database."
4. Then all you need to do is :

   npm start
   

   Note for Open Source Contributors: You don't need to set up Firebase yourself; when you raise a PR, Netlify will generate a build preview where you can check how your change will look in the deployed version.

Future Plans and Enhancements

Reading until now, you would have realized this is a small project and does not have many features. I completely agree. I aimed to put out an MVP that I, along with Open Source Community support, would build upon and enhance the project with many features.

There is a list of features that I have in mind and will work in the future to implement:

• Notification alerts on login and email if the test level is higher than normal by a pre-determined threshold.
• Extending the project to other health tests like Blood Pressure ECG.
• Making it a PWA to have easy access on mobile.
• making the UI more interactive and visually attractive.
• Getting alerts and vital information on smartphones in email or SMS.
• Ability to export the data in different formats.

Links

Here I have listed down all the necessary links which will help you :

1. Github Repo - Diabytics Repository
2. Netlify Deployed Version - Diabytics

Additionally, if you have any questions or suggestions, please comment below or connect with me directly on : Twitter LinkeIN

Conclusion

This was a fantastic event by folks at Hashnode and Netlify. I learned a lot of new things like deploying the site on Netlify, using Firebase to store data, and much more. The best outcome of this event was I got something interesting to engage myself on weekends and in time after work.

I agree this is not the best project or the most feature-rich one. But I am confident I have laid a good platform for a great project to be built in the future. I hope to get a lot of support from the dev community. P.S: There is already one straightforward issue opened for people to contribute.

Finally, fingers crossed for the results!