Frontend

[raiyanjaz]

NOTE: All branches for sub-issues are to be created off of and merge into branch 7-frontend, not main. Once front end is completely developed do we merge into main

• Following this design format:
  https://www.figma.com/design/PXTjW8Auyq8xPLbJwIRakQ/PoliLens?node-id=0-1&node-type=canvas&t=XQN9NF3TPLpiHByP-0

• Going to use React + Bootstrap

Sub-issues:

• Create dashboard components #17
• Create trade page #18
• Create bills page #19
• Create correlation page #20
• Determine search system for trades and bills #21
• Add to empty section #22
• Integrate data from mongoDB #23

[raiyanjaz]

• Even if database is not fully ready, can setup API endpoints with mock data in Express routes to test frontend-backend interaction.

Example of express setup:

const express = require('express');
const app = express();
const port = 5000;

// Mock Data
const bills = [
  { bill_id: '117HR897', title: 'Mock Bill 1', congress: 117, chamber: 'House' },
  { bill_id: '118S123', title: 'Mock Bill 2', congress: 118, chamber: 'Senate' },
];

// API Endpoint for Bills
app.get('/api/bills', (req, res) => {
  res.json(bills); // Send mock data
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Example of react frontend:

import React, { useEffect, useState } from 'react';

const Bills = () => {
  const [bills, setBills] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/bills')
      .then((response) => response.json())
      .then((data) => setBills(data))
      .catch((error) => console.error('Error fetching bills:', error));
  }, []);

  return (
    <div>
      <h1>Bills</h1>
      <ul>
        {bills.map((bill) => (
          <li key={bill.bill_id}>{bill.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Bills;