Stand Out! Make Your Portfolio Page Work (Harder) For You.
I am in my final week of the software engineering course at Flatiron school, and it’s time to start thinking about what comes after. It’s no secret that the field that I have chosen can be very competitive and it is important to leave your mark when presenting yourself to potential employers. So, for my final project here at Flatiron, I have decided to create an interactive portfolio page. It will not only grab the attention of the viewer, but also provide and easy and organized way of keeping track of the contacts made from the site.
The main feature is the virtual business card. First a high level overview, then I will break it down a bit. When the user (hopefully a potential employer, or client) fills out the virtual business card, that information gets stored in a database. If the information is successfully saved, they will receive a simple introduction email from yours truly… cool right? Well, there’s more. There is a second part to this portfolio that is not user facing, but provides a very valuable service. A mobile app who’s sole responsibility is to retrieve and organize the information from the database. The mobile app will build and organize the virtual business cards, allow for notes, and show just the cards that have not yet been viewed. Now all of the connections made through the portfolio are organized and in one place.
So, how does all of this work? Glad you asked.
Starting on the user side of things, I’ll give you a quick breakdown of what’s going on behind the scenes. I will not get into styling, but rather the information that matters… how it works.
Using JSX (React) I built out a pretty straight forward, controlled form. As the user fills in the form, all of the information is saved to state for later access. This will also allow me to control the information entered into each field so that I am less likely to get bogus information saved to the database. This is being accomplished via the onChange event. The value of each field is equal to the value of it’s corresponding key in state. As the user enters information the handleChange function is triggered and dynamically sets the state based on the className and value of the target (the field in which they are entering information).
Once the form is submitted, the handleFinalSubmit function sends a fetch request to my rails API to POST the information to the database. Awesome, now I have the information, but it’s not going to do any good just sitting there.
The mobile app, when started, sends a fetch request to the rails API to GET the information stored in the database. Once it has the information, it will build out each card and organize the cards alphabetically by company name (default). This is accomplished by using asynchronous fetch requests via Redux Thunk. Only once the app has all of the information does it try to use the information to build the cards… Obviously it can’t build something with nothing. Cool, I have the information, and I can build the cards… Now let’s organize that information so contacts are easier to find.
This part has room for improvement… there is a pretty strong odor coming from this section of my code, but it works well, and can be refactored in the future. Here, depending on which button is pressed, the cards will be organized by either company name, or the user’s last name. Alternatively, I can also choose to view only the “new” cards (cards that have not been marked “viewed”). This makes finding the person you are looking for MUCH easier compared to trying to search through a list of contacts organized only by the date that they were added.
In the future I hope to add some more features to the mobile app, like an alphabetical navigation bar and a search function to make finding contacts that much easier. I also plan to clean up some smelly code and make the user facing web portion more mobile friendly… v2 coming soon!
Please feel free to check out my portfolio at www.whosadam.com
fill out a virtual business card and leave me a message!
