Git Product home page Git Product logo

giphy-saga-project's Introduction

Giphy Search and Favorites

This week you will be building a Giphy searching and favoriting application which allows the user to save images and sort them into categories.

In this project you will need to utilize React, Redux, Sagas and integrate them with a 3rd party API....all in a group project!

Team Setup

Do not clone this repository. Instead, have one person download the zip, extract the contents, git init, git add ., git commit -m "initial commit - base project" and add your remote. Make your team collaborators. Have them clone directly from the person who did the setup, not fork.

Create Database and Tables

See the database.sql file for database setup and details. It offers some of the SQL to get you started but you'll need to set up your tables and the relationships between them.

Development Setup Instructions

  • Run npm install
  • Start postgres if not running already by using brew services start postgresql
  • Run npm run server to start the server
  • Run npm run client to start the client
  • Navigate to localhost:3000

Base Features

You will need 2 views for the Base Features. You should put some thought into the UI and how to style it.

Search View

  • Allow a user to enter a search string and submit a search request.
  • Query the Giphy API Search Endpoint with the given search string FROM THE SERVER.
  • Display the results on the DOM.
  • Allow a user to Favorite any of the result images. You'll need to think about what information to save to your own database. Generally you only store the minimum needed to show this image again on the Favorites view.

Favorites View

  • Allow a user to see all of the Giphy images they have Favorited. The actual images need to appear on the DOM.
  • Allow a user to set a category for a favorite image.
    • Each favorite image can only have 1 category at a time.
    • The category needs to be one of the categories in the database.

Existing Routes

You are given two router modules on the server with stubs for the routes you may need.

  • GET /api/category (complete)

  • POST /api/favorite (incomplete)

    • for adding a new favorite image. You'll need to think about what is needed. Does it need a category?
  • PUT /api/favorite (incomplete)

    • for setting a category on an image. It expects both a query parameter and a data body. Feel free to change it.

Stretch Features

  1. Allow favorites to be removed/unfavorited
  2. Allow for a favorite to have many categories
  3. Implement the pagination feature of the Giphy search results
  4. Add another view that allows a user to manage (create, edit, delete) categories

giphy-saga-project's People

Contributors

kai-peterson avatar patrick-baker avatar tangent314 avatar

Watchers

James Cloos avatar  avatar

Forkers

patrick-baker

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.