The What

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.

The Why

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 How

Technologies

Front End	Backend	Other
HTML5	Python	Docker
SASS	Django	Docker Swarm
JavaScript	PostGreSQL
React
Redux

Data Loader

Front End

The data loader page allows users to upload their CSVs and define any primary and foreign keys.

When the loads, the JavaScript reaches out to an API endpoint which returns a list of tables which belong to the user. This is used to provide additional options when the user is selecting their 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.

Once the user is ready to upload their CSVs, the JavaScript creates a JSON object which contains the CSV contents, headers and metadata which describe the field types for each column, primary and foreign keys.

Back End

The system firstly sanitizes and validates the data. A second validation is done in case the user has tampered with the JavaScript.

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.