RyanGC93/fitnessOverflow

A fitness themed Q/A Board that is a clone of Stack Overflow

Fitness Overflow

A fitness/health based clone of Stack Overflow
Explore the docs »

View Demo . Wiki · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

![Product Name Screen Shot][product-screenshot]

Fitness Overflow is a fitness and health clone of Stack Overflow. Users are able to browse, ask,search, answer and vote on fitness and health related questions. The site uses User-based session authentication to interact with the website and access these features.

Feature Highlights

Ajax Based Voting on Answers

• Users can vote on answers which via handled by ajax
• A fetch request is made to the server which will update votes on the server and return a json object so the DOM reflects the change

Ajax based search

• A fetch request is made using the input of our search bar to make an api request to the server using the search route to query the database and returning results that title matches the search criteria and updating the DOM using AJAX.

Project Challenges

![Product Name Screen Shot][product-screenshot]

Fitness Overflow is a fitness and health clone of Stack Overflow. Users are able to browse, ask,search, answer and vote on fitness and health related questions. The site uses User-based session authentication to interact with the website and access these features.

Code Snippets

Code Snippet: API route for upvote/downvote

window.addEventListener("load", (event)=>{
    let questionId = document.getElementById('questionId').innerText

    let votingContainers = document.querySelectorAll(".voting-container")

    votingContainers.forEach(voteContainer =>{
        let answerId = voteContainer.id
	// code removed for brevity
 	}
	// code removed for brevity
        upvoteButton.addEventListener("click", async (event) =>{
            let res = await fetch(`/questions/${questionId}/answer/${answerId}/upvote`, {
                method: "PATCH",
                headers:
                {'Content': "application/json"}
            })
            const  json  = await res.json()
            counter.innerHTML=json.totalVotes
        })
})

router.patch('/:id(\\d+)/answer/:id2(\\d+)/downvote', asyncHandler(async (req,res)=>{
		const questionId = parseInt(req.params.id, 10)
		const answerId = parseInt(req.params.id2, 10)
	   const { userId } = req.session.auth

	   // //   console.log(downvotes)
	   
	   let existingVote = await db.Vote.findOne({where: {
		   userId,
		   answerId
	   }})
	   if(existingVote){
		   await existingVote.destroy()
	   }

	   const vote = await db.Vote.build({
		   userId,
		   answerId,
		   voteType: "upvote"
	   })
	   
	   await vote.save()

	   const upvotes = await db.Vote.findAll({
		   where: {
		   answerId,
		   voteType: "upvote"
		   }
	   })
	   const downvotes = await db.Vote.findAll({
		   where: {
		   answerId,
		   voteType: "downvote"
		   }
	   })

	   let totalUpVotes= upvotes.length
	   let totalDownVotes= downvotes.length
	   
	   let totalVotes = totalUpVotes - totalDownVotes

	   res.json({
		   title: 'Question',
		   totalUpVotes,
		   totalDownVotes,
		   totalVotes,
		   upvotes
	   })
   }))

Code Snippet: API Route For Search Functionality

router.get('/', requireAuth, asyncHandler(async (req,res) =>{
    const queryTerm = req.query.search
    const questions = await db.Question.findAll({include: [db.User, db.Answer], order: [['createdAt', 'DESC']], where: { title: { [Op.iLike]: `%${queryTerm}%` } } })
    res.json({questions})
}))

Project Challenges

1. Implementing the upvote/downvote functionality
   • The challenge we encountered when implementing the upvote/down feature is getting the necessary information to make a fetch request.(the answer id and question id) We overcame this particular challenge by creating unique IDs that can be reference for each answer and using the id to pass the information.
2. The git workflow
   • The gitworkflow involving branching, merging branches and pull requests was diffcult at first because we werent use to this type of workflow. To overcome this challenge we took our time and consulted with each other to make sure that each movement for this workflow was correct

Built With

• Javascript
• CSS
• Pug
• PostgreSQL
• Express

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/RyanGC93/fitnessOverflow.git

2. Install NPM packages

   npm install

Running Locally

1. To Start The Project Locally

   npm start

The Project is served and can be seen on localhost:8080

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Your Name - @twitter_handle - Fitness Overflow

Project Link: https://github.com/RyanGC93/fitnessOverflow