Frontend + Backend: Card Implementation and getMemberByName Endpoint

[JJBai2003]

Preparation:

• Make sure you have the most updated version of main. I added some fields to the schema.
• Create a new branch from main, name it whatever you want. Make sure all the changes are made in your branch.

Backend:

1. Similar to the getMember endpoint that you have previously worked on, implement the getMemberByName endpoint
2. The endpoint will take in a JSON with one field, name, i.e. req.body.name will be the parameter to the find mongoose method
3. We want the returned users to have name that matches the search query in a regular expression patter. Refer to this link for more information: https://stackoverflow.com/questions/38497650/how-to-find-items-using-regex-in-mongoose
4. Test the endpoint in Postman :)

Frontend

1. For the frontend portion of the sprint, you will be implementing the Card feature. For the design of the card, see https://www.figma.com/file/2cl2y4GTHYVYv9oFhllOt9/New-Member-Project?type=design&node-id=279-956&mode=design&t=d4HvYnwTjQ2sHLYv-4 this specific frame. Don’t worry about the icons on the right and the labels at the bottom.
2. Again, create Card.js and Card.css. You know the drill ;)
3. For this sprint, just make one card. If you would like to challenge yourself, you can create the components that takes in some props, otherwise, just hard code everything. Here is nice link that introduces you to React props: https://codesandbox.io/p/sandbox/react-props-contact-card-h02cp?file=%2Fsrc%2Fcomponents%2FCard.jsx

Have fun with this, and let me know if you have any questions :))