AI WARNING: Most of the submissions we receive are AI generated.
Core logic shouldn’t be AI Generated. AI generated submissions
will be discarded instantly.
IMPORTANT:
1. It is very important to go through the `Checks before Submission`
section of the doc before you submit the assignment else your
assignment will be discarded.
2. Watch this video explanation of the assignment before reading the
doc. You will need to rewatch this video multiple times during the
development process.
VIDEO LINK: react assignment explaination.mp4
*Note*: Steps and FAQs are mentioned below screenshots.
API: https://api.artic.edu/api/v1/artworks?page=1
COMPONENT: https://primereact.org/datatable/
Fields: title, place_of_origin, artist_display, inscriptions, date_start, date_end
ScreenShots:
STEPS:
1. Create React App
a. React app must be created with VITE
b. React app must use typescript. Javascript application will not considered
2. Add Prime React table
a. Add table using Prime React DataTable component
b. Fetch first page data on initially and show it in the table as described in video
explanation
3. Add pagination in table
a. Allow user to change page
b. Use server side pagination, means when user change page then application
should call the data from the server for the respective page(described in
video)
4. Add select row checkbox
a. Allow user to select rows one by one or all at once
b. Add a custom row selection panel(explained in video)
i. Custom row selection must persist the selected and unselected row
on page change(explained in video)
Checks before Submission:
Video explanation -> checks before submission.mp4
It is very important to make sure that these few features are working as expected before you
submit the assignment else the submission will be discarded.
1. There must not be any variable which is holding all the rows fetched in different
pages, else it will lead to out of memory issue.
a. On every page change you must call the api to fetch the respective page data
irrespective of how many times user visits a page
2. Rows selection and deselection must persist across different pages
a. As a user, if I visit page 2(or any page) and select(or deselect) a few rows and
switch to a different page then those selection(or deselection) must persist
when I visit page 2 later.
Submission:
1. Deploy your application on netifly or cloudflare or any cloud provider of your
choice except vercel
2. Share github repository and deployed url.
3. Submission must happen within 2 days of receiving assignment.
FAQ:
Q1. Can I submit this assignment with javascript instead of typescript?
Ans: No
Q2. Can I submit the assignment without using vite?
Ans: No
Q3. Why am I not getting any response?
Ans: Any assignment with issues mentioned in `Checks before Submission`
section will be ignored.
