cbgaindia / constituency-frontend

A unique, one-of-its-kind dashboard that opens up constituency-wise fiscal information for several centrally sponsored and central sector schemes.
https://constituency.openbudgetsindia.org/
MIT License
1 stars 0 forks source link
nextjs styled-components

Constituency Dashboard

Part of the Open Budgets India Project




MIT License

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

Features

Getting Started

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

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

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.