A Frontend Development Portfolio Robert Elson
Career Journey
Since the start of my web development career almost 15 years ago, I've worked for a few agencies both freelance and full time, learned a lot from many talented engineers, and designed and developed many different sites ranging from small marketing sites to large e-commerce content management systems focusing on responsive design and cross browser compatibility.
Four years ago, I was hired by Xceleration as a web developer to collaborate with the creative team in order to build our newly designed marketing site. After a few months, the site was completed and I was promoted to Frontend Developer to assist with the development of their enterprise application with a tech stack that includes React, Typescript, Redux, and .NET core. I was introduced to React and Typescript first and quickly became comfortable creating Redux connected components.
Soon after that, I started to get experience working with backend resources to consume data from our API endpoints, troubleshooting issues with requests / responses using Swagger, and reviewing pull requests from other members of my team. I'm now responsible for developing and maintaining any new features that are required from business as well as providing assistance to our offshore team as needed.
I've always been passionate about the combination of technical and visual aspects that make up a well designed application and providing a great user experience for its users.
Technical Skills
Coding Knowledge
Development Tools
Adobe Suite
Case Studies
Address Book
The Challenge: Our application has a product catalog where users can use their reward points to buy merchandise or redeem for travel. During the checkout process, the user previously had to enter the shipping address manually each time. Business wanted a way for users to be able to create/edit/delete multiple addresses in order to have options during checkout.
The Solution: I created an address book feature where users could add as many addresses as they wanted, and could choose a specific address during checkout. Based off of designs from creative, I implemented the UI, consumed the api endpoints in order to add, edit or delete addresses, and set up redux to store the data. It has validation as well, so if a user enters an address that is slightly off or misspelled, the backend will return a better option to choose.
Admin Assets Manager
The Challenge: Our application offers a unique experience for each organization that uses our service. Clients have their own UI that needs to be themed using their brand (fonts, colors, logos, etc). This required a frontend resource to manually upload their assets to Amazon S3 for each environment (QA, UAT, Production).
The Solution: To solve this issue, I created an asset manager in the admin to automate the process and allow anyone with access to the CMS to be able to add assets to QA. From there, anytime we promoted to UAT or Production using Jenkins as our automation tool, the assets would be automatically deployed to the next environment. This solved a couple issues for us. It helped to keep all our environments in sync, and allowed our frontend team to focus on other features in the pipeline.
Client Preference Settings
The Challenge: Our application has a social feed that displays employee anniversaries, achievements, new hires, etc. Some of our clients wanted to give their employees the option to hide information about themselves, so we needed a dedicated preference page for users where they could opt out of the social feed and any other settings that clients may ask for in the future.
The Solution: To solve this issue, we created a section in the admin where we can set up preference options for clients individually, and a place on the client side where users can toggle on and off those preference options. I was responsible for creating the admin UI while collaborating with backend to consume the api endpoints. Each client can now have their own set of preferences where their employees can go to customize certain features of the application.
