Infinite Scrolling Contact List App

This is a responsive infinite scrolling contact list app built using React. It allows authenticated users to view a list of contacts with their photos. The app implements fake login functionality, and the main list UI can only be accessed by logged-in users.

App Deployed Link:- https://face-prep-assignmnet-1.vercel.app/

Usage

1. Open the app and you will be directed to the login page.
2. Use the following credentials to log in:
   • Username: foo
   • Password: bar
3. After successful login, you will be redirected to the main contact list page ("/home").
4. The contact list will initially load a partial list of contacts.
5. As you scroll to the end of the page, the app will show a loading feedback and load more contacts after a 1-second delay.
6. The list is designed to be responsive and should look correct on various screen sizes.
7. Each contact in the list displays their name and profile picture.
8. If you wish to log out, click the "Logout" button, and you will be redirected back to the login page.

Tech Stacks Used

• React JS
• Typescript
• Context API
• Chakra UI
• Javascript
• React-Router-Dom
• CSS

Overview

Login Page Image ↓

Home Page Image ↓

Tablet View ↓

Mobile View ↓

Feel free to explore the code and make any necessary modifications to suit your specific requirements. Enjoy using the infinite scrolling contact list app!