____________________________________________________________________________

Task Name: Admin-Managed User Access & Image Cropping

We are excited to invite you to participate in a skill assessment exercise designed to showcase your full
stack development capabilities. But we’re more concerned with JS, NodeJS, and database work. Your
task is to create a web application with the following functionalities:

Overview:

This task involves developing a system where administrators have control over user authentication,
enabling them to manage access and credentials. Additionally, the system includes an image cropping
feature, allowing users to edit and adjust their profile pictures as part of their account management.

Workflow: Please refer this image:

https://i.imgur.com/lS1phsG.jpg

Figma:
https://www.figma.com/file/81pwcgcPVoKYmy4KS7JwUx/WEB-DEVELOPMENT-TASK?type=design&m
ode=design&t=xWrZZHuRD3kPH838-0

Technical Requirements:

● Backend: Utilize Node.js and Express.js.

● Database: Store data using MongoDB.
● Frontend: Develop using HTML, CSS, and JavaScript (without React.js, Vue.js, or Angular).
● Design: Employ Bootstrap for responsive design.
● Additional Feature: Implement image size reduction and conversion to .webp format for storage.
You may need to use CropperJs as an external library.

Assignment Details:

1. Role-Based Authentication System (Two distinct roles: Admin) and User)

2. Admin Account Initialization (Admin accounts should be pre-configured with appropriate

credentials.)
 3. Admin Interface and Functionalities
● User Credential Management: Upon successful login, the admin is directed to a dashboard for
managing user credentials.
● Credential Display Limitation: A maximum of two user credentials should be displayed at a time.
● User Account Creation: Facility for the admin to create new user accounts.
● User Information Viewing: An option to view detailed user information on a subsequent page.
● User Data Table: A table showcasing user ID, name, photo, and available actions.
● Once admin creates a new user, then user IDs will be assigned: “-” in the name column, a default
photo in the photo column, and only a delete button in the actions column.

4. User Account Features

● User Login: Users log in using credentials provided by the admin.
● Profile Update Page: A page for users to enter and submit their personal details. Allow the user
to upload his or her image with an in-browser cropping tool and store the edited images on the
server.
● Update Approval Request: Submitted details are forwarded to the admin for approval.
● Conditional Data Viewing: The 'View' button is functional only if the user has previously
submitted their details.
● Approval Status Notification: A popup displaying the admin's approval status as given in the
Figma design.
● Approval Status Indication: The status, either “Not Accepted by Admin” or “Accepted by Admin,”
is clearly displayed.

5. Admin's Approval System

● Profile Update Review: Admins can review and decide on the approval of user profile updates.
● Post-Approval Actions: Following approval, only the option to delete the user's information is
available.
● Default Mode Reversion: Selecting the 'Delete' button reverts the user's information to the
default state.
● Deletion Functionality: The delete option removes the user's entire row of data, irrespective of
approval status.

Expected Outcome:
Your submission should demonstrate a well-functioning web application that adheres to the specified
requirements. Pay attention to UI design, responsiveness, and functionality, as these will be critical
aspects of our review. Highlighted statements are important for us to determine the best candidate.
Timeframe:
The task is designed to be completed within 5-6 hours.

Code Review:
Upload your code to a repository on GitHub. Provide the repository link for us to review your code (fill
out the Google form).

Once you are done with the above assignment, submit it on this Google Form:
https://forms.gle/5cyeBZm98attzuUJA