Giter Club home page Giter Club logo

pet-furriendly's Introduction

Pet Furriendly

Abstract

Pet Furriendly is a user-friendly application that helps pet owners in Colorado find nearby pet-friendly locations to visit with their furry friends. By providing specific search criteria, users can easily locate destinations that welcome pets. With just a few clicks, users can access detailed information about each place, including the option to visit the website for additional details. Our goal is to solve the problem that pet owners face by conveniently providing them with a comprehensive list of places where their beloved pets are welcome. Because if you're there, your pets should be there too!

Demonstration

giff of pet furriendly

Context

This application was completed over 7 days in Module3 (week 4) of Turing School of Software and Design's Front End Engineering program. The project was built to match the specifications of this project rubric, which required the engineering team to learn a new technology and integrate it into a React app. For our stretch tech, we decided to build a backend for Pet Furriendly. Pet Furriendly incorporated the following:

Technologies used

  • React
  • Router
  • Cypress
  • Node.js
  • Express
  • Knex.js
  • postgreSQL
  • pgAdmin
  • Render, for backend deployment and database hosting
  • Vercel, for frontend deployment
  • PropTypes
  • CSS
  • JSX

Deployed Pages

Wins

  • Through diligent exploration and planning, we were able to devise an effective strategy to tackle the backend development, enabling us to create a deployed API, specifically by:
    • Getting the initial Postgresql backend database set up using Node.js, Express.js and Knex.js
    • Getting the backend database deployed so fetch calls can be made without running the server locally
  • Deepening our understanding of Acceptance and E2E testing using Cypress
  • Implementing a responsive, user-friendly web app
  • Demonstrating effective collaboration skills by working together, meeting for daily standups, and proactively solving problems

Challenges

  • The main challenges all revolved around us diving into new-to-us backend technologies. This required careful consideration and planning due to our lack of prior knowledge in this area. The planning and implementing of this process took several days and extensive research, but ultimately proved successful in the end.
  • Deployment for the backend also proved a challenge, as we had learn to use a cloud deployment service and work through configuration issues.

Improvements

For this project and the time frame given, the MVP or Minimal Viable Produce we mapped for ourselves was to establish and host a database, then build an application that would use that database to display the data, filter through it, and select and view individual pieces of data.

  • Going forward, some ideal extensions would be:
    • Expanding our database
    • Add a calendar and scheduling feature
    • Expand search field to include zip codes and categories
    • Favoriting locations
    • Rating locations
    • Commenting on locations

Installation

  • using the terminal, clone the Front End Repo
  • cd into Pet-Furriendly directory
  • run npm i
  • run npm start

Contributors

pet-furriendly's People

Contributors

tialaaa avatar pma913 avatar hjawad22 avatar priscillaapaxton avatar

Watchers

 avatar

Forkers

pma913 tialaaa

pet-furriendly's Issues

Results component: Priscilla

Results component will render:

  • A filtered list of our locations based off of search criteria
  • each location is a small card with an image of the location, address and rating
  • each location is clickable and takes you to individual page

user story:

As a user, when I submit my search, I am showed a list of all locations that match my search
As a user, I can click on any location to show more information on that location

App component

-State will hold:

  1. Places (array of all database data)
  2. Error (if server fetch returns an error)
  3. Results (array of filtered results)

-Method: call GET request function (imported from API file). Set this.state.locations and this.state.results both with the full data array.

-Method: componentDidMount for initial page load

-Method: Live filter as user inputs into search bar. Also updates this.state.results

-Render:

  • Header component
  • Form component
  • Results component - pass down this.state.results array to be mapped over
  • Error page, if this.state.error exists

Place component (Details page)

Results component will render:

  • a page with the image of selected destination
  • description of selected destination
  • address of selected destination
  • rating of selected destination

user story

As a user, when I click on a destination, I am taken to a separate page that displays information for that specific destination

Error component

Error component will render:

  • error message from failed fetch

Search component

Search component will contain:

  • Container to hold input and magnify glass icon
  • label for input
  • make search input responsive to change
  • filter locations as search input field is filled
  • search by city
  • Button -- optional? (the button seems superfluous if we are using a responsive search bar)

Create an api calls file

  • create file -- api-calls.js
  • create dynamic api call function (anticipate parameter is api URL?)
  • return promise
  • export function

Card component: Priscilla

Card component will render:

  • Image of location
  • Name of location
  • Rating of location
  • Address of location?

Card component will be:

  • A link to the Details page

  • Able to be favorited?

Header component

Render:

  • Title of the app
  • Logo that doubles as Link to main page

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.