Have you ever found yourself switching multiple tabs while analyzing data and taking notes at the same time. If yes then this tool is for you by eliminating the friction of fragmented workflows.
My thought Process
Here is a run down and my inspiration for building this tool. During my HNG internship we were given a list of project to pick from and this was one of them. I totally liked the idea of being able to visualize data in charts and display them. I have a background in chemistry and I have worked with a lot of data in qualitative analysis. This was an opportunity for me to do something closely related to my fields and can also be used in any data analysis. In the course of building this I noticed that while viewing the data users will want to take notes of findings and insights as well so this prompted me to add the other part segment of the webapp which involved drafts. I took this a step further by adding a feature to encrypt your drafts/datasets with a standard grade AES-256 encryption which safely secures the data using a password , salt , iv and buffers this to the MongoDB database. Users can decrypt their notes/datasets on demand using their password leveraging privacy of data.
When a user is logged in Datasets can be viewed by uploading a CSV or EXEL file and selecting the type of chart you intend to use. List of charts include bar chart , line charts and pie chart. Here is how a typical chart will look like once a dataset is uploaded.
Taking a close look at the first picture we see the whole array of product sold displayed according to their number of sales.
You have options to filter out particular data and compare it with another option in the dataset hereby helping to narrow out specific niches. The second picture shows exactly how this works, the sales of mouse products was specifically filtered out from the rest of other products and displayed on the chart.
When dealing with large datasets its common practice to want to take notes and make sure key important details are noted so i created a drafts section of the web app where users can successfully create , edit , delete and store drafts securely. It was an insightful process trying to implement the encryption as I learnt about Array buffering which is key to how the server receives the encrypted data before storing this on MongoDB. Here is how an encrypted file looks like in the backend
To retrieve the encrypted file back from the backend and download it the user needs to remember the password that was created when it was encrypted in the first place. If this password is forgotten then the document is lost forever, so always use a password that you can remember. You can also choose to export your viewed charts in PNG, PDF or JSON format as well. The pictures above were exported from the app.
The notes taking porting of the app features drafts, encrypted drafts and trash. Encrypted drafts can be easily accessed with the password created when a user encrypts a draft. Note: The password must not be forgotten unless the draft is lost forever
I also implemented a light/dark theme toggle , an FAQ page and a profile page for better user experience. The landing page use framer motion for animations as well. Authentication workflow is optimized for easy login with google, sign in and sign up fields as well are well validated for strong password protection.
I made sure to also apply the best cybersecurity practices while building this , inputs are sanitized to prevent SQL , passwords are hashed , cookies are authenticated properly and expire after a while , API calls are rate limited and i also applied proper CORS configurations and also CSP.
Here is a live link to the project , You can test it out , play around with it or star the repo.
Resources
sample data to test : download file
live link : https://dataworld-production.up.railway.app/
github repo : https://github.com/maxixo/dataworld-
linkedin : https://www.linkedin.com/in/usman-oshodi-28326b307/
Give me a follow on github as well as i enjoy connecting with other developers as well in this space.
SOCIAL SHARE CARD GENERATOR