Giter Club home page Giter Club logo

squadsearch's Introduction

SquadSearch

Our app SquadSearch lets you find others who are interested in or attending the same events so that you can form a group of people to go with. Through different chat boards you are able to communicate with a wide range of audiences attending all sorts of events across the world. You will be able to chat with other users on the app through a variety of different chat options where you can get to know new people and set up a meeting.

Project Task requirements

  • 3-5 minimal
    • Create events
    • Create/update profile
    • View/search through events
  • 3-7 standards
    • Multiple channels
    • Join events and different chat channels
    • Private messages
    • Login/Authentication
  • 2-3 stretch
    • Grouping algorithm
    • Video chatting
    • Map with pins showing current event locations

Tech used from modules 1-5

  • Module 1
    • Styling done with css and Material UI
      • Matrial UI provides styling for frequently used components in React applications out-of-the-box. This allows rapid app development. We use Material UI to style most of our pages and forms
    • code examples here and here
  • Module 2
    • Frontend app initiated with create-react-app
      • create-react-app allows a quick setup for React applications
    • Redux for event, profile, and chat data
      • Redux prevents React components from having large amount of application state. When paired with AsnycThunks, data from async API calls are seamlessly handled. We use Redux to store event, profile, and chat data
    • code examples here and here
  • Module 3
    • Backend built in Node.JS and Express.JS
      • Express.JS allows simple interface for creating request endpoints and configuration. Node.JS, as a Javascript runtime environment, executes server-side code (execute DB queries and generate tokens)
    • here and here
  • Module 4
    • MongoDB deployed on MongoDB Atlas
      • MongoDB supports unstructured data which allows us to store image and chat data with ease. Mongoose allows easy integration with MongoDB as it translates objects in MongoDB to Javascript objects in code
    • code example here
  • Module 5
    • App deployed on Heroku
      • As part of Continous Development, we have lint check set up on every pull requests in order to keep our production code clean. In addition, automatic deployment is set up on push to the main branch
    • code example here and here

Above and Beyond Functionalities

  • Google Maps
    • We display a map with makers to show the physical location of events. Location string is queried against Google Maps API and we retreive the geo-location information of the first result to display on the map

What's Next

  • Documentation
    • To further develop the project, good code documentation would help developers to easily extend the functionality of the current system and possibly attract open-source contributions
  • User Experience
    • We can gather feedbacks from first-time users to improve on the user experience.
  • Authentication
    • Make the authentication system more robust by pairing the auth tokens with refresh tokens for better user experience Testing
    • End-to-end testing with Selenium would make our project more robust

Contributions

  • John

    • Login / Auth: Implemented token-based authentication system
    • Google Maps: Display a map to show physical location of events using Google Maps API
    • Redux / API: Built redux and backend APIs for Event and User Profile data
  • Anthony

    • Private Messages / Chatboards: Implemented private messaging and channel-based group messaging
    • Redux / API: Built redux and backend APIs for Chat
  • Isaac

    • Styled Frontend: Implemented the Styling of the app using Material UI
    • Basic Functionality: Adding/deleting of events and users
    • Google Maps: Showing map and locations of events

squadsearch's People

Contributors

shinhs0506 avatar isaaczhu9877 avatar baekanthony avatar

Watchers

James Cloos avatar

Forkers

baekanthony

squadsearch's Issues

Project Scrum #4

Anthony Baek

In the past few weeks I've been learning how to use MongoDB, working on assignment 4, and building a simple version of the chatboard page.

I had difficulties understanding how to connect MongoDB queries with redux. I was mostly confused on which method to use since so many tutorials seemed to do did things differently.

In the next two weeks, I plan on learning more about socket.io, working on assignment 5, , and learning/using material UI and redux forms.

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.