Skip to content

ReactJS application that utilizes Redux, MongoDB Stitch, and the FIFA 2020 dataset to showcase MongoDB's new Atlas Search functionality.

Notifications You must be signed in to change notification settings

khuaulme/FIFA20-Search

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Atlas-Search-2.0

ReactJS application that utilizes Redux, MongoDB stitch and the FIFA 20 players dataset to showcase MongoDB's new Atlas Search functionality.

Haven't built out the login and about page yet. They might stay in the header component for aesthetics. This application has a lot of images and isn't configured with webpack so FOUC can and will occur. This application isn't compiled down to es5 with babel so it may crash on some browswers.

Note that there is some front-end filtering that can affect search results.

  • Skill
  • Dribbling
  • Passing
  • Shooting
  • Defending
  • Physicality
  • Pace

The rest of the attributes get passed into the MongoDB Stich Api Query string and is filtered for in DB.
Autocomplete option on searches will trigger an autocomplete query on each keystroke & display the best 6 player options. The logic for this can be found in soccer.js.

Homepage Preview
Initial page render. Here you can query a quick search or navigate to Countries, Clubs or Player search pages. Homepage

Search Page Preview
Search page initial render. Here you can toggle different api endpoints to hit and filter players by attributes & name. SearchPage

Query Results Preview
Query results initial render. List results from hitting the api endpoints. QueryResults

Build Team Preview
Build Team render from persistent MongoDB collection. BuildTeam

Search Country Preview
Search country initial render. Here you can reduce and/or select a country you would like to filter by. SearchCountry

Search Club Preview
Search club initial render. Here you can reduce and/or select a club you would like to filter by. SearchClub

About

ReactJS application that utilizes Redux, MongoDB Stitch, and the FIFA 2020 dataset to showcase MongoDB's new Atlas Search functionality.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.6%
  • CSS 19.4%
  • HTML 1.0%