gonzalez-aj / individual-assignment-team-roster

Full CRUD app with Firebase auth and React Next.JS

Welcome to Team Marvel

This team roster includes goodies and baddies from the Marvel Universe.

View the App here

• https://app.netlify.com/sites/team-roster-gonzalez/deploys

Get Started

• get started by looking at startup readme with instructions on how to clone
• Note: this uses Fetch API calls, not axios

Relevant Links

• This is the starting point of the data structure ERD
• Mockaroo example of faux data
• Basic Wireframes

About the App

• This app can is for anyone who would like to keep track of their favortie Marvel members
• You can CRUD through each member and search to find your members

Features

• This app is google authenticated using Firebase
• You can search by role or by name of member

Code Snippet

// search bar component with dynamic Next.JS router
export default function SearchBar() {
  const [searchInput, setSearchInput] = useState('');
  const router = useRouter();

  const handleChange = (e) => {
    setSearchInput(e.target.value.toLowerCase());
    // console.warn('e.target.value', e.target.value.toLowerCase());
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    if (searchInput !== '') router.push(`/search/${searchInput}`);
    setSearchInput('');
  };

Credits

• Thank you for rubber ducking your dynamc routes using Next.JS Eric!!
• Thank you to E21 for guiding me through my errors and discussion tickets

Contributors

• Angie Gonzalez✦

individual-assignment-team-roster's Issues

Update Members Checklist

As an authenticated user:

• I should be able to see an edit button on each member card.
• when I click the edit button I should see a form with the member information pre-populated in the form.
• I should be able to edit the information in the form and hit the submit button.
• when I submit the edit form firebase should be updated (PATCH request) and the Team view should update

Authentication Checklist

As a User who is Logged OUT:

• I should only be able to see the authentication screen
• I would like to be able to click on an authentication button/login-button and login via google

As a User who is Logged IN:

• I should not be able to see the authentication button/login-button
• I should be able to see the Team view -- see all my data
• should be able to see a log out button

Read checklist

As an authenticated user:

• I should be able to see the Team view with all the members I have created
• I should not be able to see members that were created by another user
• use the hook useAuth:user to ensure this

Firebase Setup Cont.

• set up the firebase rules!
• for MVP first - rules for members data

Routing (MVP) checklist

This app is for authenticated users only (must use google to log-in)

As an authenticated user:
For TEAM:

• create a '/team' page for routing to be able to see all the team cards on the dom
• create a TEAM clickable link in navbar
• if I click the TEAM link in the navbar, I should navigate to '/team' and see an h1 tag that says 'Team'.

For NEW

• create a '/new' page that includes a form to be able to create a new member in a team
• create a NEW clickable link in navbar
• if I click the NEW link in the navbar, I should navigate to '/new' and see an h1 tag that says 'Add a Member'.

Setup Firebase

• setup firebase
• create ERD and mock data
• connect to ENV file in hard code

Delete Members Checklist

• As an authenticated user, I should see a delete button on each member.
• As an authenticated user, when I click a delete button that member should be removed from firebase and the Team view should update.

Deploy to Netlify

• make sure ENV variables on Firebase are in the local ENV file
• make sure those ENV variables are also on Netlify
• rename website
• make sure new website name is added to authentication > settings > authorized domain names in Firebase

readme img

CREATE checklist

Only available to authenticated users who log-in w/ google:

• I should be able to click the NEW link in the navbar that displays a form to add a new member.

  • when clicking NEW it will take us to create a new member path to '/new'
  • this '/new' will call the component MemberForm() with the jsx of the form:
    • this form will intake an object
    • we will create a createMember() API call that will push our new data up to firebase

• when I create a member, the member object should include my uid.

  • the form here will have to useState:formInput
  • we will have to useAuth: user because this is authenticated
  • we will have to useRouter: redirects so that we can tell the code which page to render

• when I fill out the form and submit a new member should be created in firebase and should now show in my Team view.