Deployed Project

Overview

Created within a week, Té Cuento is a responsive web application for tea enthusiasts to build community through their love of tea. Imagined as a space where tea meets storytelling, users are invited to explore a limited selection of single-origin Chinese teas and share their insights with the community on a comment board.

Learning Goals:

✔️ Demonstrate mastery of learned technologies: React, React Router, asynchronous JavaScript, End-to-end testing with Cypress
✔️ Create user personas and user stories to describe target audience
✔️ Work within constraints to deliver a product for a niche audience

Link to Project Description

Personal Learning Goal:

✔️ Enhance my understanding of backend technologies, I built a REST API to GET and POST application data:
✔️ Master my understanding of class and functional React components

API Repository
API endpoints: teas | comments

Demo

Home -> Selected Tea -> Form Entry

Selected Tea -> About -> Home -> Page Not Found -> Home

Mobile View

Setup

1. From your terminal, cd to a parent directory
2. Clone down this repository:

[email protected]:stephanieguzm/te-cuento-ui.git

3. cd into te-cuento-ui directory and run:

npm install
npm start

4. Enter the following url in your browser: http://localhost:3000/

Technologies Used

Future Iterations

• Refactor with React Hooks
• Add search functionality for users to search for teas by type or region

Dev Notes

Wins

• Successful GET + POST requests from custom API
• Responsive web design created with custom CSS
• Strengthened understanding of React lifecycle & passing state
• Cypress testing against live API

Opportunities for growth

• React Hooks
• React Router use of history and location objects
• Error Handling

Project Planning

Component Architecture & Inspiration Board

Acknowledgments

• Michael Harrison
• Elle Li
• Logan McCoy

Contributors:

Stephanie Guzman
Github
LinkedIn