Hackathon Project: Build a Letter and Email Writing Assistant App 📝

[nunyvega]

Objective

During our 5-hour hackathon 👨🏻‍💻👨🏻‍💻👨🏻‍💻, we'll build a single-page application that helps users write formal letters and emails. The user will input requirements, and the app will generate the content using the OpenAI API. Max will focus on front-end development, and Alvaro will handle the back-end logic and API integration.

Note: We will build it in this private repository. You should have a repo invite in your inbox :)

Task Breakdown

Max's Tasks (Front-End)

1. Create Basic Layout:

   • [x] Set up an HTML file for the app.
   • [x] Design an input area for users to describe their letter/email requirements.
   • [x] Create a display area for the generated content.

2. Styling with CSS:

   • [x] Use CSS to style the application, focusing on simplicity and usability.
   • [x] Ensure the layout is responsive for different screen sizes.

3. Implement Interactive Elements:

   • [x] Add a 'Generate' button to trigger content creation.
   • [x] Include a 'Copy to Clipboard' button for the generated content.

4. Prepare for API Integration:

   • [x] Setup a JavaScript function to handle user input and prepare it to be sent to the API (this will later be connected to Alvaro’s logic).

5. Testing Front-End Elements:

   • [x] Test the layout, buttons, and user input handling.
   • [x] Ensure that the UI is intuitive and user-friendly.

Alvaro's Tasks (Back-End & API Integration)

1. API Key Setup:

   • [x] Register and retrieve an API key from OpenAI.
   • [x] Set up a way to store and use the API key in the application.

2. Backend Logic for API Requests:

   • [x] Write the JavaScript code to handle API requests to OpenAI.
   • [x] Ensure proper handling of the user input to formulate the API request.

3. Handling API Responses:

   • [x] Process the API response and format it for display.
   • [x] Implement error handling for API requests.

4. Integrating Front-End and Back-End:

   • [x] Connect Max’s front-end input handling with the back-end API logic.
   • [x] Ensure that the 'Generate' button fetches and displays the content correctly.

5. Final Testing and Debugging:

   • [x] Test the complete flow from input to content generation.
   • [x] Debug any issues that arise during integration.

Notes 📝

• Both of us should work independently on our parts initially and then come together for integration.
• Communicate effectively during the integration phase to ensure both parts of the app work seamlessly together.
• Regularly commit and push changes to keep both ends in sync.
• Prioritization of tasks and moving fast is going to be paramount in this project. Clearly determine essential pieces which would be blockers and differentiate them from improvements or nice to have pieces of the project.

---

This hackathon is going to be a great mix of front-end and back-end skills, bringing together UI design and API integration.Happy coding, and let's have fun! 🚀💻

[nunyvega]

Wrapping the project up, the site is now live at: https://letter-creator-assistant.onrender.com/ We used https://render.com/ to deploy it now that Heroku does not have a free tier plan.