Git Product home page Git Product logo

twinder's Introduction

WDI Project 4: MERN Stack

Stack

  • React
  • Node.js
  • MongoDB
  • Express

Tools

  • react-bootstrap-autosuggest
  • react-spinkit
  • font-awesome
  • enzyme
  • axios
  • Twitch API v5

The App

Twinder is a Tinder-esque stream discovery tool for Twitch streamers. The logged in user receives suggestions of live streamers with matching game, language, maturity rating and follower count. The user can then choose to interact with shown streamer or skip to the next one. Search results can be edited by specifying the game, language and follower range in the user's profile. The goal of the app is to help streamers grow their viewer base by networking with other similar streamers.

Challenges

The greatest challenges of this project is navigating through the Twitch API and implementing the filtering mechanism. Some fields such as follower count and game are not set in the user's database as these values need to be fetched from the user's twitch profile dynamically to ensure precision of search. On the other hand, the user is also allowed to specify their own search criteria, making the search process more complicated. Interacted or skipped streamers also need to be stored in the user's profile to prevent them from showing up again.

Timeline

Day 1 - OAuth code and token exchanges.
Day 2 - Receive streams and filtering backend.
Day 3 - Streams filtering complete, displaying one result at a time.
Day 4 - Navbar and tests.
Day 5 - Implement like and dislike functionalities.
Day 6 - Allow users to edit profile and amending search accordingly. Styling.
Day 7 - Styling. Loading spinner. Autosuggest games and language on forms.

Product

Homepage Stream Cards User Profile User Edit

Styling

Overall 8 bit styling to resonate with gamer's nostalgia.

  • Home drawn pixel buttons
  • Fonts: 8-bit-wonder, Press Ready, thin-pixel-7
  • Background credits here
  • Pixel border credits here

Demo

HERE

twinder's People

Contributors

claracmy avatar

Stargazers

Roman avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.