The Problem
Have you ever found yourself switching between multiple tabs while analysing data and taking notes at the same time? If yes, then this tool is for you, eliminating the friction of fragmented workflows.
My Thought Process
I built an all-in-one web application that combines data visualization and secure note-taking. This tool is designed to streamline the process of analysing datasets and recording insights, all within a single, easy-to-use interface.
Here is a rundown and my inspiration for building this tool.
During my HNG internship, we were given a list of projects to choose from, and this one immediately stood out to me. I was immediately drawn to the concept of visualizing data in charts and bringing numbers to life. With a background in chemistry and extensive experience working with data in qualitative analysis, I saw an opportunity to build something that resonated with my expertise and could benefit anyone working with data.
In the course of building this, I noticed that while viewing the data, users would want to take notes on findings and insights. This prompted me to add the draft section of the web app. I took this a step further by adding a feature to encrypt your drafts and datasets with military-grade AES-256, securely protecting the data with a password, salt, IV, and buffers before storing it in the MongoDB database. Users can decrypt their notes or datasets on demand using their password, leveraging privacy for their data.
Key Features
Data Visualization
Once logged in, datasets can be viewed by uploading a CSV or Excel file. You can then select the type of chart you intend to use. Chart options include bar, line, and pie charts. Here is how a typical chart will look once a dataset is uploaded.
Screenshot of product sales chart.
[This image shows how filtering specific data (e.g., mouse products) provides focused insights within the visualization.]
Taking a close look at the first picture, we see the entire array of products sold displayed by their sales volume. You can filter for specific data and compare it with another option in the dataset. This helps to narrow down specific niches. The second picture shows exactly how this works. The sales of mouse products were specifically filtered out from the rest of the products and displayed on the chart.
When dealing with large datasets, it is common to want to take notes and make sure key details are recorded. I created a drafts section in the web app that lets users create, edit, delete, and securely store drafts. Implementing encryption was insightful for me. I learned about array buffering, which is key to how the server receives the encrypted data before storing it on MongoDB. Here is how an encrypted file looks in the backend.
Screenshot of encrypted draft file as stored in the MongoDB backend. This highlights end-to-end encryption and secure data storage.
Export Options
To retrieve and download the encrypted file from the backend, the user needs the password used during encryption. If the password is forgotten, the document is lost forever. Always use a password you can remember. You can also export your viewed charts in PNG, PDF, or JSON format. The pictures above were exported from the app.
Screenshot showing exported charts in PNG, PDF, and JSON formats, demonstrating flexible export options for analysis or sharing.
Secure Note-Taking
The note-taking portion 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 and cannot be unlocked
[Screenshot of the note-taking interface, displaying drafts, encrypted drafts, and the trash section for managing notes securely.]
Additional Features
Other notable features include a light/dark theme toggle, an FAQ, and a user profile page for a seamless experience. The landing page is enhanced with Framer Motion animations. Authentication is streamlined with Google sign-in and robust validation for strong password protection.
Security & Best Practices
I prioritized security throughout the development process. Key practices include:
Sanitizing inputs to prevent injection attacks
Hashing passwords securely
Authenticating cookies with appropriate expiration
Rate-limiting API calls
Applying proper CORS and CSP configurations
Tech Stack
Frontend: React, Framer Motion
Backend: Node.js, Express
Database: MongoDB
Security: AES-256 encryption, bcrypt
Deployment: Railway
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; I enjoy connecting with other developers in this space.
Top comments (0)