a/A MERN stack collaboration project

Overview

Welcome to Hoppers!

Hoppers is an app where users can design their plan for the perfect night out with friends1.

Users will be able to design and customize their own story book event (could be anything from a pub crawl to a nice walk). After creating the perfect itinerary, those users can then invite other users to join their path of adventure and excitement.

Once a user has joined an event, they can chat with each other to discuss any updates or plans.

Additionally, event attendees can post about the night's events on the main event page, so they can have a history of their glorious deeds. Furthermore, event-owners can make their “plan’ public and have other users join their night out or they can join other “public” plans.

Table of Contents

Features

Event Creation

Users can create events and select points of interest to include along their event-route.

event-create-photo

These events are then saved to the database, along with all their points of interest. These points of interest are then turned into a route on the map, where the general path is shown.

drawLines() {
  const hour = new Date().getHours();
  let color;
  if (hour < 7 || hour > 17) {
    color = "#eeeeee"
  } else {
    color = "black"
  }

  const path = this.markers.map(poi => poi.location)
  const line = new window.google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: color,
    strokeOpacity: 1.0,
    strokeWeight: 2
  })

  line.setMap(this.map)
}

placeMarkers() {
  this.markers.forEach((location, i) => {
    this.placeMarker(location, i);
  })
  this.drawLines();
}

placeMarker(location, i) {
  // ... code to adjust marker options

  const marker = new window.google.maps.Marker({
    position: position,
    map: map,
    label: {
      text: `#${i + 1}`,
      color: color
    },
    icon: icon
  })

  // ... code to save marker reference to component state for manipulation
}

Event Editing, Point-of-Interest route

Within the route of points of interest, the event owner can create new points of interest in the route, and then submit the changes through a form.

Since the route and points of interest go in order, the route will be drawn according to the changes.

// helper to take in markers from map
// within EventForm(s)
accept(key, value) {
  this.setState({ [key]: value })
}

// helper to pass points of interest between EventForm(s) and Map
// within FunctionalMap
sendPois(e) {
  e.preventDefault();
  const points = this.props.event.PointsOfInterest;

  Object.values(this.markers).forEach((marker, i) => {
    const pos = {};
    const newPoint = points[i] || {};
    pos["lat"] = marker.position.lat();
    pos["lng"] = marker.position.lng();
    newPoint["location"] = pos;
    points[i] = newPoint
  })

  this.props.accept("PointsOfInterest", points)
}

Users can also browse all public events

The main page will display all events currently open to the public, where anyone can join in to make new social connections or just have a nice day with the other attendees.

event-index-photo

Technologies Used

  • Front End: React.js, Redux

  • Back End: Express, MongoDB Atlas for database

  • Other: Node.JS environment, Google Maps JavaScript API

  • Hosting: Hoppers is hosted on heroku.

Future Plans

Users would be able to privatize / create private events.

  • These events would be able to be shared via messages sent to another user's inbox.
  • Only Attendees would be able to see and access these events.

Users would be able to direct-message each other in real-time.

  • Web socket implementation, for individual and group-DMs (event participants)

Credit

A team of four extremely talented and hard-working individuals put this together2!

  • Jonathan: Team leader, and project coordinator / front-end designer (React.js).
  • Nick: Front-end designer, component manager / creator (React.js).
  • Cody: Back-end engineer (MongoDB / Express integration).
  • Kevin: Back-end engineer (MongoDB / Express integration).

Footnotes

  1. Please note all features subject to changes. Hoppers can not guarantee the perfect night out. Also if you have a substance abuse problem please seek assistance by dialing a the SAMHSA hotline. 1-800-662-HELP

  2. Although the roles are written here, we all actively helped and participated in all aspects of the app, coordinating workflow between front-end and back-end making sure things went smooth, and features were pushed out with efficiency.

You might also like...

MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

MERN stack application which serves as an online map journal where users can mark and rate the places they've been to.

PlaceRate PlaceRate is a MERN stack application which serves as an online map journal where users can mark and rate the places they've been to. You ca

May 17, 2022

Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture. You can view live app.

Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture.  You can view live app.

Flipkart Clone MERN APP Dhaval Patel's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart. It has strong authe

Dec 29, 2022

