Success Stories
A collection of components made for editing and posting articles
Overview
The Problem
There were several success stories from MilTech that didn't have a platform to be created or viewed online. How could I create a few components to solve this problem?
Tools Used
-
Adobe XD (wireframes)
-
React, Express.JS, JavaScript, MySQL (frontend/backend)
-
Webstorm (IDE)
-
Material UI (prebuilt components)
-
Gitlab, Jira (project management)
Background
This project is for the internship I had at MilTech. I worked on the VID (Virtual Industry Day) team. At the right is a description taken directly from the website. I worked at MilTech from May 2021 - May 2023. For more information, click on the link below to VID's website.
"Virtual Industry Day is an interactive database that helps DOD and DHS customers make data-driven funding decisions to accelerate the transition of technology to the warfighter or end user."
Brainstorming
I only had a few requirements for this project, so I was given free range with my designs and ideas.
I was first asked to create wireframes for the front end components.
I had to create four main components: a text editor, a list view of articles, a grid view of articles, and an article viewer. The editor more specifically required a way to view and edit previous articles, and the ability to create new articles.
For the back end, I had to write the basic CRUD operations to create and manipulate the data.
Requirements
Click on the images for the full view
Wireframes
This was my first time using AdobeXD, so the process took quite a long time. The skills I learned from this process have proved to be very valuable in other projects.
Click on the images for the full view
Development
Backend
I used WebStorm as my IDE to develop my components. I first started with the backend which took me the longest. I am not as knowledgeable with backend work, so the process of doing the full stack gave me some good experience.
Frontend
After my backend code was approved by my peers on my team, I was able to move on to the frontend. Creativity and design come easy to me, so the frontend was a breeze. I had a lot of fun coming up with the color schemes and designs.
*I cannot take images of the actual website now as it contains real data which is private*
*The wireframes are nearly identical to the final product*
Usability Testing
Equipment
As a team, we used Jira and GitLab for our project management systems. Whoever tested my code used Git to pull down my branch onto their local machine.
Location and dates
This project took place between mid-February to late August. Testing began around early July and lasted until late August when it was released. My code was tested on my peer's local machines.
Test tasks
There weren't any specific test tasks other than making sure everything was working the way it was supposed to (creating articles, populating articles, pleasing design... etc.). A few people tested my code to make sure all the bugs were caught before launch.
procedure
I shared the link to my merge request to the peers on my team. They then pulled down my code onto their local systems to check that each component worked the way it was intended to. After testing the code, they reported back to me if any bugs needed to be fixed or other suggestions.
Conclusion
What worked well
My design skills for the frontend were the best because that's what I'm most experienced in. Using Jira and GitLab for project management systems also made the process much easier for testing and agile reports.
What didn't work well
I had trouble with the backend for a while figuring out exactly what I needed and how to implement it. Some of the frontend components that were required I hadn't created or worked with yet so those took a while to figure out as well, such as an upload modal for images.
Moving forward
Once my code was pushed into production, there was feedback from the users who wanted added functionality and new features. The website and all of its components are always being improved over time, so I'm expecting to improve my success story component sometime in the future.