A React application with a data table displaying artwork data from the Art Institute of Chicago API, featuring server-side pagination and persistent row selection.
- Vite – Build tool
- React 19 with TypeScript
- PrimeReact – DataTable and UI components
- Displays artwork data: title, place of origin, artist, inscriptions, start date, end date
- Server-side pagination – Fetches data per page from the API (no mass data storage)
- Row selection – Individual checkboxes, select/deselect all on current page
- Custom selection overlay – Select n rows via input (limited to current page to comply with no-prefetch rule)
- Persistent selection – Selections persist when navigating between pages (stored by ID only)
npm install
npm run devnpm run buildUse Netlify, Cloudflare Pages, or another cloud provider. Do not use Vercel.
- Push this project to a public GitHub (or GitLab/Bitbucket) repository.
- Go to netlify.com and sign in.
- Click Add new site → Import an existing project.
- Choose your Git provider and select this repository.
- Netlify will read
netlify.tomland set:- Build command:
npm run build - Publish directory:
distLeave these as-is and click Deploy site.
- Build command:
- When the build finishes, your site URL will be shown (e.g.
https://random-name-123.netlify.app). You can change it in Site settings → Domain management.
Netlify (drag & drop, no Git):
- On your computer run:
npm run build - Go to app.netlify.com → Sites → Add new site → Deploy manually.
- Drag and drop the
distfolder (inside your project folder) into the drop zone. - Netlify will give you a live URL.
- Use the live URL as your “Deployed Application URL” for the assignment.
- If you use a custom domain later, you can add it in the provider’s dashboard (Netlify or Cloudflare).