MiniPic Showcase

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.

What
Why

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 incase 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.

How

Graph Builder

Once the page loads, the JavaScript connects to an API endpoint from which it receives a JSON object containing table names and headers for each table which belongs to the 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.