Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: dev
Clone or download
Pull request Compare This branch is even with alissacrane123:dev.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
frontend
models
routes
validation
.DS_Store
.gitignore
README.md
app.js
package-lock.json
package.json

README.md

Welcome to KnowItAll

KnowItAll is a simple, fun challenge app for friends to fact check each other's statements and keep score. Enter a friend's idiotic statement and add each of your answers, KnowItAll will serve up google results through Serp Api (which in turn uses Google Custom Search). Select a winner, and KnowItAll will keep the score. View each of your friends rank, your personal stats, and past challenges.

Live Demo

Features

  • Add Friends, View Feed of Questions + Answers
  • Record Question Challenge data between two users
  • Custom Avatar rendering based on Question Statistics
  • Question Statistics profile page
  • Create/read/delete functionality for Google Custom Search Query

Technologies

KnowItAll is a team-built web-application utilizing the MERN stack (MongoDB, Express, React, Node.js).

Other technologies used:

  • Serp API (uses Google Custom Search)
  • Recharts visualization library
  • Axios

Visuals

Technical Info

Pulling Stats for Avatar Rendering

Avatar stat data is both pulled and transformed on the backend in a single query. Data is first filtered to a single relevant user (to filter by an id we create an ObjectId instance). Then the data is grouped and sum columns are calculated. After those sums are calculated we calculate an average percentage based on the data.

router.get("/stats/user/:id", (req, res) => {
  let myId = ObjectId.createFromHexString(req.params.id)
  Answer.aggregate([
    { $match: { author: myId } },
    { $group: {
        _id: "$author",
        Total: { $sum: 1 },
        Correct: { $sum: { $cond: [{ $eq: ["$winner", true] }, 1, 0] } },
       }
    },
    { $project: {
        Total: 1, Correct: 1, AvgPercent: { $toInt: { $multiply: [{ $divide: ["$Correct", "$Total"] }, 100] } }
      }
    }
  ])
    .then(answers => res.json(answers))
    .catch(err => res.status(404).json({ noAnswersFound: 'No answers found' }));
});

Serp API

User search entries are first processed to ensure options returned from the API call relate only to the intended question. The data returned from the axios call is then filtered to information that will be rendered on the frontend.

router.get("/:searchQuery", (req, res) => {
  const processedQuery = req.params.searchQuery.split(" ").join("+");
  const queryToUse = processedQuery;

    axios({
      method: "get",
      url: `https://serpapi.com/search.json?q=${
        queryToUse}&location=United+States&hl=en&gl=us&google_domain=google.com&api_key={secretKey}`
    })
      .then(result => {
       res.send(JSON.stringify(result.data.organic_results));
      })
      .catch(err => {
       res.status(400).json(err);
      });
});

Persisting Friend Data through localStorage

Challenges must be attributed to two users. The currentUser can be identified through jwtToken in localStorage, when a challenge is initiated friend data is also set in localStorage. This ensures the data persists until a new friend is challenged, even if the browser is refreshed or closed.

handleStorage(friendAvatar, friend, friendId, userAvatar) {
  localStorage.setItem("friendAvatar", friendAvatar);
  localStorage.setItem("friend", friend);
  localStorage.setItem("userAvatar", userAvatar);
 }

render() {
  return (
    <div className="hover-bigger">
      <div className="container-list-item-md">
        <Link className="container-col-1" to={{ pathname: '/new'}} onClick={() => this.handleStorage(friendAvatar, friend, friendId,  userAvatar)}>
          <ul className="container-list-row-center">
            <li><img src={friendAvatar} height="70"></img></li>
            <li>{friend}</li>
            <li>{score || "0"}%<p className="centered-text">correct</p></li>
          </ul>
        </Link>
      </div>
    </div>
  )
}

Future Features

  • Transition to React Native mobile application
  • Question Commenting
  • Question Feed Filtering
  • Suggest User in Friend Search
  • Wagers
You can’t perform that action at this time.