FullThrottle Labs - Assessment Project

Member Activity Viewer Application

This project contains a Single Page Web Application made using React, deployed on netlify at this link with a backend JSON API Server made with json-server.js deployed on repl at this link with source code on this public github repo.

Do Check the JSON-Server repo to have further insight about backend of this app aka JSON API.

The Project Hierarchy

src--+
         |-components-+ <pure functional components depend on props>
         |                         |-activityPeriod <Activity Period List Item - Reusable >
         |                         |-header
         |                         |-footer
         |                         |-member <Member List Item - Reusable>          |
         |-containers-+ <components with own state depend on props & own state change>
         |                     |-main <the main page of site that shows MemberList made with member component>
         |                     |-activityPeriods <the modal that shows ActivityPeriodList made with activityPeriod component>
         |
         |-utilities-+
         |               |-axios <baseUrl configured instance of axios for fetching data>
         |
         |-static <all other files such as logo...>

Features

• MemberList

  • View
  • Search
  • Click Member To Open Activity Viewer Modal
  • Pagination : not yet implemented

• Activity Viewer

  • View
  • Filter By Date

Note

Select Dates between 01-03-2021 to 10-03-2021 for getting results as the data contain most activities of this period