Stretch Tech Group Project

Abstract:

This application allows users to browse through 12 of the most popular, AKC-recognized dog breeds in America to research and find the breed that's right for them (based on the dog's size, energy level, etc).

Link to deployed app

https://user-images.githubusercontent.com/104015966/211460060-672a183f-7a8a-4e97-b9e2-c3b5f3cad53d.mp4

Installation Instructions:

1. Go to this repo on Github
2. Click Fork > Create New Fork
3. Click Code
4. Copy the SSH url provided by GitHub
5. In the terminal, navigate to the new project repository
6. Type git clone and paste the URL
7. Run cd stretch-dogs
8. Run npm install. Note: Do not run npm audit fix --force. This will update to the latest version of packages, which are not wanted.
9. Run npm start to start the program. (Ctrl + C will stop it.)
10. In a browser window, navigate to http://localhost:3000/.
11. The app should now ready to browse and research dog breeds.

Context:

The team held daily standups and followed a kanban workflow using GitHub Projects. Meetings started by checking in with one another as humans. Then accomplishments from the day prior were discussed, what needed to be done that day and by whom, and then collaborative debugging or problem solving was completed (as needed). Some tasks were completed indivdually, others together. The collective estimate is about 50-60 hours of work time invested over 9 days to create this application's functionality and test suite from scratch using React. The Cypress was used for testing. Router provided the routing. For accessability we chose large font and neutral, high-contrast colors. 100% Lighthouse Accessibility score.

Contributors:

• Dana Tram Truong
• Tricia Holmes
• Colin Ciervo
• Justen Anderson

Learning Goals:

• Incorporating a new technology into an application that isn’t explicitly taught
• Build a backend server with Express, hosted with PostgreSQL using Knex
• Gain competency with React fundamentals
• Test React components & asynchronous JS
• Practice refactoring
• Create a multi-page UX using Router
• Create a user interface that is easy to use and clearly displays information.
• Write modular, reusable code that follows SRP (Single Responsibility Principle)
• Implement a robust testing suite using TDD
• Make network requests to retrieve data
• Work with a local server and make network requests to API endpoints to retrieve and manipulate data.
• Refactor your code to DRY up repetitive logic
• Practice talking about code and high level technical concepts
• Implement feedback to improve product and process

Tech Used:

• Express
• PostgreSQL
• Knex
• TablePlus
• React
• React Icons
• GIMP Photo Editor
• Cypress
• Router
• GitHub
• Terminal
• VS Code
• Chrome Browser/Dev tools + React dev tools
• Lighthouse
• Zoom
• JavaScript
• CSS
• HTML
• Slack
• Google Font API

Wins and Challenges

Wins

• Successfully self-taught back-end technologies to develop a full-stack application.
• Effectively project managed distributed team project using project management tools.
• It's cute :)

Challenges

• Having a 2-week break start after 2 days of project work was challenging. We all felt rusty and a bit disconnected from the challenge at-hand after the break.
• Testing the sliders was very difficult. Even after adding a plugin to add tabability, we continued to struggle using Cypress to test slider inputs.
• Time zone differences made it harder for the group to work in-sync. Everyone's optimal work hours seemed to be at different times.