React JS Website

NOTES.md

Additional Notes

1. Feel free to reach out to us via email (tech-hr@eduvanz.com or hr@eduvanz.com) in case of questions.
2. Please submit the solution via Github. If you're not a Github user or if you're using a private repo, bundle your Git repo and include it as an email attachment.
3. Bonus points for unit tests and coverage.
4. Bonus points for good commit messages.
5. Bonus points for proper TypeScript usage.
6. Bonus points if graphs are used for the reports.
7. Bonus points for "better UX" — however you interpret & showcase it.

PROBLEM_STATEMENT.md

🖥️ Meetup RSVP Website

You have an upcoming ReactJS meetup where you need the participants to RSVP so that you can prepare appropriate accommodations and transport facilities. The participants can bring up to two guests along with them.

You also need an admin screen that contains list of all the participants which can be searched based on their names and locality

The task is to build three screens.

First Screen

It will have a registration form with following fields —

1. Name
2. Age
3. D.O.B (JS Date object)
4. Profession (can be Employed/Student)
5. Locality
6. Number of Guests (0-2)
7. Address (multiline input upto 50 characters)

With a submit button you can simply mock a submit API call with services like Beeceptor. Also ensure you show an alert to the user if they click back while editing the form.

Second Screen

Second screen in the drawer should have a searchable list of all the RSVP'd users (JSON data can be mocked using a tool like Mockaroo). The list can have the name and locality of the RSVP’d user. The entire list should be searchable with a single text input by the user’s locality and name. Clicking an user in the list will open a new screen that contains all the details collected in the first form.

Third Screen

The third screen will have useful reports regarding the event. The reports you'll need to build are —

1. Number of people in a given age range (13-18, 18-25 and 25+).
2. Number of people by localities.
3. Average group size of people attending the event (using guests count).
4. Professionals & students count.

There should be easy navigation on the top to navigate and the site should also render on mobile/responsive