A dynamic web application designed for internet advertising agencies, offering comprehensive tools to analyze viewer sentiments and comments on major streaming services like Paramount+. The application provides functionalities for tracking viewer engagement, summarizing sentiments, and viewing historical trends to optimize advertising strategies. Key features include:a
- Dynamic Data Updates: Ensures that sentiment and engagement metrics are continuously updated, providing real-time insights.
- Visual Sentiment Analytics: Offers intuitive visualizations of sentiment data, making it easier for agencies to interpret and act on viewer feedback.
- AI Chat Interface: An AI-powered chat interface allows users to interact with the application naturally, querying data, and generating reports through conversational commands.
- Comprehensive Viewer Analysis: Tracks various metrics such as likes, comments, shares, and overall engagement across different streaming platforms.
- Historical Trends: Enables agencies to analyze historical data to identify trends and patterns in viewer behavior over time.
By integrating these features, the application empowers advertising agencies with data-driven insights, enhancing their ability to create effective and targeted advertising campaigns.
Frontend Backlog
Backend Backlog
For our project management needs, we primarily used Linear. Linear is an efficient tool that helped us keep track of our tasks and user stories that needed to be completed. Here’s how we used Linear for our management needs:
-
Task Delegation and Assignment: Linear allowed us to delegate and assign tasks to our team members effectively. Each task or user story was assigned to a specific team member, ensuring clear ownership and accountability.
-
Tracking Progress: We used Linear to monitor the progress of each task. This included updating the status of tasks (e.g., to-do, in progress, completed) and setting due dates to ensure timely completion.
-
Managing Issues and Notes: Linear provided a platform to manage potential issues that arose during the project. Team members could log issues, add notes, and collaborate to resolve them quickly.
-
Commenting and Discussion: Each task in Linear had a comment section where team members could discuss details, raise concerns, or provide updates. This feature facilitated clear communication and collaboration among the team.
-
Prioritization: Tasks and user stories were prioritized using Fibonacci numbers (1, 2, 3, 5, 8, 13, etc.). This method helped us estimate the complexity and effort required for each task, ensuring that we focused on the most critical items first.
By using Linear, we maintained an organized and transparent workflow, which was crucial for the successful completion of our project.
This section outlines the steps needed to build and deploy the application. Follow these instructions to get the application up and running in a new environment.
Before you begin, ensure you have the following installed on your system:
- Node.js (version 14.x or higher)
- npm (version 6.x or higher)
- Firebase CLI (version 9.x or higher)
Make sure you have installed all the necessary dependencies for the project. You can do this by running:
$ cd web
$ npm install
For development, we are using husky to hook automatically tsc
and various linting tools to pre-commit action. To set up, run npm install
in the root folder as
tribe-a/ $ npm install
You should be able to see one .husky/
subfolder afterwards.
-
First, navigate to the directory where your project's web application resides
-
To build the application, you have two options. Use the appropriate command based on your situation:
a. Standard Build: Run the following command to build the application:
$ npm run build
b. Alternative Build: If you encounter TypeScript (tsc) or linting errors, use this command instead:
$ npx vite build
-
Add
.env
file in theweb/
sub-folder with the following contentVITE_OPENAI_API_KEY=<your_openai_api_key_here> VITE_PERPLEXITY_API_KEY=<your_perplexity_api_key_here>
-
Deploy to Firebase Hosting Once the build process is complete, deploy the application to Firebase Hosting with the following command:
$ firebase deploy --only hosting
The project follows a monorepo structure managed by npm workspaces, integrating both the frontend and backend in a single repository.
- Frontend: Located in the
web
directory, built with React and Vite. This part of the application handles the user interface and client-side logic. - Backend: Serverless functions located in the
functions
directory, managed by Firebase. These functions handle server-side logic, including API endpoints and background processing.
- CamelCase: Used for filenames and components to maintain consistency and readability. This helps in distinguishing multi-word names clearly.
- Kebab-case: Utilized for branch names to maintain uniformity and distinguish them clearly.
- Root Directory:
- .firebase/: Contains Firebase configuration files.
- .github/workflows/: Holds CI/CD workflows for GitHub Actions.
- .husky/: Manages Git hooks to enforce code quality and consistency.
- functions/: Contains the backend serverless functions written in TypeScript.
- web/: Contains the frontend application built with React and Vite.
- shared/: Intended for utilities and libraries shared between frontend and backend (not currently operational).
- .firebaserc: Configuration for Firebase projects.
- firebase.json: Configuration for Firebase hosting and functions.
- firestore.indexes.json: Configuration for Firestore indexes.
- firestore.rules: Security rules for Firestore.
- package.json: Project metadata, including dependencies and scripts.
This repository contains a TypeScript monorepo managed by npm workspaces. It includes a React-Vite application in the /web
directory and Firebase Functions in the /functions
directory, alongside shared resources in the /shared
directory.
/web
: React-Vite frontend application./functions
: Serverless Firebase Functions./shared
: Shared utilities and libraries used by both the frontend and backend.
As of this build /shared
is not working but web and functions will deploy correctly to firebase.
- Node.js (LTS version)
- npm (version 7 or higher, for workspaces support)
- Firebase CLI (for deploying and managing Firebase services)
Clone the repository and install dependencies:
git clone <repository-url>
cd ts-fb-monorepo
npm install
in the file `.firebaserc" change the project to where you want the project to deploy.
To run both the React application and Firebase Functions locally:
-
Web Application:
Navigate to the
/web
directory and start the development server:cd web npm run dev
More information on using the web application is in the Vite React Typescript Starter Readme
-
Firebase Functions:
Ensure that you have Firebase CLI installed and configured. Then navigate to the
/functions
directory and serve the functions locally:cd functions firebase emulators:start
This assumes you have the emulators installed. the function is deployable to firebase with
firebase deploy --only functions
To build all workspaces:
npm run build
This command builds both the React application and Firebase Functions.
To run tests across all workspaces:
npm run test
To deploy Firebase Functions:
cd functions
firebase deploy --only functions
To build and deploy the web application:
cd web
npm run build
firebase deploy --only hosting
Contributions are welcome! Please open an issue or submit a pull request.