Code Monkey home page Code Monkey logo

critter's Introduction

CritterTails

Screenshot of CritterTails homepage

Description

CritterTails is a social media app for pet lovers to create accounts for their pets so their "pets" can share their musings with the world.

License: MIT


Table of Contents


Website

https://crittertails.herokuapp.com/


Built With

React Redux GraphQL Apollo GraphQL MongoDB JavaScript node.js Bootstrap

Back to Contents


Installation

To install the PWA, click the install icon in the right side of the address bar on desktop, or use your mobile device's installation method. For example, on Chrome for Android, open the menu in the top right of the page and click "Add to Home" or "Install".

Back to Contents


Usage

To use CritterTails, sign your pet up first. Then you can change your pet's default image on their profile page. Then use the form on your pet's profile page to add your pet's latest "Tail". Click on a tail on a user's profile page or the home page, and you can comment as well. Use the search bar to filter the latest Tails by pet name. Use the dropdown menu on the home page to filter the list of pet users by pet type (dog, cat, etc...).

Back to Contents


License

This project is covered under the MIT License.

Back to Contents


Contributors



Craig Bennett

  • React (all pages and components, hooks)
  • React-Bootstrap
  • React Router
  • IndexedDb
  • PWA
  • Redux (all state)
  • Front End Apollo GraphQL Queries and Mutations
  • Image uploading
  • Deployment (Heroku)

Craig5117



Adam Crandall

  • Apollo GraphQL/Mongoose (resolvers, typeDefs)
  • React (SingleTail page, CommentList, CommentForm, NoMatch)
  • Database seeds
  • App Logo
  • icons

fancibleunicorn



Dylan Tipton

  • Apollo GraphQL/Mongoose (models, typeDefs)
  • React (TailForm, CommentForm)

tiptondt1998



Jessica Jensen

  • CSS/Bootstrap CSS (PetProfile, Home, PetCard, TailList, Header, Nav)

jrjensen14



Bruce Anthony II

  • CSS/Bootstrap CSS (Home, Login, Signup)

bruceanthonyii



Back to Contents


Acknowledgements

Back to Contents

critter's People

Contributors

bruceanthonyii avatar craig5117 avatar fancibleunicorn avatar jrjensen14 avatar tiptondt1998 avatar

Stargazers

 avatar

Watchers

 avatar

critter's Issues

Set up Models on Back-end

PET

  • petSchema
  • username {String, required, unique, trim}
  • email {String, required, unique, match}
  • password {String, required, minlength: 8}
  • petType {String, required, trim}
  • image {String}
  • age {Number}
  • sex {String, required}
  • bio {string, required}
  • adoptable {boolean}
  • posts [{ref Post}]
  • friends [{ ref Pet}]
  • include a virtual for friendCount see logic at the bottom of user in Deep-Thoughts
  • see the logic in Deep-Thoughts for the password encryption logic

POST

  • postText {String, required, minlength 1, maxlength 10000}
  • createdAt {Date, default, get}
  • petUsername {String, required}
  • comments [commentSchema]
  • getters true

COMMENT

  • commentText {String, required, maxlength 3000}
  • petUsername {String, required}
  • createdAt {Date, default, get}
  • getters true

CSS Design

Comment Form
Comment List
Footer
Friends List
Header
Nav
Pet Card
Post Form
Post List
Profile Image
React Bootstrap Login Form for Login.js and Signup.js

Style Nav and Header

We need the header and nav styled.

Use the purple color as the header background.

Set up PWA

  • Configure indexed db
  • Make sure download feature works properly on deploy.

Style the Profile Page

Profile page needs styling.

  • Text needs some style.
  • Needs some padding/margins.
  • Needs some color.

Image uploading

Figure out a way to store images that a user uploads, either in the cloud or in Mongo. Cloud is probably preferable since it won't overwhelm our DB with large files.

Consider the following approaches:

  • multer + AWS S3
  • multer + Mongo
  • Cloudinary

Resolvers

Here is the initial list of Mutations we are defining in typeDefs

  • login
  • addPet
  • addPost
  • addComment
  • addFriend
  • addProfileImage(imageUrl: String!): User

For login-addFriend, refer to the logic we used with Deep Thoughts. If you want to add or change anything, just let me know. I am definitely open to anything that would make us stand out from Deep Thoughts more.

The one that is going to be different is the addProfileImage. It is going to be an update mutation that will find a specific user and update their profile image. Use "addFriend" as a reference. It will accept imageUrl as a parameter (taking the place of friendId in the addFriend resolver). It will be using the _id from the context just like addFriend. In place of the addToSet code, we will want something like: { image: imageUrl} (I think). New should be true.

JWT

  • Set up JWT on back-end (auth, server.js logic)
  • Set up JWT auth.js on Front-end

Set up Single Tail Page

  • Single Tail page needs to display one tail with the associated comments.
  • It also needs to make use of the comment form.

Bug - Nested user info is not returned by addTail mutation

Behavior:

When you use the addTail mutation, the tail is added to the db, but the postedBy field only returns the userID and it does not populate the username and image fields. This causes the existing TailList on the Profile page to lose its reference to the username and image, and it prevents the Apollo cache from being updated.

Expected Outcome

  • postedBy should be populated by _id, username, and image

Actual Outcome

  • postedBy only contains the _id, and the username and image fields are returned null.

Back-end TypeDefs

Below is a list of TypeDefs that we need set up on the back end. Type Query is already done, it just needs to be uncommented in typeDefs.js. Likewise, the addProfileImage mutation is already done. For the rest of them, I just left a comment to mark what we want to return with our typeDefs. You will have to add the datatype (String, Int, etc.) Refer to the models if you are unsure what datatype to use. Feel free to reach out with questions.

type PET

  • _id
  • username
  • email
  • petType
  • image
  • age
  • sex
  • bio
  • humanStatus
  • tails
  • friends
  • friendCount

type TAIL

  • _id
  • tailText
  • createdAt
  • petUsername
  • comments
  • commentCount

type COMMENT

  • _id
  • commentText
  • createdAt
  • petUsername

type Auth

  • token
  • pet

Type Query just needs to be uncommented

type Query {
me: Pet
pets: [Pet]
pet(petUsername: String!): Pet
tails(petUsername: String): [Tail]
tail(_id: ID!): Tail
}

type Mutation

  • login
  • addPet
  • addTail
  • addComment
  • addFriend
  • addProfileImage(imageUrl: String!): User (add image is already done, it just needs to be uncommented)

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.