Spilled

Latest Deployment: July 2024

Spilled

Preview

Demo of user browsing an informational page, a collection of teas, adding favorite teas, and then browsing their saved favorites.

Tech Used

Frontend

TypeScript
React
HTML
CSS
React Router
Cypress
Vercel

Backend

Ruby on Rails
PostgreSQL
Render

Context

I had the opportunity to collaborate with 3 frontend developers to propose, plan, and develop this application in a one week sprint while self-teaching a new technology to use (TypeScript). We used different tools to familiarize ourselves with building a TypeScript React app. One of the resources that was most helpful to me for familiarization with TS syntax were Execute exercises.

The team used vscode’s Codeshare extension during group-coding sessions, but the majority of development happened asynchronously. We managed contributions and tracked progress, sprint tasks, bugs, etc via PR reviews and a Trello project board.

Runner-Up in the May 2024 Turing Demo Comp - see the presentation video below!

Contribution Highlights

Built a Ruby on Rails API using a Postgres database and refactored project to make requests to new BE and dataset - addition of other endpoints and resources in progress. See repo here
Created MVP wireframe for React components and data flow
Developed e-2-e suite of 9 passing acceptance tests
Conducted code reviews of team members’ pull requests
Implemented loading state to improve UX should a lag or delay in data retrieval occur
Refactored error handling elements for more cohesive messaging and displays

Schema

Endpoints

Method	Endpoint	Request Body	Sample Response
`GET`	`/teas`	n/a	`[{id: 2, name: "Assam Tea", slug: "assam", style: "black",...}, ...]`
`GET`	`/teas/:id`	n/a	`{id: 2, name: "Assam Tea", slug: "assam", style: "black",...}`
`GET`	`/user_favs/:user_id`	n/a	`[{id: 1, user_id: 1, tea_id: 2}, ...]`
`POST`	`/user_favs/`	`{fav: {user_id: 1, tea_id: 5}}`	`{id: 2, user_id: 1, tea_id: 5}`
`DELETE`	`/user_favs/:fav_id`	n/a	n/a

Wireframe

What’s Next?

~~Create new backend for tea data (API used during development is no longer available 🍵😅)~~ Done July 2024
Dark/Light mode
Filter feature for All Teas view
Pronunciation audio for tea names

Demo Comp

Turing’s DemoComp is a competition hosted every 6-8 weeks for current students to present their applications as teams or as individuals. Entries are judged by established frontend, backend, and/or full-stack devs.
Participating teams prepare a presentation video and answer questions from judges and attendees about their application(s)