Epic 2.13 Frontend for Notes Generator

[Ahmedr275]

Frontend Implementation: Notes Generator Tool

---

Overview
Upon completion of Issue #129, the Frontend can be created. This issue focuses on the frontend implementation to provide an intuitive interface for generating concise and structured notes from various input types such as text, documents, or multimedia content.

Details from Backend Issue #129:
The Notes Generator tool extracts key points and summaries from user-provided inputs, including text entries, uploaded files, or URLs. The backend processes the data to generate clear, structured notes in formats such as bullet points, paragraphs, or tables.

---

Scope of Work

1. Tool Description
   The Notes Generator tool will allow users to input content, define the focus of the notes, and review AI-generated summaries. Users will also be able to export the generated notes in multiple formats.

2. Design Implementation
   The frontend should follow the provided design mockups to ensure a seamless and engaging user experience.
   Design Mockup

3. API Integration

   • Use the backend API to process inputs and retrieve generated notes.
   • Ensure smooth interaction between the frontend and backend for submitting inputs and retrieving outputs.

4. Features to Implement

   • Input Form: Create a form where users can input text directly or upload files in supported formats (e.g., PDF, DOCX, CSV, URLs).
   • Focus Options: Allow users to specify the topic or area of focus for the generated notes.
   • Output Display: Present the notes in structured formats like bullet points, paragraphs, or tables.
   • Export Functionality: Add options to export notes as PDF or DOCX documents.
   • Validation: Implement input validation to ensure data is complete and meets the format requirements.

---

Acceptance Criteria

• The frontend matches the design mockup and provides a seamless user experience.
• The input form captures user data accurately and sends it to the backend API.
• Generated notes are displayed in a clear and structured format for review.
• Export functionality (PDF and DOCX formats) works as expected.
• The tool is responsive and functional across devices and browsers.

---

Resources

1. Design Mockup
2. Backend API Documentation
3. Backend Issue (#129)

---

Notes
This issue depends on the backend implementation. Frontend developers should refer to the API documentation to test integration and ensure the generated notes meet user expectations for clarity and usability.

[Asritha2001]

I will start working on this issue.

[patteesolomon]

Ok im on this one.

[Asritha2001]

Hi, can I work on this without the backend issue being resolved? I started working on it but couldn't see any changes on the page because Firebase doesn't have the relevant data. When I try to update Firebase, since I am working in the development environment, the data gets lost and is not updated on the website.

[patteesolomon]

There is no frontend magic that allows you to see what you need to. So I'd implement that. I am doing that currently. Because I gotta test the backend logic.