Featured Work
I've developed and contributed to sites and apps for major education, tech, business, and arts organizations including: The Textile Museum of Canada, Ryerson Entrepreneur Opportunity Network, Ryerson Image Arts Centers, Staples, New Harvest, Center for Effective Practice, Invatron, Gallery 44, Factor, Downtown Yonge BIA, and Tennis Design. Some of these sites are featured below, alongside projects I collaborated on at Bridge and Juno.
Textile Museum of Canada Exhibition App
PWA | React | GraphQl | Gatsby | Netlify CMS | Netlify Continous Deployment | SCSS | GSAP | ThreeJS
This app was installed on iPads at the Textile Museum of Canada to pair with the ᖃᓪᓗᓈᖅᑕᐃᑦ ᓯᑯᓯᓛᕐᒥᑦ PRINTED TEXTILES FROM KINNGAIT STUDIOS exhibit. It displays all objects at the exhibit and features hotspots on each object page that users can interact with to open multimedia models with more information. A requirement of the app was for it to provide support for offline experience and bad network connections. For this reason, it is built as a Progressive Web App - it uses a service worker to cache data.
See LiveRachel Gerry Portfolio
Bridge Applications App
React | Redux | Unit & Component Testing | Node | Firebase DB | CID | Team Programming | Continous Integration & Deployment | Semantic UI
For the final group project for Bridge, I collaborated in a team of four to build a test-driven application in React using Redux state management that fulfilled requirements posed by a product owner. Requirements were to allow users to create and fill out application forms with different questions types. For the backend, we used Node to get, update and post data to Firebase database. We also used deployment services like Netlify and Heroku for continous deployment of integrated code on Github.
See LiveSee Backend CodeSee Frontend CodeFactor 2019 Annual Report
JavaScript | HTML5 audio | Django Templating | Slick | Waypoints | CSS Animations | SCSS
Awarded an honorable mention from Awwwards, this annual report site features a MP3 player that is linked to every song button across different pages on the site. Using HTML5 DOM methods, properties, and events, users can select which songs to play, and automatically play the next consecutive song on the playlist when the current song ends. Whenever a user navigates to an internal page, the page is loaded into a div, so the page does not refresh and the media player continues playing music without interruption. This site also uses slick to achieve an interesting slideshow with refraction and window blinds effects.
See LiveNew Harvest 2019 Conference Site
JavaScript | HTML | SCSS | Pure-Grids | Youtube API | GSAP | ScrollMagic
New Harvest's 2019 conference website is a stunning interactive single page site that includes a parallax animation of the header on scroll, a smooth and unique navigation animation and clever hover/click states to reveal more information of speakers and schedules. The video modal on this site connects to the YouTube API in order to start the video when a user opens the video modal, and pause the video when they close it.
See LiveRyerson Entrepenur Opportunity Network Site
JavaScript | SCSS | Django Templating | HTML | MailChimp
This fast website for Ryerson's Employment Opportunity program is created using templates so site managers can easily add and remove components on each page, and edit data using the integrated content management system. It features some fun CSS animations for link hover/focus states.
See LiveInvatron Site
JavaScript | HTML | SCSS | Slick | Datamaps
A website for an item management software used in grocery stores. Includes an interactive grocery store map where users can click on different aisles to get more information about how the software can provide solutions according to department.
See LiveCEP Clinical Tools and Blog Website
JavaScript | SCSS | HTML | Django | Slick | Custom CMS
A clinical tools and blog website for health practitioners in Toronto. This site includes several forms and an events section that links up with a user's Google Calendar and social share links for practitioners to share resources.
See LiveReact Native Personal Project
React Native | TypeScript | Expo | React Navigation Library | ES6 | React Hooks | Async/Await
This React Native Application gets colour palettes from artist Matt DesLauriers' github raw files and displays them in screens for users to view. Users can customize their own palette using aggregated colours from the palettes on a modal form. Please note, features of this app like scrolling and the switch input are meant for mobile. For a better experience, try viewing from a mobile browser or simulating a phone device with touch simulation enabled from your desktop browser inspector.
See LiveSee CodeMiranda Schreiber Portfolio
Micro Test-Driven React-Redux Personal Project
React | Redux | Jest | Styled Components | Github API | Async/Await
A personal project that allows you to search a GitHub username and displays that user's information from Github Events API. On change of input, a Redux action is triggered to store the new username state in the redux store, and on submit, a dispatch is triggered to call the Redux thunk. The thunk Async/Await function calls the Github API Events Endpoint to get the information associated with the username. If an invalid username is searched, an action is dispatched, prompting a form error. Otherwise, when user information has been returned with a status of OK, the thunk dispatches two actions: One to hide the form, and another to save the 30 most recent events in an array. I filter through the array twice to display the github username with two lists: the most recent repositories (repos) forked by the username provided and their most recent pull requests. This is a Test Driven Development App. There are tests for all of the components, reducers, and helper functions. It is styled with CSS and Styled-Components
See LiveSee GithubJuno Marvel Comic App
React Router | AXIOS | Firebase Database & Authentication | Team- Programming
This React application lets users search for comics from the Marvel API, and login to save any results to their personal collection. I built collaborated with two team members on this app for the final project of the Juno Web Development Bootcamp in Spring 2018.
See LiveSee CodeJuno Accessible Bathroom Locater App
jQuery | JavaScript | Pair Programming | Google Maps API | Refuge API
Fetching filtered data from Google Maps and Refuge APIs according to user location and form inputs, this site helps users find wheelchair accessible and gender-neutral washrooms. I collaborated on this app with a classmate for the first JavaScript project at the Juno Web Development Bootcamp in Spring 2018.
See LiveSee Code