StarTalk 🌟

StarTalk is a Calvin University themed forum application built for CS336. It features a "Hupu-style" (sports forum) UI with dark mode, rating systems, and real-time discussions.

🚀 Features

• Hupu-Style UI: Custom dark theme with specific layout for comments and ratings.
• Rating System: Visual rating bars and summary statistics for topics.
• Real-time Discussions: Post and comment functionality powered by Firestore.
• User Management: Firebase Authentication integration.
• Permissions:
  • Authors can delete their own posts.
  • Commenters can delete their own comments.
• CI/CD: Automated deployment to Firebase Hosting via GitHub Actions.

✅ Project Requirements Fulfillment

This project meets the course requirements as follows:

• Web App: Yes, built with Angular 17.
• External UI Package: Uses @angular/material.
• Significant CSS Customization: Includes custom snow animation, global variables, and detailed component styling in styles.scss and component stylesheets.
• 3 of 4 Specific Features Implemented:
  • ✅ At least 5 custom components: Includes 8 components (add-post, comment-section, post-card, post-detail, post-list, rating, user-profile, weather-widget).
  • ✅ Full CRUD: Implemented in PostService (Create, Read, Update, Delete).
  • ✅ Remote storage in Cloud Firestore: Uses @angular/fire/firestore connected to a posts collection.
  • ❌ At least 5 pages to be routed to: (4 routed pages implemented (PostListComponent, PostDetailComponent, UserProfileComponent, AddPostComponent)).

🌐 Deployment

The application is deployed and accessible at: https://startalk-99a78.web.app

🛠️ Tech Stack

• Frontend: Angular 17 (Standalone Components)
• Styling: SCSS, Angular Material
• Backend: Firebase (Firestore, Auth, Hosting)
• CI/CD: GitHub Actions

💻 Getting Started

Prerequisites

• Node.js (LTS version recommended)
• Angular CLI (npm install -g @angular/cli)

Installation

1. Clone the repository:

   git clone https://github.com/Martin0101010101/startalk.git

2. Navigate to the project directory:

   cd startalk

3. Install dependencies:

   npm install

Running Locally

Run the development server:

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any source files.

🚀 Deployment

This project is configured with GitHub Actions for continuous deployment.

• Automatic Deployment: Any push to the main branch triggers a build and deploys the application to Firebase Hosting.
• Live Site: https://startalk-99a78.web.app

📁 Project Structure

• src/app/components: UI Components (Comment section, Rating bars, etc.)
• firestore.indexes.json: Firestore index definitions for complex queries.
• .github/workflows: CI/CD configuration files.

🎓 Student Learning Objectives (SLOs)

J4Q: Write functional code using map, filter, reduce, etc.

• Evidence:
  • RatingService uses reduce to calculate average ratings.
  • PostService uses filter to filter recent posts.
  • CommentSectionComponent uses map to transform distribution data for the UI.
  • CommentSectionComponent uses map to generate an array for star display.

J5Q: Correctly use new/unusual control structures

• Evidence:
  • Destructuring: Used in server.ts (const { protocol... } = req).
  • Ternary Operator: Used in CommentSectionComponent for calculating percentages (distributionTotal > 0 ? ... : 0).
  • Short-circuiting: Used in CommentService for validation (r.createdAt.seconds === reply.createdAt.seconds && ...).

AJ2Q: Use predefined asynchronous JavaScript functions (Promises)

• Evidence:
  • UserService extensively uses async/await and Promise<void> for profile updates (syncUserProfile, updateBio).
  • PostCardComponent uses try/catch blocks with await to handle post liking errors.

AN9: Defend the usefulness of separating view (HTML) from logic, and view-logic from data-providing services

• Defense:
  • Separation of Concerns: This project strictly follows Angular's architecture.
    • View (HTML): *.component.html files contain only the structure and display logic (bindings).
    • Logic (TS): *.component.ts files handle user interaction and view state, keeping the UI responsive and testable.
    • Data (Services): *.service.ts files (e.g., PostService, AuthService) handle all data fetching and business logic. This allows the same data to be reused across multiple components (e.g., PostService is used by both PostList and PostDetail) and makes the app easier to maintain and scale.

C3: Reason about the various flexible layout mechanisms

• Reasoning:
  • Flexbox: Used extensively (e.g., display: flex in styles.scss, user-profile.component.scss) for 1-dimensional layouts like aligning items in a row (headers, rating stars) or centering content. It provides excellent control over alignment and space distribution.
  • CSS Grid: Used in post-list.component.scss (display: grid) for 2-dimensional layouts, such as the main feed layout where we might want a sidebar and a main content area to align perfectly.
  • Comparison: Flexbox is chosen for component-level alignment (buttons, icons), while Grid is better for page-level structure.

AN5: Create custom components, with inputs and outputs

• Evidence:
  • Inputs: CommentSectionComponent uses @Input() postId and @Input() post to receive data from the parent PostDetailComponent.
  • Outputs: CommentSectionComponent uses @Output() commentAdded to notify the parent component when a new comment is successfully posted, allowing the parent to react (e.g., log or refresh).

P1: Enumerate, compare, and contrast the various mechanisms websites can use to store data persistently

• Comparison:
  • Cloud Firestore (Used): A NoSQL cloud database. It offers real-time synchronization, scalability, and easy integration with Angular. We chose this for StarTalk to enable live updates of posts and comments across all users.
  • LocalStorage: Client-side key-value storage. Good for simple user preferences (like "dark mode" toggle) but data is local to the browser and not shared between users or devices.
  • SQL Databases (e.g., PostgreSQL): Relational databases. Great for complex, structured data with strict schemas. Compared to Firestore, they are harder to set up for real-time frontend updates without additional infrastructure (like WebSockets).

P4A: Use the Subject-Observer pattern to communicate data changes

• Evidence:
  • PostListComponent uses a BehaviorSubject (refreshTrigger) to trigger data re-fetching when the user changes filters or requests a refresh.
  • AuthService exposes user$ as an Observable (backed by Firebase Auth state), which multiple components (Navbar, UserProfile) subscribe to for real-time authentication updates.

AN10: Create and use asynchronous data services

• Evidence:
  • PostService, CommentService, and UserService are all asynchronous services. They return Observables or Promises that components subscribe to or await. This ensures the UI doesn't freeze while fetching data from the network.

H2: Write correct HTML

• Evidence:
  • The application uses semantic HTML5 elements (<header>, <main>, <article> implied by components) and valid Angular templates. All components are structured with proper nesting and valid attributes.