Skip to content

timmellis/Foodle-Back

Repository files navigation

Foodle

Our vision behind this app is a mock version of instagram or flickr, but made specifically for food. Each user is able to create a post with an image of their dish, along with a link to the recipe they used, a rating (out of 5), and comments about their experience. Other users can then comment on posts, give them their own ratings, and "follow" users they like.

Github and Trello Links

Trello
Front End (includes Readme)
Back End

Features:

[x] Front to Back JWT Auth
[x] PostgreSQL & Sequelize Back End
[x] React & Redux Front End
[x] Full CRUD:

  • Create
  • Read
  • Update
  • Delete

[x] Users Able to Post & Comment on other Posts
[x] Read Access only to user posts
[x] Rating System for User on their own posts
[x] Rating system on User Comments of other user posts
[x] Stretch: Onclick for post should usenav to recipe card
[x] Stretch: Add Following abilities to users to follow pages
[ ] Stretch: Embed recipe URL source page as an iFrame for immediate viewing
[ ] Stretch: Overall Rating on Comment System give average rating of users recipe post credibility at top of profile

Page Layout:

Home Page (not logged in)

home


Sign in page

Notes: Users who are not logged in are required to register and/or login, using JWT Authorization. Their login token persists in the browser's localStorage until they actively "Sign Out" signin


profile page (logged in)

Notes: Once logged in, the Nav bar updates to include links and pages that are not available without proper authorization. profile Backend Notes: Each user makes user of the "User" table model, as well as the "UserFollowers" join-table structure to map the many-to-many relationship between "Followers" and "Following" profile-table-structure join-table


feed page (logged in)

Notes: The feed page loads ALL posts by ALL users, sorted by most recently posted content. feed posts-table-structure


Update profile page (logged in user only)

update



Development

Component Heirarchy Diagram:

CHD


Enitity Relationship Diagram:

ERD


WireFrame Basic Layout Idea:

WireFrame


All SQL Tables (created using Posgres/Sequelize)

database


Installs List Front End:

  • axios
  • react-redux
  • react-router-dom
  • react-stars
  • redux devtools extension
  • redux-thunk
  • cors
  • react-router-dom

Installs List Back End:

  • cors body-parser morgan
  • dotenv
  • nodemon
  • sequelize pg
  • jsonwebtoken
  • bcrypt
  • @ngneat/falso
  • express

Tech Used Overall Project:

  • React
  • Redux (possible)
  • PostgreSQL
  • Express
  • Sequelize
  • Javascript
  • JWT Authentication

Created By:

Tim Ellis
* LinkedIn
Joshua Grainger
* LinkedIn
Mark Harmon
* LinkedIn


About

Food Picture Sharing Social Media Mock Up

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors