District Dashboard

Part of the Open Budgets India Project

A unique, one-of-its-kind dashboard that opens up district-wise fiscal information for several centrally sponsored and central sector schemes.

• Features
• Getting Started
• Guide
  • Styling
  • Backend
  • Pages
  • Directory Structure
  • Data fetching
    • Pre-fetch data in the server-side
  • ESLint
• Developers
  • Boot the local instance
  • Architecture
• Contributing

Features

• ♿ Accessible: The platform is screen-reader friendly and keyboard accessible.
• 👩‍💻 Developer friendly: built with NextJS, CSS-in-JS, and REST API to make the developer experience a treat.
• 🚀 Styled-components: CSS-in-JS to get styling on steroids with fantastic developer experience.
• 📋 Typescript: Developed using typescript to improve development experience by catching errors and providing fixes.
• 🧱 Extensible: quickly extend and develop/import your own React components
• 📝 Well documented: complete set of documentation plus the documentation of NextJS and CKAN

Getting Started

• Install a recent version of Node.
• After cloning the repo, create an .env.local file in the root of directory.
• If using VSCode, install the recommened extensions.

Guide

Styling

This project uses styled-components to handle all of the stylings. It provides lots of features to improve the developer experience.

Pages and most component styles are available in the same file, although some components have a separate file, e.g.: ButtonComp.ts.

To make the styling scalable, we use a theme.ts file in the /config directory. It contains all the colors and gradients from the Design System.

Backend

The project requires a CKAN URL to fetch datasets. You can save them in the .env.local file in the following format. Read more about env.

We can also pass a Google Analytics Id in the same file

CKAN_URL = 'CKAN_URL/api/3/action';
NEXT_PUBLIC_GOOGLE_ANALYTICS = '';

Pages

• Home /
• States /[state]
• Explorer /explorer
• About /about

Directory Structure

The component directory contains all the components required to build the platform. The components are categorized depending on their purpose. You can read more about components.

Each directory contains an index.ts file to manage Default Exports.

Data fetching

The project uses REST APIs provided by CKAN to access, filter, sort, and search datasets.

We can find data fetching functions at /utils/fetch.ts. Read more in utils

Pre-fetch data in the server-side

When visiting a page, you may want to fetch the data on the server side. To do so, you can use getServerSideProps function from NextJS:

import { GetServerSideProps } from 'next';
import { stateSchemeFetch } from 'utils/fetch';

...

export const getServerSideProps: GetServerSideProps = async (context) => {
  export const getServerSideProps: GetServerSideProps = async () => {
  const stateData = await stateSchemeFetch();

  return {
    props: {
      stateData,
    },
  };
};
};

ESLint

The project uses the ESLint config provided by Next.js, eslint-config-next. We can modify the rules on a project basis in the .eslintrc.js file.

Developers

Boot the local instance

Install the dependencies:

npm i

Boot the demo frontend:

npm run dev

Open http://localhost:3000 to see the home page 🎉

You can start editing the page by modifying /pages/index.tsx. The page auto-updates as you edit the file.

Architecture

• Language: Javascript
• Framework: Next.js
• Styling: styled-components

Contributing

For any new feature or bug reports, please request them in issues.

See CONTRIBUTING.md for ways to get started.

Please adhere to Code of Conduct.