Kettle Overflow

Kettle Overflow

Summary

Kettle Overflow is a web application inspired by Stack Overflow built using JavaScript using Express for the back end and Pug for the front end. Kettle Overflow allows users to:

• Create an account
• Log in / Log out
• Ask questions about Tea
• Answer questions about Tea
• Edit either questions or answers that belong to the user
• Delete answers that belong to the user
• Search for a question using the search bar

Technologies Used

• Express
• Heroku
• PostgreSQL
• BCrypt
• Pug

Planning Stage

• We planned out our database making sure that we made deliberate choices on which models were connected.
• We wrote the API routes using RESTful naming conventions.
• We talked through what we wanted the user experience to be.
  • We made a deliberate choice to not let users delete questions.
  • We created a feature list that walks through how the user interacts with the features we planned to create.
  • We wrote the frontend routeswith the user experience in mind.

Future Features

• Customizable profile for each account including profile photos
• Organizing questions into categories
  • Tags attached to each question
• Option to share images/videos in both questions and answers
• Comments on Answers
• Search result page includes up votes/down votes

Particular Challenges

Sarah:

Implementing upvotes/downvotes turned out to be a massive project, involving 140 lines of JavaScript, five helper functions, and database calls in three different route handlers. The database request that we used to populate answers gave us access to total votes, but not an immediately accessible way to distinguish between upvotes and downvotes. The problem remained of how to display two different AnswerVote counts for each answer displaying on the page. At the time of this writing I think the best way to implement upvoting and downvoting on an indefinite number of responses per question would be to change the structure of the database so that up- and downvotes are separate models, which would allow for a single database call to immediately provide the current value of each.

Lauren's Challenge

In the event listener I wrote for the Edit Answer button, I found it difficult to grab both the ID and content of specific answers in the database. The answer content was being populated on the page through iteration in the pug file. This made it so there weren't specific classes or ids for each answer, so I set an id of "answer.id" on the edit button, and used event.target.id to grab the answer ID. To grab the correct answer content, I saved event.path[1].children[0] to a variable and then split that variable on the section of the innerHTML that started with "<". I assigned the split variable to "contentSplit" and then reassigned the textarea innerHTML to contentSplit[0].

Grabbing the corrent answer ID and content <img width="500" alt="Screen Shot 2021-05-07 at 2 13 49 PM" src="https://user-images.githubusercontent.com/68528608/117509727-9c98eb80-af3f-11eb-8c4a-730143ec887b.png">

Assigning the correct content to the textarea <img width="509" alt="Screen Shot 2021-05-07 at 2 14 03 PM" src="https://user-images.githubusercontent.com/68528608/117509744-a1f63600-af3f-11eb-9459-10f204a09903.png">

Drew:

This was the first time that we had to update the database using a PUT request, so we had difficulty connecting the request to the route that is in our express file. We found that the content we were trying to send was located on the req.body because it is sent in the PUT request's body.

Fetch request:

PUT router: