Nextjs Templates & Themes Logo Nextjs Templates & Themes
Grids And Tables screenshot

Grids And Tables

Author Avatar Theme by Anmdotdev
Updated: 12 Aug 2021
5 Stars

A responsive web app built with React, Redux and TypeScript

Github Live Preview

Categories

React Styled components

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>
  1. Navigate to the project directory:
cd grids-and-tables
  1. Install the dependencies:
yarn install
  1. 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.