Documentation for Project# 4 Assignment by General Assembly
Food waste in the US continues to be a crippling issue which effects everyone in our community. Here are a few stats to illustrate the issue.
This app is a humble contribution to a solution that may bring about a much needed change in the dominant culture of waste. We can’t build electric cars or a rocket to mars, but we can build this app in the mean time.
The idea for the project came about through a mixture of activism and sustainability. Our main focus was to create an app that promotes waste reduction through food management by bringing businesses and the community together to tackle a common issue and provide a tool to effectively fight hunger.
- Who is ForFoodSake for?
- Wireframes
- Mockups
- Browser and Mobile Views
- User Stories
- User Data Flow Chart
- Component Hierarchy
- App Features
- Technologies Used
- Code Sample
- Contribution & Installation Instructions
- Building Team
- Link to the App
- Link to the Article on Linkedin
- Attributions
- Special Thanks
- Proactive people who are conscious about the impact that human footprint has on the environment.
- Vendors who want to reduce food waste and dedicate a portion of their business to sustainability.
- Anybone who enjoys eating and is looking for a good deal on delicious food.
As a Vendor The vendor (farm, grocery store or restaurant) will signup; enter their information, and post information about the menu of choice for that day (price and units available) including a pickup by time.
As a User The customer will be able to look at the vendor, units available,purchase the product through the app and get pickup information.
Minimum Viable Product
- CRUD functionality for Vendors
- User can view vendors located in New York City
- User can view all listings displayed on Vendor page
- Vendor can create, update, & delete listing
- Incorporate Material.UI for styling
- Mobile responsive
Bronze Features
- Vendor authentication
- Users can search for vendors located in Nashville, Denver, or New York
- Add component for educational resources about waste free lifestyle
Silver Features
- Transition from React to React Native framework
- Elevate styling through branding(colors, fonts, icons, graphic elements)
- Image upload for vendors
Gold Features
- CRUD functionality for Users
- Use Google geolocation to filter search results
- Add Twitter thread linking to releated hashtags
- Add animation & interactive design through transitions
- Carousel/Slideshow of available listings on home page
Platinum Features
- Add ability for user to write a vendor review
- Incorporate social media sharing capabilities
- Send order confirmation to users via email and/or text message
- React
- React Router
- React Hooks
- JavaScript
- Cascading Style Sheets (CSS)
- Material-UI
- Testing
- Jest
- React Testing Library
if (props.signupStep === 1) {
return (
<>
<Box className={classes.formContent}>
<FormControl
error={!props.validEmail}
className={classes.inputField}
>
<InputLabel htmlFor="email">Email</InputLabel>
<Input
value={props.emailString}
onChange={e => props.setEmailString(e.target.value)}
id="email"
type="email"
aria-describedby="my-helper-text"
/>
{props.validEmail ? null : (
<FormHelperText>Please enter email</FormHelperText>
)}
</FormControl>
<FormControl
error={!props.validPassword}
className={classes.inputField}
>
<InputLabel htmlFor="password">Password</InputLabel>
<Input
value={props.passwordString}
onChange={e =>
props.setPasswordString(e.target.value)
}
type="password"
id="password"
/>
{props.validPassword ? null : (
<FormHelperText>
Please enter password
</FormHelperText>
)}
</FormControl>
<FormControl
error={!props.passwordMatch}
className={classes.inputField}
>
<InputLabel htmlFor="confirmPassword">
Confirm password
</InputLabel>
<Input
value={props.confirmPasswordString}
onChange={e =>
props.setConfirmPasswordString(e.target.value)
}
type="password"
id="confirmPassword"
/>
{props.passwordMatch ? null : (
<FormHelperText>
Passwords must match
</FormHelperText>
)}
</FormControl>
</Box>
<FormControl>
<Button
className={classes.submitLogin}
variant="outlined"
color="secondary"
onClick={props.incrementSignup}
>
Continue
</Button>
</FormControl>
</>
);
} else if (props.signupStep === 2) {
return (This code’s purpose is to reuse the same form component to allow the user to fill all sign up fields without having too many fields to fill out on screen
Mindy Marmol Github Profile
Qusai Fares Github Profile
Rixio Barrios Github Profile
Sage Kearney Github Profile
Instructors at General Assembly:
- Esin Saribudak
- Hou Chia
Resources & Tools
- Miro
- Trello
- Google Docs
- Heroku
- DB Diagram
- Pixlr
- Adobe Illustrator
- Adobe Indesign
- Adobe XD
- Material-UI Docs
- React Testing Library Docs
- Jest Docs
For Food Sake: The Last Project
Sage Kearney: Mom & Dad, for keeping me fed during this program ❤️
Qusai Fares: Thanks to my family for being there. Also thanks to my colleagues and instructors
Mindy Marmol: To all the bugs and errors that made us google masters, thank you.
Rixio Barrios: I thank my family for supporting me and my efforts to improve myself. To my good friend Chris Mendoza who helped me and my cohort mates through this project.
Additional documentation can be found in the backend repository Click here