Many smaller community food banks do not have access to the same tools and resources that larger ones do, and thus use workarounds to communicate with their community.
Create a community hub to enable smaller organisations to better interact with their community, as well as provide a central location for beneficiaries and supporters to access information about their local services.
This is currently the MVP for Your Local Food Bank, V.1.0:
- CMS
- Eligibility criteria, information and local resources for Beneficiaries
- Donation section for patrons
- Input for item donations currently needed
- Contact information
Clone the two repositories (frontend and backend) down to your machine. Open up two terminals and use one to navigate to front end, and one to navigate to the back.
In both, enter the command to install dependancies:
Install with npm
npm i final-project_front-end-jazzy-code-superheros cd final-project_back-end-jazzy-code-superheros
npm iOnce the necessary nodes have been installed you can spin up the app! First open your backend terminal, and run the dev script:
npm run dev npm startLanguages: JavaScript, HTML5, CSS3
Libraries & Frameworks: Node, React.js, Jest, Supertest, React Testing Library
Upcoming Features:
- Admin Contact form working
- Beneficiary log in
- CMS - Creating your own foodbank
- App
- Header
- Navbar
- Header
- Landing page
- Input field
- Submit button
- Result card
- Home
- Give help button
- Get help button
- Information card
- Carousel
- Get Help
- Toggle card
- Eligibility card
- Map
- Toggle card
- Give Help
- Toggle Card
- Items List
- Item
- Button for volunteers
- Map
- Contact Page
- Contact information
- Contact Form
- Submit button
- CMS
- Form
- Submit button
- Form
We have a custom useFetch in our app - it takes a url as a parameter and currently returns data from the state to be used at App level for prop drilling to pass down the foodBankData object for use in the other components As the url is a parameter this can be used elsewhere for other fetches to get different data from other APIs.
Our App component dynamically displays all of our pure components.
State
- inputFoodBank
- submittedBank
- foodBankData
Behaviour
The App component displays our components by providing controlled states to our rendered components using the 'useState' Hook.
The App component also has a custom hook called 'useFetch' which we use twice, once to our server to request data from our database and the second, again to our server, but talks to the external API which is then collated to return the search results to the user.
It also contains the paths for each route in our navbar component.
- The inputFoodBank state is used to set whether a foodbank has been inputted in the input field. This is displayed on our landing page.
- The submittedFoodBank state is used to set a state for any foodbank that is submitted from the input field. This takes in inputFoodBank and checks for specific data in order to return the correct foodbanks.
- The foodBankData is used to store the data that is returned from the search.
The Header contains our navbar component as well as our app logo. It has a burger menu nested within the navbar component.
State
- isActive
Behaviour
- The isActive state allows us to control whether the navbar is active (opened) or not (closed).
The Landing Page is the first page on our app and is what controls the information that we see throughout the rest of the app. It pulls through the Input component.
props
- handleChange
- handleClick
- handleEnter
- setFoodBankData
- searchArray
The Landing page has a reusable button component and renders the 5 closest foodbanks from the area that is submitted on the search field.
The Home Component is the main page of the app and pulls through multiple components including: InputFoodBank, Button, AboutUs, Carousel and Facts.
props
- foodBankData
- handleChange
- handleClick
- handleEnter
Behaviour
- The Home Component pulls through each component listed above and renders them as well as props that pass through the InputFoodBank logic.
- useNavigate is used within the button component which allows us to redirect to new pages without using the navbar.
The carousel is a pure component that displays text and an image.
state
- slide
props
- slides
Behaviour
- Use slide state to keep track of the number of slides as well as which slide will be displayed. The props being passed down is the data from the CarouselData, so we can know the lenght of it.
This is the page where users will be directed who are looking to access the service of the foodbank.
The page will display information on:
- Eligibility criteria
- The process for accessing food vouchers
- Website
- (optional) Specific information supplied by the foodbank admin
- Map
There is a banner image on the page, and below that a reusable card component with accordion features is rendered for each info block that is provided. At the bottom of the page is a map displaying the location of the foodbank.
State
- isTogged
Props
- cardTitle
- cardBody
Behaviour
- The toggle card is designed to be a resuable accordion card component which takes in title and body props. This card has been designed to display text only. There may be a more generic component created in the future.
- The card is designed in such a way that should display just the title in a bold green, which opens up to reveal the text when clicked. The arrow symbol (react-icons/fa) should rotate 180º when toggled.
state
- isTogged
props
- cardTitle
- cardBody
- children
Behaviour
- This component works the same way as ToggleCard, however this component takes in children.
This is the page where users will be directed who are looking to access the service of the foodbank.
The page will display information on:
- Donating money
- List of items that is needed by the foodbank
- A volunteer section
- Map
Props
- foodBankData
A reusable card component with accordion features is rendered for each info block that is provided. At the bottom of the page is a map displaying the location of the foodbank.
This is a Dumb component that displays a single listed item.
Props
- ListItemText
Behaviour
- It returns an li element based on the props returned. It takes props of ListItemText which is the text to be displayed within this component
This is where we display all of the items our Food bank is in need of and requires as donations.
Props
- foodBankData
Behaviour
- It takes props as the object passed down via prop drilling from the fetch request to the API. It returns a section and ul containing a number of ListItem returned from a map of the data supplied by the API. Based on the structure of the the data supplied by the API it is conditionally split into an array at this level.
This page allows the user to view the selected foodbank's contact information as well as send a message to the website administrators using Formik.
State
- Formik stores its own state (accessible via the values state)
Props
- foodBankData
Behaviour
- The Contact page stores the formik logic.
- foodbankData is passed down into the Contact Card.
A reusable card component that stores text.
Props
- props
This is the page designed for admins of foodbanks to supply and update information about their branch. Currently this only updates via a patch request, with view to build in logic to create new entries when not already in our database.
This page pulls a number of components, mostly relating to Auth0.
This is a styled component used only on the admin page for adding and removing items from the needs list.
props
- onClick
- type
- children
- className
state
- needs
props
- fetchedFoodbankData
- foodbankId
Behaviour
- This page handles the Formik form to take in data from the user. The needs state takes in the array of needs retrieved from the database. This allows the user to add items individually and update the data base when submitted.
These are buttons pulling in the loginWithRedirect & logout functions from Auth0.
This page handles the data for the cms page, both pulling foodbank info from our backend and user metadata from Auth0. The user has foodbank id set in metadata, which in turn fetches the correct info from our database.
state
- userMetadata
- foodbankData
- foodbankId