Tally: The Liveability Dashboard

What I Built

Ever had a hard time shifting to a completely new neighborhood, area or an entirely new state for job or education? The uncertainty about the locality's living condition can make it even more stressful!
That's where Tally comes in. It is a survey-based solution to this problem. It collects insightful information from the local residents by asking them to rate amenities like schools or hospitals in their area or the standards of living like cleanliness, water quality, air quality, affordability and safety.
Once the survey is submitted, the aggregate data of the community ratings are shown on an interactive dashboard. This gives newcomers a concise snapshot of the area that they may potentially shift to.
I remember when I relocated to a new city for work, choosing the right neighborhood was overwhelming and exhausting. If I had a tool like Tally, it would've made my decisions much easier and quicker.
So in short Tally provides a "Liveability" Dashboard based on reviews from local residents. The accuracy of the dashboard would improve as more surveys are submitted, making it a reliable tool to find your next neighborhood. Moreover, anyone can contribute by filling the survey form, supporting this community-driven initiative.

Demo

Links for demo & repositories

Github Respository for frontend
Github Respository for backend
Frontend Hosted
Backend Hosted

Stack, tools & Libraries

• Frontend: React with Typescript
• Backend: Node.js with Typescript
• Database: Firebase Firestore
• UI Components: KendoReact and MUI
• Geolocation API: ipapi API for fetching user's location to auto-fill the location fields and creating the dashboard for that location.
• Graphs and Charts: Recharts used for visual data on the dashboard.
• Additional packages: sass, eslint, dotenv, react-router, etc.
• Version control: Github
• Backend Hosting & Github: Render
• Frontend Hosting & Github: Netlify

Flow & Demo

So let's get started with the demo!

Landing Page & Navbar

At first you will see Tally's landing page:

The navbar contains buttons to navigate to Landing Page, Survey Form and the Dashboard. These buttons are built using KendoReact's SvgIcons.

Survey Form

There are five accordions on the Survey Form. The page's title and subtitle have been made using KendoReact's Typography. Additionally, The accordion headers have a Tooltip functionality also created using KendoReact.

The first two sections are for filling in personal & locality details and the remaining are for ratings and comments.

The locality accordion includes three auto-filled fields (using the ipapi API), to avoid inaccurate data entry by the users. Although, the fields are still editable. In this section I have used the Label, Input and Autocomplete components from KendoReact.

Next we have the rating accordions. MUI's slider component has been used here to gather ratings from the residents about various amenities and factors in their area:

And the last section is for resident's feedback or comments about their locality:

Here I have used TextArea from KendoReact. Finally, the Submit Button has been built using KendoReact's Button component.

Once the entire form is filled the button would be enabled. After submitting, you will see a loading page which is KendoReact's Infinite Spinner Loader. If the form is submitted successfully a success notification is displayed using the Notification component from KendoReact. I will be demonstrating these components in the attached video.

The dashboard

The dashboard includes a search field to search the locality's name(it could be the area, pincode, city or state that you filled in the form), on pressing enter the loading screen would come up. If the data for the search locality was found, it would show the dashboard, else it would show the not found page.

The dashboard looks like this overall:

These charts have been created using React's Recharts Library. They contain dials showing aggregate ratings for various amenities and living standards, a dedicated section listing resident's comments about the area, and charts of the area's age and occupation distribution. The line chart shows various trends in air quality, noise levels, cleanliness and water quality aggregate over time.

A demo

This short demo demonstrates all the components, dashboard charts and the survey form. It also demonstrates how the app behaves when searching for an unknown location as well as the process of submitting a new survey entry. I have used the example of "Mumbai" city(which was not already existing in the database) and added a new survey entry for it which generated it dashboard.
demo video

KendoReact Components Used

The list of KendoReact Component used in Tally:

• Input
• Button
• Autocomplete
• Label
• Typography
• Tooltip
• Notification
• Infinite Loader
• Textarea
• SvgIcon

Conclusion

In conclusion, Tally is a user friendly platform designed to visualize living standards of different localities, relying heavily on extensive community participation and authentic feedback to get a wider range of data to visualize upon. Using React, Node, Firebase and component libraries like MUI and KendoReact has definitely contributed to Tally's enhanced performance and User Experience. As it's user base grows, Tally will get more and more accurate, becoming an invaluable tool for people looking to move out to a new place.