Available Scripts

In the project directory, you can run:

npm start

This starts the client portion of the application

npm run server

This starts the server

Your Task

Enhance this simple club member index to improve it UI/UX and implement additional functionality currently missing. You can install/edit anything you want to accomplish the assigned goals. You have no obligation to use any of the existing components that are provided. Please accomplish as much of the below as you can within the allotted time.

To create an organized and clear interview technical task for a frontend developer, you can group the requirements based on the specific skills and areas of knowledge you want to test. Here's how you could structure the requirements:

React

1. Add the missing create/edit/delete functionality
2. Ensure there are no unnecessary re-renders using the available React features to accomplish this
3. Implement react-router as needed

API and Data Management

1. Implement filtering through the server by the "name" field
2. Implement filtering by the "rating" and "activities" fields
3. Implement sorting by the "name" and "activities" field

Frontend Design and User Experience

1. Allow for filtering using the search bar
2. Improve the styling of the page

Bonus

The actions being performed (for example CRUD actions, filtering etc.) should be implemented to avoid unnecessary API calls in the scenario where the action is being performed multiple times in a small amount of time. For eg. performing filtering when typing in the search bar

Instructions

1. You can use basic UI libraries including but not limited to bootstrap for providing a flexbox based responsive layout.
2. The rest of the functionality and helper methods should be self implemented or be used from the already provided dependencies in package.json file.