Supreme Court Cases Search Application

A modern, responsive web application for searching and browsing Supreme Court cases. Built with React, TypeScript, and a Node.js/Express backend that queries Wikidata for comprehensive case information.

✨ Features

• Elegant Search Interface: Beautiful hero section with animated gradients and smooth search experience
• Comprehensive Case Data: Detailed information including citations, courts, judges, and majority opinions
• Responsive Design: Optimized for mobile, tablet, and desktop with fluid layouts
• Real-time Search: Fast search results with loading states and error handling
• Modern UI/UX: Clean design with smooth animations and micro-interactions
• Accessibility: WCAG compliant with proper ARIA labels and keyboard navigation

🛠️ Tech Stack

Frontend

• React 18.3.1 - Modern React with hooks and functional components
• TypeScript 5.5.3 - Type-safe development
• Vite 5.4.2 - Fast build tool and dev server
• CSS3 - Custom CSS with CSS Grid and Flexbox
• Font Awesome 5.15.3 - Icon library

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• Axios - HTTP client for API requests
• EJS - Template engine (for existing backend)
• CORS - Cross-origin resource sharing
• Morgan - HTTP request logger

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: Version 18.0.0 or higher (LTS recommended)
• npm: Version 8.0.0 or higher (comes with Node.js)
• Git: For version control

Checking Your Versions

node --version    # Should be 18.0.0+
npm --version     # Should be 8.0.0+
git --version     # Any recent version

Installing Node.js

If you don't have Node.js installed or need to upgrade:

1. Using Node Version Manager (nvm) - Recommended:

   # Install nvm (macOS/Linux)
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
   
   # Install and use Node.js LTS
   nvm install --lts
   nvm use --lts

2. Direct Download:

   • Visit nodejs.org
   • Download the LTS version for your operating system
   • Follow the installation instructions

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/your-username/supreme-court-cases.git
cd supreme-court-cases

2. Install Dependencies

# Install frontend dependencies
npm install

# If you have the backend in a separate directory
cd backend
npm install
cd ..

3. Environment Setup

Create a .env file in the root directory (optional for frontend-only setup):

# Frontend Configuration
VITE_API_BASE_URL=http://localhost:5040
VITE_APP_TITLE=Supreme Court Cases

# Backend Configuration (if running locally)
PORT=5040
NODE_ENV=development

4. Start the Development Server

# Start the frontend development server
npm run dev

# The application will be available at http://localhost:5173

5. Backend Setup (Optional)

If you want to run the complete application with the backend:

# In a separate terminal, navigate to your backend directory
cd path/to/your/backend

# Install backend dependencies
npm install express axios cors morgan ejs

# Start the backend server
node server.js

# Backend will be available at http://localhost:5040

📁 Project Structure

supreme-court-cases/
├── public/                 # Static assets
├── src/                   # Source code
│   ├── components/        # React components
│   │   ├── HomePage.tsx
│   │   ├── SearchResultsPage.tsx
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── CaseCard.tsx
│   │   └── LoadingSpinner.tsx
│   ├── styles/           # CSS modules
│   │   ├── App.css
│   │   ├── HomePage.css
│   │   ├── SearchResultsPage.css
│   │   ├── Header.css
│   │   ├── Footer.css
│   │   ├── CaseCard.css
│   │   └── LoadingSpinner.css
│   ├── App.tsx           # Main application component
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles
├── index.html            # HTML template
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
├── vite.config.ts        # Vite configuration
└── README.md            # This file

🔧 Available Scripts

Frontend Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linting
npm run lint

# Type checking
npx tsc --noEmit

Backend Scripts (if applicable)

# Start backend server
node server.js

# Start with nodemon for development
npx nodemon server.js

🌐 API Integration

The application is designed to work with a Node.js/Express backend that queries Wikidata. The expected API endpoints are:

Search Endpoint

GET /search?q={query}

Response Format:

{
  "query": "search term",
  "results": [
    {
      "caseId": "Q123456",
      "title": "Case Title",
      "description": "Case description",
      "date": "2023-01-15",
      "citation": "123 S.Ct. 456",
      "court": "Supreme Court of the United States",
      "majorityOpinion": "Justice Name",
      "sourceLabel": "Source",
      "judges": "Justice 1, Justice 2",
      "articleUrl": "https://wikidata.org/wiki/Q123456"
    }
  ],
  "error": null
}

Case Details Endpoint

GET /case/{caseId}

🎨 Customization

Styling

The application uses a comprehensive CSS custom property system for easy theming:

:root {
  /* Primary Colors */
  --primary-blue: #1e3a8a;
  --primary-blue-light: #3b82f6;
  --accent-gold: #f59e0b;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Spacing */
  --space-4: 1rem;
  --space-8: 2rem;
  
  /* Shadows */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

Component Customization

Each component is modular and can be easily customized:

• Colors: Modify CSS custom properties in src/styles/App.css
• Typography: Update font families and sizes in the root variables
• Layout: Adjust spacing and grid layouts in component-specific CSS files
• Animations: Modify transition durations and easing functions

📱 Responsive Design

The application is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px
• Large Desktop: > 1400px

♿ Accessibility

The application follows WCAG 2.1 guidelines:

• Semantic HTML structure
• Proper ARIA labels and roles
• Keyboard navigation support
• Color contrast compliance
• Screen reader compatibility
• Reduced motion support

🚀 Deployment

Frontend Deployment

Netlify (Recommended)

# Build the project
npm run build

# Deploy to Netlify (install Netlify CLI first)
npm install -g netlify-cli
netlify deploy --prod --dir=dist

Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel --prod

Backend Deployment

Heroku

# Create Heroku app
heroku create your-app-name

# Deploy
git push heroku main

Railway

# Install Railway CLI
npm install -g @railway/cli

# Deploy
railway login
railway init
railway up

🐛 Troubleshooting

Common Issues

1. Node.js Version Issues

   # Check your Node.js version
   node --version
   
   # If using nvm, switch to LTS
   nvm use --lts

2. Port Already in Use

   # Kill process on port 5173
   npx kill-port 5173
   
   # Or use a different port
   npm run dev -- --port 3000

3. Build Errors

   # Clear node_modules and reinstall
   rm -rf node_modules package-lock.json
   npm install

4. CORS Issues

   • Ensure your backend has CORS enabled
   • Check that API URLs are correct in your requests

Getting Help

• Check the Issues page
• Review the browser console for error messages
• Ensure all dependencies are installed correctly

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Maintain responsive design principles
• Write semantic HTML
• Keep CSS modular and organized
• Test on multiple devices and browsers

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Wikidata - For providing comprehensive Supreme Court case data
• Font Awesome - For beautiful icons
• React Team - For the amazing React framework
• Vite Team - For the fast build tool

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Search existing GitHub Issues
3. Create a new issue with detailed information about your problem

---

Built with ❤️ by [Your Name/Organization]

A project by Global Open Initiative Foundation (GOiF)