MVP - READ - HOME PAGE COMPONENT

[keanacobarde]

User Story

I, as the full-time worker, full-time student who is looking to manage and optimize my spending habits as easily as possible - need a home page that includes ONLY the most essential components of the application. When first logging into the site, will be met with a home page. This home page is split into two sections. The hero section and the categories section. This is the home page, where all the central functionality of the site is reachable. These features pertain to the expense tracking portion of the site and the category creation portion of the site.

Acceptance Criteria

WIREFRAME

HERO SECTION

• A statement of the total amount of money I earn in a month, which is self-reported.
• The current amount of money I have to allocate to specific categories
• A button to add an expense CATEGORIES
• A section for the custom categories I've created. Each category has its own card. The creation of this card component will be detailed in a future ticket; however, the completion of this page will be dependent on the creation of those cards.
• A button on each card that leads to the expenses page of each category - which will be detailed in a future ticket.
• A button that allows me to add a category.

Dependencies

5 - This is a crucial step in ensuring that all the necessary data is rendered properly.

Dev Notes

• This page is most likely located within your index.js page.
• You'll have to call on the data for the monthly earnings and the current amount. useEffect() and useState() hooks are most likely going to be present for this.
• Most of the page is styling. The hero section is a div with three divs within it. You can use grid CSS to format it.
• The category cards belong in their own div. You're rendering cards with .map(). You could also use grid CSS/flex.
• Cards can be rendered like the following: PULLED FROM TEAM ROSTER, INDIVIDUIAL ASSIGNMENT

  
  /* eslint-disable react-hooks/exhaustive-deps */
  import React, { useEffect, useState } from 'react';
  import { useAuth } from '../utils/context/authContext';
  import { getMembers } from '../api/memberData';
  import MemberCard from '../components/MemberCard';

export default function Members() { const [members, setMembers] = useState([]);

const { user } = useAuth();

const getAllTheMembers = () => { getMembers(user.uid).then(setMembers); };

useEffect(() => { getAllTheMembers(); }, []);

return ( <>

TEAM

{members.map((member) => )}

</>

); }

[keanacobarde]

REMAINING TASKS

• [x] Modularize the components of the home page further
• [x] Move functionality outside of JSX return statement - this may address the buffer between calculation and rendering.

[keanacobarde]

FULLY IMPLEMENTED ALL FEATURES LISTED ON THE HOME PAGE. CLOSING TICKET.