Yum-me-v.3

Video Demonstration: https://drive.google.com/file/d/1759D9wWF-RJxFvAobo3GMHsmPXaspOlx/view
Heroku Link: https://thawing-thicket-66873.herokuapp.com/

Set-Up

Initialize the package.json file then install the following node packages:

Node packages

Front-End:

    "axios": "^0.18.0",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.3.1",
    "gh-pages": "^2.0.1",
    "jquery": "^3.4.1",
    "lodash": "^4.17.4",
    "node-sass": "^4.11.0",
    "react": "^16.8.6",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "react-slick": "^0.23.2",
    "reactstrap": "^7.1.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0",
    "youtube-api-search": "0.0.5"

Back-End

    "axios": "^0.18.0",
    "bcrypt": "^3.0.6",
    "bcrypt-nodejs": "0.0.3",
    "bcryptjs": "^2.4.3",
    "bootstrap": "^4.3.1",
    "connect-flash": "^0.1.1",
    "dotenv": "^8.0.0",
    "express": "^4.17.0",
    "express-session": "^1.15.6",
    "if-env": "^1.0.4",
    "mongoose": "^5.5.9",
    "morgan": "^1.9.1",
    "npm-run-all": "^4.1.3",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "path": "^0.12.7",

Technologies Used

• MERN Stack
• Passport user authentication
• Youtube API
• Semantic-UI-React
• Heroku deployment

Files

.gitignore

/node_modules
client/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Primary Functionalities of Yum(me)!

• Recipe research
• Watch videos
• Version control

Future Development

UI/UX

1. Carousel for versions (like an actual book)
2. Carousels – Hide text when not active
3. Uniform aesthetic and readability
4. Date Stamps
5. Streamline styling

Functionality

1. Commenting and cleaning up code
2. Add comments section
3. Option to delete a version or entire series
4. Create your own recipe
5. Website Scraping
6. Grocery list preparation
7. Videos display while recipe is visible
8. Side-by-side comparison of recipes when searching
9. State-management
10. Reduce number of data requests with server
11. Memory (Saving changes only not entire recipe)

---

The Creators

• Hanna Lauth - Back end / Front end
• Rodel Calanoc - User authentication / Front end