Skip to content

Built this responsive application using MERN Stack. Only authenticated users can view the contact list & it also has an infinity scrolling and skeleton while loading.

Notifications You must be signed in to change notification settings

Kaviarasan-R/faceprep-contact-list-js-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Contact List - SDE Task from FacePrep

Tasks Completed :

  • The app must be a authenticated app. It can accept fake login with details, username: foo, password: bar!
  • Post login route is '/home'. This route shows our main list UI. This page shouldn't be accessible by non logged in users.
  • Logged in pages must show logout button. On click of this logout it will redirect to the login page.
  • There's no need to implement a server for fake login functionality. We're not going to judge you for doing so.
  • UI must be built using react.
  • The list is a contact list of user and photo. It can look like this (https://imgur.com/IIMJHGR). This design is just for your reference. Any deviations from this design is fine. There's no need for drop down or drawers. Just a list is sufficient.
  • It should look correct at least for a 320x480 sized view-port.
  • You can use a static list of users like this (https://randomuser.me/api/?results=500) or use this (https://randomuser.me/documentation#howto) free random user api if you fancy that.
  • Initially only load a partial list and when user scrolls to end of page. App shows loading feedback and loads more contacts after a delay of 1 sec.
  • You can use any open source lib. That's fine.

Bonus Tasks Completed :

  • Make a decent looking and responsive UI.
  • Implement a skeleton loader duing loading.
  • Written neat well formatted code.
  • Used git instead of zip files.

Screenshots - Desktop

Home Page

Screenshot 2023-03-21 at 12 50 38 AM

Login Page

Screenshot 2023-03-21 at 12 43 21 AM

Register Page

Screenshot 2023-03-21 at 12 43 34 AM

Contacts Page

Screenshot 2023-03-21 at 12 57 54 AM

Screenshot 2023-03-21 at 12 43 02 AM

User Details Page

Screenshot 2023-03-21 at 12 42 54 AM

Screenshots - Responsive Design

Home Page

Screenshot 2023-03-21 at 12 58 37 AM

Login Page

Screenshot 2023-03-21 at 12 59 50 AM

Contacts Page

Screenshot 2023-03-21 at 12 58 52 AM

User Details Page

Screenshot 2023-03-21 at 12 59 33 AM

Video Link : https://drive.google.com/file/d/1XarW21x5ENwM6CTZxGWFGNdH_A0dp2hf/view?usp=share_link

About

Built this responsive application using MERN Stack. Only authenticated users can view the contact list & it also has an infinity scrolling and skeleton while loading.

Topics

Resources

Stars

Watchers

Forks