Product Listing page with server-side rendering
- First, install the dependencies:
yarn install
- Update the .env and run deployment server
yarn dev
Open http://localhost:3000 with your browser to see the result.
Additionally, you can run the test case using
yarn test
- UI with mobile first CSS using Tailwind.
- Fake API to fetch products with pagination.
- Page limit and pagination feature with server-side data.
- Fetch product API on server-side using getServerSideProps.
- Fetch categories API on client-side using apollo useQuery.
- For advertisement banner; to mock the actual CMS, I am fetching a image from unsplash and passing a random position (top | middle | bottom). Client can update the advertisement banner by updating it in the CMS.
- 2 columns layout on mobile view.
- Option to change the number of columns on desktop view.
- Sort option is not provided by this fake API.
- Filter by category features.
- Unit test cases for a few components.
- Write more test cases and increase the unit test coverage.
- On-demand ISR for advertisement banner update.
Tools and technologies used in this project
Check out https://productly-taupe.vercel.app/