Wireframe Sketches
We started the development process with some rudimentary sketches for how the site would work. This included considerations for both desktop and mobile, as well as interaction patterns that would be used throughout the site.
High Fidelity Designs in Sketch
Once we were in agreement about the rough ideas for the website, I took the sketches and turned them into more realistic mockups in Sketch. This allowed the team at Duke to understand in a concrete way what the experience would be like for users, as well as make changes before development began.
Development with Firebase & React
I choose to use Firebase as the backend for this site because of it’s real-time functionality, low maintenance costs, and the ability to write “sever side code” with Cloud Functions. The main app was served by a create react instance on Heroku and the cloud functions were uploaded to Firebase. I also built an explicit response filter into the backend processing of responses to protect the site from malicious behavior.
Result
The final result turned out much like the designs and functions as intended. We deployed the project on time and it received modest usage from the student body.