Will Steiner - Software Engineer - Web and Mobile Application Developer

Will Steiner

Software Engineer


People may say art and science are polar opposites, but in my experience they go hand in hand. I’ve always been fond of technology, and for a long time, wanted to pursue a film and television career. I enjoyed transforming an idea into moving images, particularly editing scenes in post production. But, as education may reveal new interests, I discovered the medium of software that has since become my passion. It is an expression of imagination, the challenge of problem solving, and collaboration of many art mediums that drives me toward application development. My portfolio is by no means a master collection or coherent story, but a glimpse into who I am and what I can achieve. Thank you for visiting, and I hope you enjoy.



Mobile Applications

ShopMe

Will Steiner - Mobile Applications - ShopMe
Will Steiner - Mobile Applications - ShopMe
Will Steiner - Mobile Applications - ShopMe
Will Steiner - Mobile Applications - ShopMe

ShopMe is an iOS e-commerce application. Upon starting the application, a collection of products is sorted in to categories and respective shortcuts displayed on the home screen. When a user click's a category a segue transitions to a table view listing the products of the respective category. Within this view, users can add products to their cart, continue to view their current cart, or return to the main menu. From the cart screen, users can change product quantities, empty their cart, or checkout. Upon checkout, users are asked to confirm final price before placing the order. Their cart is then emptied and order added to the recent orders view. In recent orders users can swipe to delete or tap "edit" to delete items by tapping.

This was my first use of UITableViews, UICollectionViews, and data persistence with Swift 2. NSUserDefaults achieved the desired result, but if I were to remake this application I would remember to check CoreData when creating the project. Core data would have allowed for better object handling, offering built methods that I had to make to handle NSObjects. Overall I have gained a better understanding of Table and Collection views and feel comfortable using them in future applications.

GPA Calculator

Will Steiner - Mobile Applications - GPA Calculator
Will Steiner - Mobile Applications - GPA Calculator
Will Steiner - Mobile Applications - GPA Calculator
Will Steiner - Mobile Applications - GPA Calculator

This was my first iOS application. GPA Calculator allows for a user to enter up to four classes with weighted averages for homework, midterm, and final. As values are updated or inserted, the overall GPA is calculated and displayed on screen. Users can also select classes by their id and remove them from the list.

Being my first IOS application I used the auto layout, learning how to pin elements relative to each other. Each text field called a method on value change to update the courses and GPA display. When a new course was added, it’s relative placeholder was made visible and labels changed accordingly. This application allowed me to get a feel for the way iOS positions views and how to update elements at runtime. If I were to remake this application, I feel the use of stack views would greatly simplify the layout. I would also handle input a bit differently, perhaps allowing the creation of a course before adding it to the display. This would allow for points earned/points possible and total weight bounds checking, making sure the values entered are logical.

Student Helper

Will Steiner - Mobile Applications - Student Helper

Student Helper is an educational application consisting of an agenda, calendar, GPA tracker, grade book, and group system. This was a group effort and I was responsible for the group system. Within the “Group” tab, users can create/join groups where messages can be exchanged. This was a proof of concept for future additions to coordinate meeting times, delegate tasks, and share relevant project information.

Using Android.Volley, users’ devices would establish a connection to my testing server to send relevant GET Api requests. On the server I ran a Larval 4 framework to handle requests, execute queries, and respond with appropriate JSON objects. Users were identified by their unique phone numbers, and requests resembled: “GET domain.com/[user_phoneNumber]/fetchUser.” This example would return the user object containing the user_id, nickname, [groups], etc. Where each group object had an id, groupName, course, [members], [messages] etc. When a user navigated to a specific group, a request for the group’s information was submitted and processed to display the group’s messages and other information on screen. Users could then add messages to the group that could be accessed on another group member’s device.


Websites

The Re-Up

Will Steiner - Website Development - The Re-Up
Will Steiner - Website Development - The Re-Up
Will Steiner - Website Development - The Re-Up
Will Steiner - Website Development - The Re-Up

The Re-Up is a music blog, mostly focused on hip hop and electronic dance music. The back end utilizes many features showcased in my implementations section along with a custom “article” posting system. To see the live site please visit the-re-up.com

Campus Card Services

Will Steiner - Website Development - Campus Card Services
Will Steiner - Website Development - Campus Card Services
Will Steiner - Website Development - Campus Card Services

This is a prototype website for the Campus Card Services department. It's navigation is handled through a JSON mapping of the site tree. Example parent nav pages are displayed in the main navigation and may contain sub pages and sub sections. This allows for fluid navigation across the site and dynamic additions of pages. The news section is similar to VCUCard Version Two, where a master JSON file is processed and displays the most recent news on the home page while listing all news in the archive. Hopefully there will be a live link soon!

VCUCard Version Two

Will Steiner - Website Development - VCUCard Version Two
Will Steiner - Website Development - VCUCard Version Two
Will Steiner - Website Development - VCUCard Version Two

This is a prototype redesign of the VCUCard department's website. Visually, the home page repositions the navigation menu based on screen size and as the user scrolls, the nav acts as a fixed element. The most recent news is shown on the home screen and held in a JSON array object. The news archive reads this JSON file and lists all news stories sorted into respected categories in chronological order. Content remains similar to the original design, but features a more responsive frame and more modern look.

Deyxtra

Will Steiner - Website Development - Deyxtra
Will Steiner - Website Development - Deyxtra
Will Steiner - Website Development - Deyxtra
Will Steiner - Website Development - Deyxtra

