Latest Deployment: April 2024
Stardew Friends
Deployed Link | Repo LinkPreview
Demo of user searching for a Stardew NPC, adding a bestie, then viewing all besties. Users can also track individual friendship levels with each bestie.
Tech Used
Frontend
- TypeScript
- React
- HTML
- CSS
- React Router
- Cypress
- Vercel
Backend
- Express
- Node
- Render
Context
I built this full-stack project as my showcase during the 3rd of 4 innings of Turing’s School of Software and Design Front End Engineering program. One of my favorite parts of the Stardew Valley game is forming friendships with the NPCs, but there are a lot of details to try to keep track of! This app gives quick access to useful information about NPCs like birthdays and favorite gifts. Users can also keep track of individual friendship levels.
This was my first time building an API to consume in a frontend application. As a frontend developer, building the endpoints that I would be using in my requests was a fun and exciting challenge! There are a lot of opportunities to enhance the API and learn more backend technologies that I’m looking forward to working on next.
Highlights
- Created user personas to include in project proposal
- Accesibility audits completed with Chrome’s Dev Tools Lighthouse, WAVE evaluation tool, and Dalton Colorblind extension
- Includes e-2-e suite of 6 passing acceptance tests testing user stories and error handling
- MVP user stories and new feature tickets include acceptance criteria
- Original Express/Node API features handrolled data and endpoints for each CRUD method. See repo here
Endpoints
| Method | Endpoint | Request Body | Sample Response |
|---|---|---|---|
GET | /api/v1/characters | n/a | [{id: "1", name: "Abigail", hobbies: ["playing flute", "mining", "playing video games"], avatar: "URL"}] |
GET | /api/v1/characters/:id | n/a | {id: "1", name: "Abigail", hobbies: ["playing flute", "mining", "playing video games"], avatar: "URL"} |
PUT | /api/v1/characters/:id | {hobby: "shopping", avatar: "newURL"} | {id: "1", name: "Abigail", hobbies: ["playing flute", "mining", "playing video games, shopping"], avatar: "newURL"} |
POST | /api/v1/characters | {name: "Ellis", hobbies: ["hobby1", "hobby2"], avatar: "URL"} | {id: "2", name: "Ellis", hobbies: ["hobby1", "hobby2"], avatar: "URL"} |
DELETE | /api/v1/characters/:id | n/a | n/a |
Wireframe
What’s Next?
- User authentication
- Search characters by info other than name (e.g. favorite gift)
- Update endpoints for friendship tracking and other more relevant operations
- Create Ruby on Rails app to replace current BE
- Host images in BE instead of FE so they’re accesible for use in other applications
- Featured Character of The Day
Developed by Tayla Phillips
← Back to projects
