Overview:

The Grids and Tables - Responsive App is a web application built using React, TypeScript, NextJS, Redux, and Styled Components. It features responsive design, server-side rendering of data fetched from a REST API, client-side search, pagination, and sorting of data. It also persists the last searched and sorting preferences on the client-side and is optimized for accessibility. The app can be installed as a PWA (Progressive Web App) and has achieved a perfect score for all parameters with the Google Lighthouse Audit. It has also been written in TypeScript and follows continuous deployment with Now.sh.

Features:

• Responsive: Works on mobile, tablets, and desktops.
• Server Side rendering: Data fetched from a REST API is server-side rendered.
• Client-side search: Features a client-side, regex-based search.
• Client-side pagination: Supports client-side pagination of data.
• Client-side sorting: Allows sorting of data based on Title and Date.
• Persistence of preferences: Persists the last searched and sorting preferences on the client-side.
• Accessibility optimization: Optimized for accessibility.
• Offline functionality: Can be installed as a PWA and works offline with the help of a Service Worker.
• Perfect Lighthouse score: Achieved a perfect score for all parameters with the Google Lighthouse Audit.

Installation:

To use the Grids and Tables - Responsive App, you need to have the following prerequisites:

• Node 10+
• Yarn

Once you have the prerequisites, you can follow these steps to set up and run the app:

1. Clone the repository:

git clone <repository_url>

2. Navigate to the project directory:

cd grids-and-tables

3. Install the dependencies:

yarn install

4. Start the development server:

yarn dev

The app will be running on http://localhost:3000.

To run a production-ready build, use the following command instead:

yarn build
yarn start

The app will be running on http://localhost:3000.

Summary:

The Grids and Tables - Responsive App is a feature-rich web application built using React, TypeScript, NextJS, Redux, and Styled Components. It offers responsive design, server-side rendering of data, client-side search, pagination, and sorting of data. It also provides features like persistence of preferences, accessibility optimization, and offline functionality. The app has received a perfect score on the Google Lighthouse Audit and follows continuous deployment with Now.sh.