Frontend Assignment

Task

Build a general dynamic table filter component that generates a filter query object in a specific format and consume it to filter a table with data fetched from firebase (used firebase as source)

FrontEnd - Gatsby/React

Database - FireStore

Scripts

Names will imply there task generally

react-scripts start	Deploy development version available at localhost:3000
react-scripts build	Build a production version that can be deployed to any static website hosting

Directory Structure

.
├───.github/workflows
└───src
    ├───pages (route page, only index.tsx)
    ├───components (src for react components)
    ├───config
    ├───constants (operation types)
    ├───styles (css styles)
    └───utils (utility functions)

Pages

Index page (/) - It's source code is in /pages/index.tsx

Brief Implementation Details -

• <App /> component is a div containing <Filters /> and <DataTable />, and these two child components are connected to each other, using state variables in the parent, ie. <App />

• <Filters /> handles the fetching of supported operations, as well as managing the filters array, according to chosen filters (where each filter row is a <FilterField /> component)

• <DataTable /> accesses the filters through App component

• Another key thing is, that logical operators like ==, >=, <= can only be used once, that's a restriction imposed in the code itself, more can be seen in the file src/components/filters.jsx and the filtering of these operations from future usage is being done in utils/difference.js

Suggested Order Exploring the codebase - pages/index.tsx, Filters.tsx, FilterField, DataTable, then for more detail, difference.ts

Todo

• 👍 Styling
• [DROPPED] Paging
• 👍 DB connectivity

LightHouse report

@ Aditya Gupta 2021