/RateMyRecipe

Full-Stack CRUD Ops w/ OAuth

Primary LanguageJavaScript

Rate my recipes!

Installation

  1. fork/clone project.
  2. in the root of the project yarn to install all dependancies.
  3. yarn start to spin up a local server.
  4. view the project at http://localhost:3000/
  5. Sign up and leave a recipe!

Technologies used

Project planning

Features

  • Secure OAuth authentication and authorization
  • Add your recipes to the mongoDB atlas database
  • Get one upvote or downvote per user recipe including your own
  • Learn cool new recipes from cool new people

Model View Controller - MVC methodology

Creating a new mongoose schema and exporting as a NewSchema Model in models/models.js

const mongoose = require('mongoose');
const newSchema = new mongoose.Schema({
  id: String,
  title: String,
}, {
  timestamps: true
});
module.exports = mongoose.model('NewSchema', newSchema);

Index controller to handle the user and recipes data between our mongoDB and our .ejs View in controllers/controller.js

function index(req, res, next) {
  //Search for user based on query
  User.find(query)
    .sort(param).exec(function (err, users) {
      //Return all recipes from database
      Recipe.find({}, function (error, recipes) {
        //Pass user and recipes variables to our .ejs 'recipes'  view
        res.render('recipes', {
          users,
          recipes,
          user: req.user,
          name: req.query.name,
          sortKey
        });
      })
    })
}

Defining the route that invokes our recipe Controller recipeCtrl.index function in routes/routes.js

const recipeCtrl = require('../controllers/recipe')
router.get('/recipes', isLoggedIn, recipeCtrl.index);

Use ejs template tagging to dynamically change the views based on the data passed from the controller views/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Welcome</title>
  </head>
  <body>
    <div>
      <% if (user) { %>
      <a href="/logout">Log out</a>
      <% } else { %>
      <a href="/auth/google">Log In</a>
      <% } %>
    </div>
  </body>
</html>

Dynamic user card

See authorized user options

Interact with authorized delete and update, upvote and downvote CTA's your own recipe card(s).

Update your recipe

Review, improve, reiterate over your recipes.

Roadmap

  • Implement upvotes and downvotes
  • Think of a relevant creative name for total "score"
  • Refactor code to follow a 'drier' approach using EJS includes.

Environment

  • macOS catalina: 10.15.3
  • VS Code: 1.39.1

Authors

  • Bruce Pouncey - Initial work - BPouncey

License

(MIT)

Acknowledgments

@GeneralAssembly