[
https://www.linkedin.com/in/kheyyon-parker/

Weekly-Meal-Planner

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Architecture
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

The Weekly Meal Planner is a simple application that will allow users to store recipes into a weekly meal plan that will hold the total calories and macronutrients (i.e., Protein) of the user's own collection of recipes which must be added manually. I would advise the user to have an account or access to sites with recipes such as 'FitMenCook' to utilize the app effectively. It is a react on rails project which utilizes postgresQL as the database client. It is an complementary project to the Maintenance calculator.

MVP

The _Weekly Meal Planner MVP requirements are the following:

Backend(Server)

• Build a Ruby on Rails API with RESTful JSON endpoints
• Build a database with minimum of 3 tables and 1 association between tables
• Use only Rails to build models
• Build Full CRUD for minimum of one controller of the non-user tables (index, show, create, update, destroy)

Frontend(client)

• Build a react app via npx-create-react-app -Build 8 separate components in an organized file structure -Use only React for DOM manipulation -Access data from your Rails API and render data in react components -Use React-Router for client-side routing -Build full CRUD actions for minimum 1 non-auth based service (index, show, create, update, destroy)

Styling

• Style using CSS, SASS, SCSS, Styled Components, or Material_UI
• Use Flexbox or Grid
• Use 2 media queries to design for 3 different screen sizes (1 must be desktop)

Deployment

• Deploy the fully functional front-end via Surge or Netlify.
• Deploy the back-end via Heroku.
• Deploy early and often(this will help to debug small issues before they become large issues)

Linting

• Indent properly.
• Utilize high-quality, semantic variable names.
• Follow camelCase, snake_case, and kebab-case convention.
• Remove unnecessary boilerplate React files and code.
• Remove all console.log() s and commented out code (functional notes and comments are okay).

Procedural

• Initialize a git repo on Github, with a link to your hosted project.
• Have frequent commits, making a robust commit history at least every day. (75 commits minimum)
• Use effective and safe branching and merging processes.

Goals

• Enable user auth,
• Enable full CRUD on weekly meal plans
• Enable full CRUD on recipes

Libraries and Dependencies

Library	Description
React	The only way to react is react
React Router	Client-side routing
Material-UI	Library of re-usable and customizable components
React-Lotte	Animation Library from AirBnB ported for react

Client (Front End)

Wireframes

• Desktop Landing

-Tablet Landing

-Mobile Landing

• Resource Index

• Tablet Resource Index

• 

• Mobile Resource Index + Show

Component Tree

Component Tree Sample

Component Architecture

src
|__ animations/
      |__ cooking.json
      |__ fatigue.josn
      |__ path.json
|__ assets/
      |__logov3.png
      |__logo.png
      |__Logo.gif
      |__kitty.gif
      |__FooterImage.png.png
|__ components/
      |__ Footer
          |__Footer.jsx
       |__ui
           |__ Theme.js
       |_containers
            |__ MainContainer.jsx
       |__layout
            |__Layout.css
            |__Layout.jsx
        
  
      
|__ services/

Time Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Add Contact Forms	H	10+ hrs	10+ hrs	10+ hrs
Create CRUD Actions x 2	H	20+ hrs	20+ hrs	20+hrs
Screens	H	10+hrs	10+hrs	10+hrs
Services	H	10+hrs	10+hrs	10+hrs
TOTAL		50+hrs	50+hrs	50+hrs

Server (Back End)

ERD Model

---

Post-MVP

• Voice Enabled Input
• Grocery List (API from local grocers)
• Google Maps integration
• Calorie Tracking and handling on menu
• Chart.js library for macros as well
• Add a feedback section to get feedback from beta-testers

---

Code Showcase

Cool Code #1

functionality: _This function works like a history.push to go back 1 specific page

const goBack = () => {
  window.history.back();
}

...

  <button onClick={() => goBack()}>Back</button>

Cool Code #2

functionality: _This is actually an eventHandler with multiple functions loaded onto it. It is useful to make multi-state components _

onClick={() => {fxn1; function2}}

Cool Code #3

@material_ui docs: I highly recommend material ui. It's fun.

Code Issues & Resolutions

React Lottie - read lottie animation and google

Hero Page - udemy

@material-ui - YT,udemy, google, @material-ui

deployment - google, heroku, and feedback