VisualCSV is a website where users are able to upload their CSVs and then build graphs based on the data from the files.
Users would firstly need to create an account, then upload their CSVs via the data loader page.
Users are then given the opportunity to select their primary and foreign keys, and once they are ready to upload, the data is converted to JSON and along with some metadata, the data is posted to the backend.
This then creates tables for each CSV uploaded and builds the columns based on the metadata provided. A separate table keeps information regarding which table belongs with which user.
With the information updated, the user is able to access the graph builder page where they are able to create graphs using a React interface.
I have used Django to build websites in the past and have used React to build a Tetris game. I wanted to combine the two and build a website that uses both Django and React.
The project also involved with working with multiple databases. This encouraged me to consider better designs to promote scalability.
Finally, this was an opportunity to practice Docker - a technology which I had recently learnt. I wanted to ensure that the website I was building was sufficiently large to warrant building multiple custom images.
The data loader page allows users to upload their CSVs and define any primary and foreign keys.
The user is then able to upload their CSVs. The system attempts to parse each file. If it fails, then it informs the user that the file is incompatible. If successful, it reads the headers, contents and determines the field type for each column. This is all stored in the Redux store.
The system then connects to the client database and creates tables for each CSV. It also updates a separate table which indicates which CSV belongs to which user.
The data is used to form part of the UI and provide the contents for the tables from which the user is able to drag each header freely to and from the x-axis and legends area. Whenever the user drops a header in any of these areas, the system checks if data for those columns exists in the Redux store. If it does not, it reaches out to another API endpoint which returns the contents of that particular column. The store is updated with the contents for that table and the graph updated.
The user is also then presented options to change the design of the graph. This includes titles, colours and graph types.