Skip to content

README.md

Latest commit

 

History

History
145 lines (116 loc) · 4.58 KB

README.md

File metadata and controls

145 lines (116 loc) · 4.58 KB

PollSystem FE

A lightweight frontend for PollSystem built with Angular (standalone components) and Tailwind-style utility classes.
This README covers project overview, setup, common commands, structure, known issues found while exploring the codebase, and recommended fixes.

Project overview

This repository contains the frontend for PollSystem. It includes authentication UI (login, registration) and several "Polls" section such as "My Polls", "Voted Polls" and "All Polls". The project uses Angular standalone components and reactive forms.

Tech stack

  • Angular (standalone components)
  • TypeScript
  • Tailwind utilities (used via CDN in templates)
  • Angular Material (some modules imported)
  • HTTP client for auth API calls

Prerequisites

  • Node.js >= 16 (recommended 18+)
  • npm (or yarn / pnpm)
  • Optional: Angular CLI for developer convenience

On macOS you can install Node via Homebrew:

brew install node

Setup (macOS)

Open Terminal, then:

  1. Clone repo (if not already):
git clone <your-repo-url>
cd PollSystem/fe/poll-system-fe
  1. Install dependencies:
npm install
# or
# yarn
# pnpm install

Run locally (development)

If you have the Angular CLI installed:

ng serve --open

If you don't have the global CLI, use npx:

npx ng serve --open

Alternative (if package.json has scripts):

npm start
# or
npm run start

Build for production

ng build
# or
npx ng build
# or
npm run build

The built files output will be in dist/ by default.

Project structure (important files)

  • src/app/auth/login/login.component.ts — login component (ReactiveForms)
  • src/app/auth/login/login.component.html — login template
  • src/app/auth/registration/registration.component.ts — registration component (ReactiveForms)
  • src/app/auth/registration/registration.component.html — registration template
  • src/app/auth/auth.service.ts — auth HTTP calls (not shown fully in attachments)
  • src/app/... — other components and shared DTOs

Common issues found & troubleshooting

  1. Registration form values empty at submit
  • Symptom: this.registerForm.get('email')!.value returns empty string even after typing.
  • Likely cause: component template contains a full HTML document (<html>, <head>, <body>) rather than the component's inner HTML. Angular expects component templates to be fragments, not full documents. When a template includes these tags the Angular bindings may not attach to the rendered inputs.
  • Fix: Edit registration.component.html and remove the outer <html>, <head>, and <body> tags. Keep only the inner markup (container, form, inputs). Example: 
    <!-- keep only inner HTML -->
<div class="main-container">
  <!-- form markup here -->
</div>
  1. Password visibility toggle not working (clicking eye doesn't show password)
  • Symptom: clicking the eye keeps the password masked.
  • Causes found in the codebase:
    • Button inside a form without type="button" may cause submit behavior.
    • Script accessing DOM elements may run before the DOM exists (timing).
    • Using direct DOM manipulation is fragile in Angular.
  • Fixes:
    • Ensure the toggle button has type="button" (so it doesn't submit the form).
    • Prefer Angular approach: bind (click)="togglePasswordVisibility()" and implement toggling using template references or component variables. Example (recommended): 
      <input #pwdInput [type]="passwordVisible ? 'text' : 'password'" formControlName="password" />
<button type="button" (click)="passwordVisible = !passwordVisible">...</button>
      And in component: 
      passwordVisible = false;
    • If keeping DOM methods, call them from ngAfterViewInit or ensure handlers call event.preventDefault() and toggle icons safely.
  1. Router.navigate error: "Property 'navigate' does not exist on type 'Router'"
  • Likely cause: incorrect import/name clash. Make sure you import Router from Angular: 
    import { Router } from '@angular/router';
    And inject via constructor: 
    constructor(private router: Router) {}
  1. Tailwind via CDN in component templates
  • The templates include <script src="https://cdn.tailwindcss.com"></script> — this works for quick prototyping but isn't ideal for production builds. Consider integrating Tailwind with the Angular build pipeline (postcss) so utilities are available globally via styles and purged in production.

Contributing

  • Fork, create a feature branch, submit PR with descriptive message.
  • Keep changes focused and include tests where feasible.