GithubHelp home page GithubHelp logo

cs569-final-project-petfinder's Introduction

CS569 - Final Project - PetFinder API

Create an Angular application to browse the Petfinder API.

For users to be able to use the application they must log in first, which comes in the form of entering a valid Petfinder API key.

After they log in successfully, a BreedService will fetch the list of "Dog" breeds and persist it in the state + localStorage, to be used in the future without re-fetching the breeds.

The main navigation displays two features: Search, and Bookmarks.

Search Component

A search form will be displayed to search for all "Dog" type animals, by the following fields:

  • name (input)
  • type (hidden field, set to "Dog")
  • breed (multiple values checkboxes, values read from your BreedService)
  • size(multiple values checkboxes: small, medium, large, xlarge)
  • gender (multiple values checkboxes: male, female, unknown)
  • status (multiple values checkboxes: adoptable, adopted, found)
  • house_trained (radiobox true/false)
  • location (read the user location and allow users to enter a new location)
  • distance (number between 100 and 500) The search results will be displayed in pages of 20 items per page (allow pagination).

Dog Details Component

When a Dog is clicked use the Get Animal API to display the full details and pictures of the animal.

  • Add a button to add/remove the animal to/from a bookmarks list. A BookmarkService will be used to persist the user's bookmarks.

Bookmarks Component

Display the full list of bookmarks and allow the user to browse to the dog details page.

Application specifications and requirements

Your project must use the following:

  • State properties in all components and services should be declared as Signals.
  • The app module has the login logic. Create a featured lazy-loaded module for the rest of the features.
  • The project must have a proper UI that complies with the web standards.
  • A daily push is required to track your code progress and measure your performance.

Final Evaluation

The submission deadline is on Friday at 9:00 PM. I will meet with you on Saturday at 10:00 AM and evaluate the final project code.

Good luck, and happy coding!

Code Honor Submission Policy: Remember to respect the code honor submission policy. All written code must be original. Presenting any code as one’s own work when it came from another source is plagiarism, which includes any matching patterns and code snippets, and will affect your grade. The use of AI is not permitted in this assignment. For more details, check the full course policies in the syllabus.

cs569-final-project-petfinder's People

Contributors

asaadsaad avatar

Watchers

 avatar

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.