AdoptMeNow is a full stack, MVC (Model-View-Controller) application that connects people with animal welfare organizations (AWO) in their area and helps streamline and simplify the pet adoption process. With this application, you can do the following:
- Take a compatibility assessment and receive suggested pets that reflect your personality, preferences, and interests.
- Save your assessment results.
- Search for adoptable pets at animal shelters in your area based on your assessment results. You can search by breed, type, gender, and age.
- Add the pets that you might consider adopting to a favorites list, which allows you to quickly look up those pets and their contact information later
- Live
- Screenshots
- About this project
- Contributors
- Getting started
- Structure of the project
- Technologies used to create app
- Design improvements
- Issues
-
View object: A view object is an object in the application that is visible (in the user interface) to the end user of the application. The view displays data from the application's model and learns about any changes to the model data via the controller. For example, in this application, the user clicks the Like button next to the name of the pet that they want to add to their favorite pets list. The view communicates the pet information associated with the Like button via the controller to the model.
-
Controller object: A controller object controls the flow of data between the view and the model (that is, the controller is an intermediary between the two). The controller interprets any user changes made in the view and communicates the changed data to the model. Also, if the model were to change, the controller is what communicates the updated data to the view so that the user can see the updated data in the user interface.
-
Model object: A model object manages the data. When data is created or changed by the user in the view (for example, a user takes the pet compatibility assessment and saves the results), that change is communicated via the controller to the model. Also, when data is created or changed in the model, the model communicates that change via the controller to the view, and the view displays the updated data to the user.
- https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
- https://docs.microsoft.com/en-us/aspnet/core/mvc/overview
- Back End Developer: Amin Kedir
- Back End Developer: Robin Bertuccelli
- Front End Developer: Joy Hollela
- Front End Developer/Project Manager: Phil Stubbs
- Clone the repository
- Install Node.js
- Install the dependencies
- Install MySQL Workbench
- Set up a development database
- Verify database connection information
- Start the server
https://pet-match-app.herokuapp.com/
This project is a full stack application that helps simplify the pet adoption process. The application is meant to help connect you with animal shelters and pet rescue organizations in your area.
When you first start using the app, you will be taken to the home screen. When you get to the home screen of the app, you have two options. You can log in to the app using Facebook and take a compatibility assessment, which takes you through a series of questions and matches you with a pet based on your personality, preferences, and interests. After you take the quiz, you will get your results back, and you can use those results and the pet search feature to search for matching pets in your area. At the end of the quiz, you also have the option to save your results to view later, which saves them to the My saved pets page as well as to the MySQL database.
If you don't want to take an assessment, you can skip the quiz and go straight to the pet search page to search. When you are searching for pets, you can refine the search by searching on gender, age, breed, and pet type. When you perform a search, the search results return the name, age, shelter ID, shelter contact information, and a short description about each pet. Also, you will notice that each pet has a Like button associated with it. If you find a pet that you might want to adopt, click Like next to that pet. Liking a pet adds that pet's name and the shelter contact information to the database and to the My saved pets page. The My saved pets page contains both the assessment results (if you chose to save the results at the end of the assessment) and a list of liked pets. If you decide that you are no longer interested in a pet that you liked, you can remove the pet by clicking Remove from list, which deletes the pet from the user interface as well as from the MySQL database.
This project uses MySQL, Node.js, Express, Handlebars, Sequelize, and Semantic UI. Node and MySQL are used to query and route data in the application. Express is the backend web framework used for this application, and Handlebars is a templating language that is used to generate the HTML. Semantic UI is a CSS framework that is used to design and build the front end part of the site. Sequelize is an ORM (Object Relational Mapper), which helps in managing database queries in an effective manner.
This project also follows the MVC (Model-View-Controller) design pattern. The MVC design pattern assigns objects in the application one of three roles (model, view, or controller) and defines the way the different parts of the application communicate with one another.
For more information about the MVC design pattern, check out the following resources:
The following section will take you through the steps of setting up this application and getting it running locally on your computer.
If you don't want to set up this project locally and just want to see the deployed application, go to https://pet-match-app.herokuapp.com/
To set up this application locally on your computer, perform the following steps:
The first step is to clone the project repository to a local directory on your computer. To clone the repository, run the following commands:
git clone https://github.com/robinb242/PetMatch.git cd Pet Match
After you clone the repository, navigate to the project root directory (PetMatch). The project directory structure is set up as follows:
-
server.js: This file does the following:
- Defines and requires the dependencies, including express, body-parser, and express-handlebars.
- Sets up the Express server.
- Sets up the Express server to handle data parsing using body-parser.
- Points the server to the API routes, which gives the server a map of how to respond when users visit or request data from various URLs.
- Defines the port the server is listening on.
- Starts the server.
- Allows the app to serve static content from the public directory.
-
public: Contains the static, front end content (images, Javascript, and CSS).
- assets/css/style.css: External CSS stylesheet.
- assets/img: Contains the background image used in the app.
- assets/src/modals: Contains the front end Javascript that opens the modals in the application. assets/src/petDelete: Contains the front end Javascript used to delete a liked pet from the My saved pets page as well as delete the compatibility assessment results.
- assets/src/petSearch: Contains the front end Javascript that allows a user to search for a pet. When a user fills outs the pet search form, a query is made to the Petfinder API based on the user input from the search form. The matching pets are returned from the API and displayed to the user in the application user interface.
- assets/src/petMatch: Contains the front end Javascript used to run through the list of assessment questions and come up with a potential pet match for a user.
-
models: Contains information used to manage the application data and interact with the database. The models describe the structure of the database tables, and the datatypes that each column of the table can contain. For this project, the database includes two models:
match.js: This defines the sequelize model for saving users' assessment results to the MySQL database. The model defines a database table that has two columns (one for the assessent results and one for the match rating).
-
db/schema.sql: Contains code that you can run to create and set up a MySQL database locally on you computer.
-
config: Contains the config.json file, whic includes the code to connect Node to MySQL.
-
controllers: Contains two files.
- petMatchController.js, which contains different routes for getting and posting user assessment results. These routes are used to pass information to and from the view and model objects.
- savedPetsController.js, which contains different routes for posting liked pet information to the database, getting pet data from the database, and deleting liked pet information from the database.
-
views: Contains the Handlebars files, which are small, resuable blocks of code used to generate the HTML files.
- package.json: Lists the project dependencies (third party npm packages) and their version numbers.
- .gitignore: Anything listed inside this file will not be tracked by GitHub when code is committed.
- package-lock.json: Dependency tree for the project. Lists all the dependencies and their versions.
- data/animal.js: This file includes an array of objects, which is where the pet compatibility data is stored.
<li><p><b>pets.js</b>: This defines the sequelize model for saving any pets that the user likes to the MySQL database. The model defines a database table that includes columns for pet name, pet shelter location, shelter contact information, and whether or not the user likes the pet.</p> </li> <img src="readme_images/pet_model.png">If you don't already have Node.js installed on your computer, you can install the latest version here: https://nodejs.org/en/.
The following npm packages are dependencies to the project.
After you clone the repository to a local directory, change directory to the project root directory and run the following command to install the required npm packages:
npm install
- express - a Node.js web application framework (https://www.npmjs.com/package/express).
- body-parser - used to parse incoming request bodies in a middleware. (https://www.npmjs.com/package/body-parser)
- dotenv - used to retrieve the Petfinder API key from a .env file (https://www.npmjs.com/package/dotenv).
- mysql2 - used to create a connection to the MySQL database via the command line.(https://www.npmjs.com/package/mysql)
- express-handlebars and handlebars - allows you to use handlebars to create templates to build the HTML.(https://www.npmjs.com/package/express-handlebars)
- sequelize - sequelize is used as the project's ORM to manage and simplify queries to the MySQL database.
Version information for each of these packages is available in the package.json file in the project root directory.
If you don't already have MySQL Workbench installed on your computer, you can install the latest version here: https://www.mysql.com/products/workbench/
For this project, MySQL Workbench is used to visually design, create, and manage the database used to store pet data.
To set up a development database that you can use with this application, perform the following steps:
Open the db/schema.sql file and paste the contents of this file into MySQL Workbench.
Execute the following statements:
CREATE DATABASE petMatchDB; USE petMatchDB;
Running these statements creates a database called petMatchDB and sets it as the current database being used.
Open the config/config.json file and verify that the database connection information (host, username, password, and database) in the development section reflects the database you just created.
Modify the connection properties as needed to reflect your database instance.
For example:
{ "development": { "username": "root", "password": "", "database": "petMatchDB", "host": "127.0.0.1", "dialect": "mysql" },After performing all of the setup steps in the Getting started section, navigate to the project root directory (PetMatch) and run the following command to start the server:
nodemon server.js
If you don't have nodemon installed on your computer, you can also start the server by running the following command. However, every time you make a change to the server, you will need to restart the server to view the change in the user interface.
node server.js
To verify that the server has started and the application is working locally on your computer, open Chrome and go to http://localhost:3000.
- Node.js (https://nodejs.org/en/)
- MySQL (https://www.mysql.com/)
- Express (http://expressjs.com/)
- Sequelize ORM (http://docs.sequelizejs.com/)
- Javascript
- Facebook authentication (https://developers.facebook.com/docs/facebook-login/web)
- HTML
- CSS
- Semantic UI (https://semantic-ui.com/)
- Javascript
- jQuery (https://jquery.com/)
- Handlebars (http://handlebarsjs.com/)
The Petfinder API gives developers access to Petfinder's database of over 300,000 adoptable pets and 11,000 animal welfare organizations (AWO).
To learn more about this API and the various API methods available, see the API documentation.
Petfinder requires developers to use a key to access the API data. To use the Petfinder API, you'll also need a (free) Petfinder developer account.
After you have a key, you can use the API to search for adoptable pets in your area.
- Add feature that allows users to directly send an email to the shelter where the pet is located.
- Do more research. Go to an animal shelter and find out more about the pet adoption process. Take ideas and suggestions from research to improve and streamline the app.
- Integrate app more with Facebook authentication. For example, grab information from user's profile to find pet suggestions.
If you find an issue while using the app or have a request, log the issue or request here. These issues will be addressed in a future code update.
