/approval-voting-web

Approval voting web app

Primary LanguageTypeScriptMIT LicenseMIT

Approval Voting System

License Next.js TypeScript Tailwind CSS

Table of Contents

Introduction

The Approval Voting System is a web application that allows users to create and participate in approval voting pools. It provides a fair and transparent platform for community decision-making by enabling users to vote on various initiatives and candidates.

Features

  • Create Pools: Administrators can create new voting pools with a name, description, and list of candidates.
  • View Pools: Users can browse available pools and view details, including candidates and descriptions.
  • Candidate Profiles: Detailed profiles for each candidate, including affiliations and external links.
  • Dynamic Images: Automatically generated images for pools and candidates using Next.js OG.
  • Responsive Design: Built with Tailwind CSS for a responsive and modern user interface.
  • Error Handling: Custom error and not-found pages for enhanced user experience.

Demo

Approval Voting System Screenshot

Technologies Used

  • Next.js: React framework for building server-side rendered applications.
  • TypeScript: Strongly typed programming language that builds on JavaScript.
  • Tailwind CSS: Utility-first CSS framework for rapid UI development.
  • Next.js OG: Open Graph image generation for dynamic image creation.
  • Husky: Git hooks management.
  • Prettier: Code formatter.
  • ESLint: Linting utility for JavaScript and TypeScript.

Getting Started

Prerequisites

  • Node.js (v14 or later)
  • npm or Yarn

Installation

  1. Clone the repository:

    git clone https://github.com/marc-aurele-besner/approval-voting-web.git
cd approval-voting-web

  2. Install dependencies:

    npm install
# or
yarn install

  3. Set Environment Variables:

    Create a .env file in the root directory and add the following:

    NEXT_PUBLIC_URL=http://localhost:3000

Running the Application

  • Development Mode:

    npm run dev
# or
yarn dev

    Open http://localhost:3000 in your browser to see the application.

  • Production Build:

    npm run build
npm start
# or
yarn build
yarn start

Project Structure

API Endpoints

Pools

  • GET /api/pools

    • Description: Fetch all available pools.
    • Response: 
      {
  "pools": [/* Array of Pool Objects */]
}

  • POST /api/pools

    • Description: Create a new pool.
    • Request Body: 
      {
  "poolName": "String",
  "description": "String",
  "candidates": [/* Array of Candidate Objects */]
}
    • Response: 
      {
  "success": true,
  "pool": {/* New Pool Object */}
}

  • GET /api/pools/[poolId]

    • Description: Fetch a specific pool by ID.
    • Response: 
      {
  "pool": {/* Pool Object */}
}

  • DELETE /api/pools/[poolId]

    • Description: Delete a specific pool by ID.
    • Response: 
      {
  "message": "Pool deleted successfully"
}

Candidates

  • GET /api/candidates

    • Description: Fetch all unique candidates across pools.
    • Response: 
      {
  "candidates": [/* Array of Candidate Objects */]
}

  • GET /api/candidates/[candidateId]

    • Description: Fetch a specific candidate by ID, including associated pools.
    • Response: 
      {
  "candidate": {/* Candidate Object */},
  "pools": [/* Array of Pool Objects */]
}

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository.

  2. Create a new branch:

    git checkout -b feature/YourFeature

  3. Commit your changes:

    git commit -m "Add your message"

  4. Push to the branch:

    git push origin feature/YourFeature

  5. Open a Pull Request.

License

This project is licensed under the MIT License.

Contact

For any questions or feedback, please contact Marc-Aurele Besner or open an issue on the GitHub repository.