User Story

As a user, I would like to be able to create and manage my groups, so that I can view and create bills associated with groups and choose members to share bills with.

Detailed Description

The user should be able to create a group and add other people to this group. In addition, the user is expected to manage the group, including editing the group name and group info, adding people to the group, and removing people from the group.

Acceptance Criteria

• Given Group Name and Selected Users, then Create a New Group
• Given Group Info, then Edit the Information of the Group
• Given Some Users Not in the Group, then Add People to the Group
• Given Some Users in the Group, then Remove People from the Group

Currently, we are using tinyDB, and we should migrate the data and the app to the AWS dynamoDB.

Description:

The objective of this task is to establish the foundational structure of our new web application utilizing React.js with Typescript. This involves setting up the initial project configuration, ensuring Typescript is correctly integrated for type-safety and long-term maintainability.

Scope:

• Scaffold a new React.js project with Typescript support.
• Set up a robust folder structure that will accommodate components, utilities, hooks, and state management.
• Configure Typescript for strict type-checking to catch errors at compile time.
• Ensure that the build system is correctly configured for both development and production environments.
• Integrate essential developer tools such as linters, formatters, and pre-commit hooks to maintain code quality.
• Implement a basic routing mechanism with react-router.

Requirements:

• Create a README.md file documenting the setup process, available scripts, and common troubleshooting steps.
• Include a .gitignore file configured for a Node.js project to prevent unnecessary files from being committed.
• Use the latest stable versions of React.js and Typescript.
• Ensure that the application renders a simple "Hello World" page as a starting point.

Expected Outcome:

A ready-to-develop web application environment, equipped with Typescript for type-safety and developer tools for code quality. The initial commit should be a clean, runnable state with clear instructions for starting development.

Description

Give a clear and concise description of what the bug is.

Steps to Reproduce

Steps to reproduce the bug:

• Step 1
• Step 2
• Step 3

Expected Behavior

Give a clear and concise description of what should be the expected behavior.

Additional Context

Enter any other details such as dependencies, environment, examples, etc.

Relevant screenshots

If applicable, add screenshots to help illustrate the bug.

User Story

As a [Role], I would like [Requirement] so that [Reason].

Detailed Description

Provide additional details and context.

Acceptance Criteria

• Given [Condition], then [Expected Result]
• Given [Condition], then [Expected Result]
• Given [Condition], then [Expected Result]

Architecture Description

• You learned in class several architectural patterns for structuring the landscape of your application, the structure of its components, and the user interface. Analyze and document the non-functional requirements (performance, scalability, availability etc.) of your application, describe the components of your architecture, and the architecture patterns you will organize them after and why (including how this addresses the needs of your application). This should be done at the three levels of architecture (if applicable):
  • Across components (application landscape patterns)
  • Within components (application structure patterns)
  • For the UI components (user interface patterns)
• Create an architecture diagram for your application showing your landscape architecture (and other architectural patterns you may have used).

Document Link

https://docs.google.com/document/d/16b7Zf7Xr2PhzUmUNTw1aufKztwdk8E14w6X99ZI6VBg/edit?usp=sharing

Description:

The purpose of this task is to develop a set of CRUD APIs for our core data models using FastAPI. This will enable the front-end to perform basic data operations through a RESTful interface.

Scope:

Implement API endpoints for each of the basic database models.
Ensure that the APIs support all CRUD operations: creating new records, reading existing ones, updating records, and deleting them.

API Endpoints to Implement:

• POST /users/: Create a new user.
• GET /users/{user_id}: Read user details by ID.
• PUT /users/{user_id}: Update user details by ID.
• DELETE /users/{user_id}: Delete a user by ID.
• Similarly, endpoints will be defined for Group and Bill models.

Requirements:

• Each endpoint should validate input data for type and constraints.
• Implement path and query parameters where applicable.
• Utilize FastAPI's dependency injection system for common tasks like DB session management.
• Apply proper HTTP status codes for all responses.
• Secure endpoints as necessary, e.g., using OAuth2 with Password (and hashing), including JWT tokens.