A portfolio website for Eric Dykstra showcasing his photography and other advertising work. The home page features a custom slideshow with images pulled from a designated album. His about me page, gives a personal story and minor animation effects on his portrait hover. The galleries alternate designs (horizontal reflection) with a title, date, cover and a few images as a "peek". Upon clicking an album, a window appears with the individual images that can be clicked for fullscreen. Similar to galleries, his campaigns showcase multiple pages of pdf documents and upon clicking a page, a user is redirected to that page of the document. Finally, the contact page allows different types of contact that are saved locally before a notification is sent to admins. To see the live site visit Deyxtra.com

VCUCard Version One

Will Steiner - Website Development - VCUCard Version One
Will Steiner - Website Development - VCUCard Version One
Will Steiner - Website Development - VCUCard Version One

VCUCard is the department's website that offers information to students, staff, and contractors regarding their id used on and around VCU facilities. When I started at VCUCard the site was mostly together, but needed some structural changes and features implemented. Such as a new merchant contact form, mobile navigation, and interactive merchant map locations. Along with the initial feature implementations, I was responsible for the maintaining and updating content. Check out the live site at vcucard.vcu.edu

Southbend

Will Steiner - Website Development - Southbend

Southbend was my first full scale website, built for a local construction consulting company. It featured basic admin functions with image upload, text editing, and element additions. Examples include, adding staff, projects, and changing slideshow images. This site is currently offline.


Implementations & Package Development

Text Editor

Will Steiner - Implementations and Package Development - Text Editor

Working with The Re-Up, I realized the headache of dealing with large amounts user input that was to be displayed without say an admin formatting the post to display with correct styles. I designed a basic editor that detected key presses such as enter and backspace to create new paragraph nodes or delete the active paragraph if empty. The writer can also bold, italicize, and add links simply by selecting the desired text and clicking a relevant button in the toolbar. Implementation into the running site simply required the respected styling to be added in the processing between the text editor tab and the parent “article” editor. For example, adding the site specified class “articleContent” to paragraphs allowed the content to conform to site styles.

Image Management

Will Steiner - Implementations and Package Development - Image Management

A major feature in my content management package is image management. Users can upload images to a library easily and are informed with an upload progress bar. Once added to the library, images can be given title, keywords, and other relevant information. Finally, the ability to build collections is also implemented. Users can build an album by selecting images from the library. These collections can then be utilized for features such as galleries or slideshows.

User Management

Will Steiner - Implementations and Package Development - user Management

As part of my content management package, admins can create users to manage their website. Simply by placing authentication requirements on sections of a website, content can be protected from public eyes. This system includes login/logout views, new/remove users, password resets, privileges, and account information such as a profile picture.

Paypal

Will Steiner - Implementations and Package Development - Paypal

More of a proof of concept, I was able to integrate basic Paypal functions into a Laravel based web application. Using the Paypal Rest API a simple web form is presented where a user can input credit or debit information and carry out a transaction. If I were to implement this into a web application, I would set up a database to handle product data and depending on the apps goal, perhaps a shopping cart feature.

Google Maps

Will Steiner - Implementations and Package Development - Google Maps
Will Steiner - Implementations and Package Development - Google Maps

My first experience using maps API, I built a prototype of a path making app. As someone who grew up on the water, you get to know that navigating through creeks can be a bit more difficult then heading the correct direction. I planned that this feature could show local routes on the water, perhaps to aid people kayaking, stand up paddle boarding unfamiliar with the area. It could also be applied on land as well, showing bike, hiking, and other similar routes. I applied a style to the map, making the creek stand out more. As a user clicks, coordinates are recorded and a point is placed, connected to the previous point by a simple line. A more advanced implementation could use a method to create a curved path and perhaps a walk through feature where notes can be added at significant points.

Will Steiner - Implementations and Package Development - Google Maps
Will Steiner - Implementations and Package Development - Google Maps

For VCUCard, I built an interactive merchant locator that utilizes the maps API. Merchant data is stored in a JSON structure that contains: logo path, merchant name, address, contact information, and map coordinates. When a user clicks a specific merchant, the record is fetched and a google map is generated. In an instance where multiple locations exist for a merchant, the map is zoomed to appropriate distance, and each location plotted. Check out the live link vcucard.vcu.edu/rb-locations

Google Drive

Will Steiner - Implementations and Package Development - Google Drive
Will Steiner - Implementations and Package Development - Google Drive

To allow alternate ways to upload photos, rather than direct upload, I implemented the google drive api to access user's google drive library. It performs basic authentication, where a user grants access to their google account. Once permission has been granted, their library is displayed, filtered to just images. As a user selects the intended image, the file is fetched. In my example it is simply displayed in a preview section, but as a backend feature would add the selected photo to the filesystem and perhaps prompt more information like title, author, keywords, description, and other relevant information.

Tide Display

Will Steiner - Implementations and Package Development - Tide Display
Will Steiner - Implementations and Package Development - Tide Display

Requesting an xml feed from NOAA's tide prediction, a PHP script parses annual data and populates a database table for queries. Every row contains a day with the highs and lows along with relevant times and height. On the browser side, a date range is fetched and visually displayed tide information using HTML canvas. Using the bezierCurveTo method, the script plots the highs and lows relative to frame height. For example if the height of the frame was 100px and the height was 6.7ft, the point would be placed at y=67px. The curve calculation was relatively simple, between each high/low point was a mid point where their paths connected. From the perspective of the midpoint, a bezier point was placed x=0, y=high_y or y=low_y. This placement produced an path similar to a wave and at each high/low point the relevant info was displayed.


Return to top