Hands Together
Updated 7.24.2021
A Center for Children
Hands Together is a Santa Ana-based nonprofit working to bring early childhood education accessible to all. Their team was seeking a website refresh, because their former website was visually dated and lacked certain calls to action. Over the course of 16 weeks, our team worked to build up numerous static pages, a shop with payments processed through Stripe, and an administrator dashboard allowing members of the organization to log in and list events and items for sale.
View the completed site here.
View the full project write up here.
My Role
I created the frontend of the shop and item pages, which involved pulling items from the database and dynamically displaying the data. I also built a “shopping cart”, which allowed site visitors to add items to their cart and be able to checkout with those items even after leaving the page or site. This also required numerous checks to the database to see what items were available and calculations of total costs.
As items are listed and sold and as events come and go, the need for images on the website changes. This meant we needed a way to dynamically store images. I set up image hosting with Amazon S3, which allowed us to upload images as items and events were created, and delete them later as needed.
Overall, this was a really exciting project to work on. This was my first time being involved in a full fledged full stack project, and I learned a lot of new tools and technology.
Duration
16 Weeks
Jan - Jun 2021
Team Members
Development
Edward Chew (Me!)
Grisha Bandodkar
Guk il Kim
Nicole Lazovsky
Abhay Thacker
Michelle Tran
Design
Megan Chueh
Sienna Gonzalez
Tools
Node.js
MongoDB
Mongoose
Express
React
Shop Demo
Here's a demo of some of the interactions on the shop pages. It was fun working on pages with so many dynamic elements. Images in the gifs are filler images.