Expected Outcome:

A fully functional API layer that can be tested with tools like Swagger UI or Postman. The API will allow our front-end team to begin integrating with the backend immediately.

Epic

People want more flexibility when it comes to how a group payment is made. We need to create a group payment system that gives groups flexibility and advice with how a payment is to be split and what currency each member pays in.

User Stories

• Users want to have flexibility with how their groups split payment.
• Users want help figuring out how their groups should split payment.
• Users want to be able to choose what currency to pay in.

Use Cases and Features

• Groups need to be able to choose how to split payments: equally, percentage-wise, or custom.
• We need to utilize LLMs to give spending suggestions to each group member.
• Users need to be able to convert between different currencies.

Tech Stack

• Frontend: Use React for a responsive site. Use the Ant Design UI framework to enhance our user interface design.
• Backend: Use LLM in Python to provide correct payment splitting advice.

Description:

The aim of this task is to establish a connection between our FastAPI backend and the React.js frontend. This involves setting up the necessary API calls from the frontend, handling the data appropriately, and ensuring that the frontend can effectively display and interact with data from the backend.

Scope:

• Identify the endpoints that the frontend will need to interact with.
• Implement API service functions using a library like Axios or Fetch API to make HTTP requests to the backend.
• Set up environment variables to store the API base URL.
• Ensure proper error handling and loading states in the frontend application when making API calls.
• Create frontend components that will display the data fetched from the backend.
• Handle form submissions from the frontend to POST data to the backend.

Requirements:

• Define TypeScript interfaces for the JSON objects that will be received from and sent to the backend.
• Use async/await for all asynchronous operations.
• Establish a state management solution (such as Context API, Redux, or MobX) if needed to handle the state of the data from the backend.
• Implement secure handling of sensitive data, including the use of HTTPS and authorization tokens if required.

Expected Outcome:

A frontend application that can seamlessly fetch and send data to the FastAPI backend, with all interactions handled in a user-friendly manner. The end result should be a demonstrable flow of data between backend and frontend, confirming the successful integration of the two parts of the application.

User Story

As a User, I would like to view my spending for a given month so that I can better understand my spending habits.

Detailed Description

The user should be able to select a month, and get a detailed bar graph or pie graph of their spending for that month. Including the breakdowns by category. The user should also be able to view a list of their most recent trainactions

Acceptance Criteria

• Given Selected Month, then depict bar graph spending in each category
• - [ ] Given Selected Month, then depict pie graph spending in each category
• Given Selected Month, then show a list of the user's most recent transactions

• PyLint
• Python unit tests

Description:

This task involves creating the first iteration of the Group details page UI in our application. The page should provide a clear and intuitive interface that displays detailed information about a user group, including members, settings, and related activities.

Scope:

• Design and implement the layout for the Group details page using our UI component library.
• Ensure the page is responsive and adheres to our established design system and style guide.
• The page should include sections for group information, members list, group settings, and recent activity.
• Implement the navigation structure to allow users to go back to the previous page or the main group list.

Requirements:

• Use React.js with TypeScript for component development.
• Integrate the UI with static data to begin with, preparing for dynamic data integration in the future.
• Apply best practices for accessibility and internationalization.
• Write basic tests for the components to validate their rendering.

Expected Outcome:

A visually appealing and functional Group details page that aligns with the overall design language of our application. The page should be ready for integration with backend APIs in subsequent development phases.

Backend CD (trigger by tagging):

• Build a Docker image for backend application (write Dockerfile) https://docs.docker.com/engine/reference/builder/
• Build a Kubernetes (K8s) Helm Chart https://helm.sh/
• Find a Host for Docker image and Helm chart -> JFrog/DockerHub, etc
• Write Terraform to provision the cluster deployment https://www.densify.com/kubernetes-tools/terraform-eks/
• Write Github Action Workflow for Automatic Docker image building https://docs.github.com/en/actions/creating-actions/creating-a-docker-container-action#creating-a-dockerfile
• Automatically Helm chart packing https://github.com/helm/chart-releaser-action
  Github Releasing https://github.com/actions/create-release