Total Quest is an online real-world scavenger hunt application built with the MERN stack

Total Quest is an online real-world scavenger hunt application built with the MERN stack

TOTAL QUEST Table of Contents Description Team Members Technologies Used Contact Example Link to Total Quest Description Total Quest is an online real

Mar 13, 2022

A MERN Stack dapp the utilizes three solidity contracts

A MERN Stack dapp the utilizes three solidity contracts. It verifies user ownership of third party NFTs, generates an image incorporating a third party NFT image pulled from IPFS, mints a new NFT for users that includes an on-chain message and metadata to Opensea standards.

Jun 30, 2022

This is an email scheduler made using MERN stack. This repo contains client, server side is linked in readme

Email Scheduler Client This is an email scheduler client (server in different repository). It is made using react. Overview User can sign-up/sign-in,

Dec 3, 2022

A sweet MERN Stack app to add food recipes to your own Cook Book!

A sweet MERN Stack app to add food recipes to your own Cook Book!

Welcome to LeCookBook 👋 A sweet MERN Stack project, that lets you view, quicksearch, search by category and a randomizer with a cool UI. This page ha

Jun 3, 2022

A secure MERN Stack boilerplate ready for Production that uses Docker & Nginx.

A secure MERN Stack boilerplate ready for Production that uses Docker & Nginx.

A production ready & secure boilerplate for the MERN Stack that uses Docker & Nginx. Focus on the product and not the setup. You can directly start wo

Dec 23, 2022

E-commerce website using the MERN Stack

E-commerce website using the MERN Stack

HEIN. Ecommerce Web Application built with the MERN Stack. Inspired by Lama Dev 🏁 Get Started Clone the repository git clone https://github.com/Youse

Jan 4, 2023

👍 💰 Market place for products with MERN stack

react-md Create an accessible React application with the material design specifications and Scss. Installing packages - How to install related compone

Sep 22, 2022
Comments
  • Misc

    Misc

    Added individual poi input errors as well as fixed several bugs, such as no errors showing up on start time. Furthermore, used quick sort to sort events by date.

    opened by CodyDegraffeNiles 0
  • Event show page buttons and styling

    Event show page buttons and styling

    add edit button and delete button to description area of event show page

    add collapse animation to threads

    add autoresizing comment box when typing a comment

    general styling on event show page and attendee list

    **added gray bottom border to top event grid on the profile page

    opened by njpietrow 0
Owner
Jonathan Wong
Currently a student at AppAcademy. Learning full stack web development w/ Ruby on Rails, postgres/sqlite3, React/Redux
Jonathan Wong
It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Alok Kumar 5 Aug 3, 2022
Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Pasindu Rukshan 1 Dec 26, 2021
It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. ?? About the project. ?? Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Mario Quirós Luna 5 Apr 12, 2022
A project built with MERN stack.

A project built with MERN stack.

null 11 May 2, 2022
It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ ?? About the project

Mario Quirós Luna 5 Jun 26, 2022
Encode WEB-Dev is a open source project which contains different projects of Html, CSS, Javascript and MERN Stack etc.

HACKTOBERFEST 2022 Encode WEB-Dev is an open source project which contains different projects of Html, CSS, Javascript and MERN Stack etc. which makes

null 7 Oct 31, 2022
The culmination of Encode Academy, the 8-week long Solidity course by Encode Club in collaboration with Extropy

Encode Academy | DAO: Real Estate & Renting What is this? This is the culmination of Encode Academy, the 8-week long Solidity course by Encode Club in

Oliver H. D. 5 May 25, 2022
Crowdsource and crowdfund collaboration on maps of problems.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

MapsMap 3 Dec 9, 2022
A transpiler from golang's type to typescript's type for collaboration between frontend & backend.

go2type go2type.vercel.app (backup site) A typescript transpiler that convert golang's type to typescript's type. Help front-end developer to work fas

Oanakiaja 8 Sep 26, 2022
This is my first attempt in creating a mern stack ecommerce website. Hope you like it!!

MERN E-COMMERCE PROJECT Hi! My name is Suhrrid Banerjee, This is my first attempt in creating a MERN stack e-commerce website. Prerequisite Nil Env Va

Suhrrid Banerjee 1 Jan 8, 2022