IP Address Management System

I am a part of a small group during the web developer bootcamp that was pulled out to do a work-ahead project with Vue.js. Last bootcamp's cohort left an unfinished group project for a client who needed an IP Address Management system to replace the current spreadsheets he was using. We were tasked with redesigning the site and converting as much of their frontend code as we could from AngularJS to Vue.js during the one-week timeline.

Goal: To convert a previously unfinished bootcamp project from AngularJS to Vue.js and redesign the frontend of the site.

For this project, myself and three others were given project specs and access to the unfinished code and interface that the previous group had built. After spending a few hours researching and chatting about how IP addresses and subnets work, I started whiteboarding and leading the group on an exercise to map out exactly what each of the main three tabs (Sites, Subnets and Equipment) would need to show.

The result of our whiteboarding exercise.

We then split up responsibilities for the rest of the afternoon and then the night's homework - looking into possible frameworks to use, researching and comparing AngularJS to Vue.js and turning the wireframes to high fidelity the screens. You can view more of the hi-fi screens on InVision.

Wireframe of landing page.
Wireframe of subnets table.
Hi-fi design of landing page.
Hi-fi design of one of the form pages.

The next day, I presented the hi-fi designs and the rest of the group members presented their research on the other topics. After discussing a general gameplan for next steps and what we wanted to accomplish in the first week we had, we then went about listing out the components that we had to build with Vue and I wrote out light stories using Trello for us to keep track of our work.

After deliberation about what tools to use to build the frontend, we decided to go with the framework Vuetify. Conveniently, it is heavily based on Google's Material Design UI, which I modeled a lot of the designs after. This made for easy, out of the box creation of components with minimal styling (though I do really love experimenting with CSS!). After that, it was off to the races to build what we could the rest of the week! There was some solo coding and some pairing for more complicated components, such as data tables and filters. This is what we have after two days of planning/designing and three days of developing and styling components:

You can view the GitHub repo for this project here.