User Story

As a User, I would like to be able to create bills for groups and split the bill so that I can log the bills and notify group members of their portion of the bill and have the history available.

Detailed Description

Provide additional details and context.

Acceptance Criteria

• Given [Condition], then [Expected Result]
• Given [Condition], then [Expected Result]
• Given [Condition], then [Expected Result]

Description:

This task involves setting up a Continuous Integration (CI) pipeline for our frontend repository that performs static code analysis to ensure code quality, style consistency, and to catch potential errors early in the development cycle.

Scope:

• Choose a CI service (such as GitHub Actions, Travis CI, CircleCI, etc.) to integrate with our repository.
• Configure the CI pipeline to run on every push and pull request to the main branch.
• Set up static code analysis tools such as ESLint for TypeScript/JavaScript linting, and Prettier for code formatting.
• Implement a code quality checker like SonarQube or CodeClimate, if applicable.
• Configure the CI to run unit tests and report any failures.
• Ensure that the pipeline blocks merging to the main branch if any checks fail.

Requirements:

• Document the setup process and configuration in the project's README.md file.
• Include a .eslintrc or similar configuration file for the linters in the codebase.
• Add a .prettierrc file to maintain consistent code formatting.
• Ensure the CI configuration file is well-commented to explain each step and its purpose.

Expected Outcome:

A fully functional CI pipeline that automatically checks every push to the main branch, ensuring that the frontend code adheres to our project's coding standards and is free of errors before it can be merged.

Design Description

• Describe the design of your (landscape level) applications, including their structure and behavior. Use design-level UML diagrams to communicate this. Highlight any GoF (or other) patterns you may have used.
• Describe the motivations of your design choices and why they respond to the requirements that you identified and documented during analysis.

Document Link

https://docs.google.com/document/d/16b7Zf7Xr2PhzUmUNTw1aufKztwdk8E14w6X99ZI6VBg/edit?usp=sharing

Description:

This task focuses on updating our 'Getting Started' documentation for both backend and frontend development. The updated document should guide new developers through the setup process, tool installation, and basic commands needed to start working on the project.

Scope:

• Review and revise the current setup instructions for accuracy and clarity.
• Include a list of prerequisites such as software, environment setups, and dependencies.
• Provide step-by-step instructions for setting up the development environment for both backend (possibly including database setup, server running, etc.) and frontend (including any relevant frameworks, libraries, etc.).
• Detail the process for running a local development server for the backend and how to serve the frontend locally.
• Explain how to run tests to ensure the setup was successful.
• Include troubleshooting tips for common setup issues.
• Ensure documentation reflects any recent changes in technology stack or project structure.

Requirements:

• Instructions must be clear, concise, and easy to follow for developers of varying skill levels.
• Use markdown for formatting so the document is readable both in plain text and rendered forms.
• Validate all commands and steps on a clean environment before publishing.
• Incorporate screenshots or GIFs where visual instructions are necessary.

Expected Outcome:

An updated 'Getting Started' document that provides all the necessary information for new developers to set up their development environment without external assistance. The document should be welcoming to contributors and reflect the best practices for getting up to speed with our project's development workflow.

Implementation Status

• Describe where you are in implementing your application’s design. Include a list of links to epics and use stories that you have already completed (broken by sprint) and the ones that are still in the backlog. Comment on the successes and challenges of using Scrum that you faced.
• Describe the implementation status (% of completion) of your components and point out their locations in your repository.
• Highlight any libraries, frameworks, or over-the-shelf components that you may have chosen to use when realizing your application. Describe the tradeoffs you considered when you chose them.
• Describe any special techniques (e.g., code generation, test driven development, CI/CD, etc.) you may have used in the course of your implementation.
• Include mock-up (or real) screenshots (if applicable) of your application’s user interface to give us an idea of what it will look like. If your proposed software does not have a graphical interface, describe how a user would use the software.

