Fullstack Searchbar + Frontend Touch Up

[JJBai2003]

The semester flew by so fast and we are almost near the end! Good job completing all the sprints and exceeding my expectations all the time! I am super proud of every single one of you. As we discussed in our last meeting, this sprint will piece together the different components we have worked on. There may be instances where you require the assistance of the other pair, feel free to communicate and collaborate! I want this to be an opportunity for everyone to learn and have fun, and I hope it’s been so so far :)

Some important dates coming up:

• Mid-semester presentation: April.22nd
• Sprint’s official due date: April.24th
• Poster content decided: April.25th during subteam meeting(i will talk a bit more about that during the meeting)
• Final showcase presentation completed: April.27th, practice during work session that day
• Final Showcase: April.29th

Aaaaanyways, here are the sprints that compile all the tasks each pair has expressed interest in. Please let me know if I missed anything, and I will add them to the sprint and provide some resources if necessary.

Part ZERO. Fullstack: Card Display
Currently, all the cards are hard-coded. There are many ways to connect the frontend to our database, and you can explore on your own time. Here are the steps that I will take to complete this task:

1. In App.js, use react components {useState, useEffect} to retrieve data from the database. Right now, we have contacts.js, which is the hardcoded database. We want to replace that with the actual data in our database.
2. Once we have the data, we can map them into the Card components that we already implemented, since the Card component has input props. This is similar to what we currently have, aka the “{contacts.map(createCard)}” line.
3. Here are some helpful resources:

• Fetching and mapping data: https://www.youtube.com/watch?v=MEab_a19ZGk
  ps. The link to our backend is localhost 3000 instead of localhost 4000 in this video.
• I don’t remember if I shared this before but this video is super helpful to help you understand the full stack development process: https://www.youtube.com/watch?v=-42K44A1oMA

Part I. Frontend Touchups

1. Implement Modal Popup following the Figma design
2. The implementation should be very similar to Card, using mapping methods to map the data to each field in the modal.
3. Here are some resources:

• Building Modal Popup: https://www.youtube.com/watch?v=9DwGahSqcEc
• Connecting Modal Popup to Card: https://stackoverflow.com/questions/68691313/add-modal-component-to-card-component-in-react

4. Add social media icons to the card and modal. I will attach the image resources to this sprint.
   
   
   

Part II. Full Stack - Searchbar Implementation:
If you completed Part Zero, then this part should be pretty intuitive. We already implemented search by name endpoint, which means that we will have the filtered data right away when we call the endpoint. The process will look something like this

1. Create an onClick function for the button in searchBar.js. The onClick function should call the backend getMemberByName endpoint.
2. Once we have the data that we want, render the home page so that only the people with names that matches the search query will be displayed. This can be done using the mapping function, similar to Part Zero.

• https://medium.com/@andwebdev/design-and-develop-a-functional-search-bar-in-react-44321ed3c244#8383:~:text=Go%20back%20to%20your%20react%20application%20and%20add%20this%20effect%20to%20your%20%E2%80%98App.js%E2%80%99.%20It%20will%20fetch%20the%20data%20every%20time%20you%20change%20the%20query.