tyestanley/nibbler

Designed for foodies to go to share their love of food together!

Nibbler

Description

The purpose of this project was to build a full-stack MERN application that would create an online social network to directly connect foodies. Users are able to compare restaurants and their dishes as well as reviews and prices in order to find the right restaurant for them.

Table of Contents

User Story
Acceptance Criteria
Contributing
Built With
Sample Screen Shots
Deliverables

User Story

AS A USER that loves food and loves going out to eat
I WANT to share information and learn about different restaurants
SO THAT I can explore and try out new restaurants

Acceptance Criteria

• Use React for the front end

• Use GraphQL with a Node.js and Express.js server

• Use MongoDB and the Mongoose ODM for the database

• Use queries and mutations for retrieving, adding, updating, and deleting data

• Be deployed using Heroku (with data)

• Have a polished UI

• Be responsive

• Be interactive (i.e., accept and respond to user input)

• Include authentication (JWT)

• Protect sensitive API key information on the server

• Have a clean repository that meets quality coding standards

• Have a high-quality README

• Add PWA functionality:

  • Uses a web manifest

  • Uses a service worker for offline functionality

  • Is installable

Contributing

The following individuals contributed to this project (listed in alphabetical order by last name):

Sapana Donde - Front End and Back End
Scott Heier - Front End and Back End
Chase Miller - Back End
Tye Stanley - Front End
McKinley Wiltz - Front End

Built With

• Bcrypt
• Bootstrap
• Dotenv
• Express.js
• GraphQL
• Heroku
• JWT
• MongoDB
• Mongoose ODM
• Multer
• Node.js
• React
• SASS

Sample Screen Shots

(1) The following screen shot depicts the "Home" page, with recent uploads of restaurants, photos, and comments:

(2) The following screen shot depicts the "Sign up / Login" modal:

(3) The following screen shot depicts the "Profile" page, which contains functionality to edit the user's profile, add a restaurant, and view and delete comments written by the user:

(4) The following screen shot depicts the "Restaurants" page, which contains functionality to view all restaurants as well as the most recently uploaded ones:

Deliverables

Nibbler Webpage:

https://fathomless-peak-48299.herokuapp.com/

Nibbler GitHub Repository:

https://github.com/TyeStanley/nibbler

nibbler's Issues

Add comments

Add the ability for users to add a comment on a restaurant in the RestaurantCard component if they are logged in.

Currently UserReview is commented out in the restaurant card because the comment mapping has to be adjusted to fit the new query

Assign Project Tasks and Responsibilities

Assign Project Tasks and Responsibilities Class Meeting updated 8/18/22

CLIENT SIDE:

• Tye: App.js, Footer components
• McKinley: Login, Sign Up, Profile/Dashboard components, Nav Bar
• Scott: Restaurant, Home components
• Sapana: Auth.js, mutations + queries (client side)

SERVER SIDE:

• Chase: TypeDefs, Resolvers (mutations + queries server side), server.js
• Sapana: server.js, Auth middleware (server side), config, Models

COMPLETE PRESENTATION POWERPOINT -- IN CLASS ON MONDAY 8/22

Setup Images

We need to implement the ability to load images. Things to look into

Research these

• Multer for graphql/apollo
• File uploads via https://www.apollographql.com/docs/apollo-server/data/file-uploads/

I was planning to add an upload button to the RestaurantCard component if the user is logged in and allow them to upload photos to any of the restaurants.

What we need to accomplish is that the file is uploaded into the public/ folder and the file name is saved into the restaurant in the database.

Fixing broken parts of page

Fixing broken parts of page

• Fix pieces that were identified at end of class
• Try to break the code!
• Remove window refreshes
  • Replace with "Use effect" feature

Fixing window refreshes

Fix window refreshes

• Remove window refreshes
• Replace with "Use effect" feature

Create mongoose models

Create mongoose models

• Add User model
• Add Restaurant model
• Add index.js to package models and export them

Refactor back end

Refactor back end

• Refactor request for favorite restaurants
• Refactor request for heart system
• Revise Schema for restaurant to add users

*BONUS*

Setup PWA!

Setup Hearts

Restaurant Card component

Setup onlick function on the heart icon

• Write ADD_FAVORITE mutation
• Make sure that hearts on restaurants are also being updated
• Write click handler

• WHEN heart is clicked
• THEN use mutation to add restaurants to users' favorite list
• THEN update the color of the heart to indicate favorite

---

Set up files and folder structure for project

Set up files and folder structure for project

• Set up server folder structure
• Set up client folder structure

Enhanced features

Profile Page

Favorite restaurants are determined by hearts

Have a "My Review" card/section
Have a user create playlists, i.e., "Favorite Sushi"

For subsequent visits, add a plus button to a "My review" card to add reviews to a restaurant

Restaurant Dashboard

McKinley
A restaurant would need to pay to have their own page, i.e., badge concept
Having this would allow us to be able to control how the restaurants are featured, including their content

Scott
A restaurant page but enhancements to the page is what restaurants would pay for

Chase
Have users hearts on the restaurant dashboard

Basic page, Premium page

Update Profile page

Update Profile page

• Revise Profile page

Create Restaurants Page

Create Restaurants Page

• Develop a "restaurant dashboard" page to deep dive into the restaurant
• Add map of restaurant
• Add all data about restaurant onto the page

Revise images to be modals

Revise images to be modals