Document Link

https://docs.google.com/document/d/16b7Zf7Xr2PhzUmUNTw1aufKztwdk8E14w6X99ZI6VBg/edit?usp=sharing

Langchain Prompt template + Pinecone/Chroma (Vector database) + Chat UI + OpenAI API.

Epic

People want an easier way to organize and participate in group payments. We need to create a system for people to quickly/easily manage their payment groups and preferences.

User Stories

• Users want to be able to save their payment preferences.
• Users want to be able to create or join groups for payment.

Use Cases and Features

• Users need to be able to create and manage user profiles with stored payment preferences and history.
• Users need to be able to formulate groups dynamically and manage multiple financial circles simultaneously with ease.
• We need to be able to ensure timely settlements and user engagement with automated, personalized notifications for bill settlements, additions, and updates.

Tech Stack

• Frontend: Use React for a responsive site. Use the Ant Design UI framework to enhance our user interface design.
• Backend: Use AWS Dynamo DB to store an individual user's groups, preferences, and history.

Objective:

Outline the primary goal of setting up the initial database models with TinyDB.

Requirements:

Specify what models need to be created, the fields they should contain, and any relations between them.

Constraints:

Mention any specific constraints or requirements, such as the need for the models to be lightweight or optimized for performance.

Expected Outcome:

Describe what the completed task will achieve, such as a functioning database schema ready for CRUD operations.

Epic

People want to be able to easily view and analyze their spending history. We need to provide users with reports and analysis on their expenses. We also need to provide users with an easy way to export this financial data for their personal use.

User Stories

• Users want to be able to view reports and analysis on their expenses in order to glean insights into their financial habits and trends.
• Users want to be able to export their financial data for external use or deeper personal analysis.

Use Cases and Features

• We need to provide users with reports and analysis on their expenses.
• We need to ensure users can export their financial data seamlessly.

Tech Stack

• Frontend: Use React for a responsive site. Use the Ant Design UI framework to enhance our user interface design.
• Backend: Use AWS Dynamo DB to store an individual user's groups and spending history.

Analysis Description

• Analyze the functional requirements of your application and capture it with UML
  Diagrams. Please accompany each diagram with a brief textual caption that describes its purpose. Include the following UML diagrams in your report.
  • Describe the use cases of your application and the actors and external systems involved in them with a Use Case Diagram. Please include one use case diagram for the entire application.
  • Describe the actions of each actor and system and the control flow between them for your most important use cases with Activity Diagrams. Please include one or two activity diagrams showing your most important components in your application.
  • Describe the classes and data structures of your application and their attributes, relations and operations with a Class Diagram. Please include one class diagram for the entire application.
  • Describe some scenarios of the identified use cases involving the actors and classes of your application with Sequence Diagrams. Please include one or two sequence diagrams showing your most important components in your application.
  • Describe the behavior of your most complex classes (of the system as a whole) and how it responds to events with State Machine Diagrams. Please include one or two state machine diagrams showing your most important components in your application.
• Explain how your diagrams correspond to the functional requirements in your application.

Tasks

• Use Case Diagram
• Activity Diagrams
• Class Diagram
• Sequence Diagrams
• State Machine Diagrams

Document Link

https://docs.google.com/document/d/16b7Zf7Xr2PhzUmUNTw1aufKztwdk8E14w6X99ZI6VBg/edit?usp=sharing

User Story

As a User, I would like to set up a user account and log in to my account so that I can use this application to help me manage my bills.

Detailed Description

The first time user should create an account, and register a username, password, email, and telephone number. After creating the account, the user can use the username and password to login to the homepage. The user should also be able to log out from the homepage.

Acceptance Criteria

• Given Username, Password, Email, and Tel, then create this user's account
• Given Username and Password, then log in to this user's account

Tasks

• User Register
• User Login
• User Logout

Let's use Auth0: https://auth0.com/

RT