- Clone this repo
- Run
npm install - If you are planning to use firebase, create a firebase project and add your config in
src/services/firebase - Sample express server is added within this repo. Run
npm run start-serverto start the server in port8000. - This server contains sample get and post request apis and will be accessed in Login page from browser as an example (Component:
Auth.tsx) - You are free to use either server and/or firebase for state management
- Run
npm run startto start the react web server. This will open the landing page with login button
-
Use google login/email login to authenticate user
-
This app has 2 routes (
/and/theater) -
Convert the route
/theateras authenticated i.e. user can go into this page only if he/she is logged in -
Theater page
- This page will have a conference map with tables as below
- Once user is authenticated, users will be redirected into this theater page
- Create table DOM elements by accessing
tablesfrom theTableConfig.first-tableis added as example.19tables are present in the configuration - Users can go into any table and their avatars will be shown as below.
- Assign a table to the user when they land on this page
- Assignment logic
- Loom video: https://www.loom.com/share/6db9b60fb8f7433191b812ed42a36496
- First user will go into first table, second user will be paired with first user in first table
- third user will go into second table and fourth will be paired with third user in second table
- once all the tables have 2 people, next incoming user will go into first table and then second and so on
- Once all the tables have 3 users, next incoming user will go in first table and then second and so on
- Users can switch table at any point of time
- Assignment logic
- User should be able to switch tables by double clicking on the table
- If user refreshes the browser at any point of time, they should land on same table
- At any point of time, one user can be in only one room
- Max allowed in a table should be configurable ranging from 3 - 6
- When a table is full and new user tries to enter, show error notification
- Create a button in the
theaterpage. On clicking this button, highlight the currently logged in user avatar with an animation
- This page will have a conference map with tables as below
-
Functionality testing (Bonus)
- How to test this feature in mass scale?
- This conference map can have 100 people max. How as a developer can you test this with max capacity?
- You can explain this in loom video, if you dont have time to implement.
- Zip file containing the codebase (except node_modules)
- Create a loom video with:
- demo of the application
- Challenges you have faced and how you solved it
- How can you improve your code
- Comments on this test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent