Grids And Tables
A responsive web app built with React, Redux and TypeScript
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.
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.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Redux
Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.