Giter VIP home page Giter VIP logo

swell's Introduction

swell

alt.text Welcome to Swell! This app allows users to see approximate tide information about anywhere they want to surf. Users can review spots to fill in any information about the beach not provided. The surfers log allows users to journal their sessions, allowing them to go back and remember past surfs.

Link to the live site

Users can:

  • Make a surf spot and see all of that spots tide information. alt.text
  • Click an existing spot on the map to see it's tide information and reviews. alt.text
  • Review a surf spot. alt.text
  • See all of the reviews for a given spot. alt.text
  • Journal all of their thoughts after a surf in the surfers log. alt.text

Technologies used

  • MongoDB
  • Express
  • React
  • Node.js
  • Redux
  • Axios
  • Passport
  • Mongoose
  • Validator

Discussion of Technologies Used

Since Swell is a M.E.R.N stack app, it uses MongoDB for its database, Express to write routes, React to create the User Interface, and Node.js to write JavaScript outside of the browser.

Reasons for using these technologies

MongoDB

  • Allows for a high volume of storage.
  • Schemas can be made dynamically.
  • Complex datastructures can be stored easier than with a SQL based database.

Express

  • Allows for responses to specific URLs.
  • Simplfies the handling of requests and views.

React

  • Efficently updates and renders components as they change making for a more dynamic app.
  • It is component based. This enables each component to manage it's own state and data.
  • Can keep state out of the DOM.

Node.js

  • Allows for cross-platform development.
  • Can handle hundreds of thousands of concurrent connections.
  • Highly scaleable.

Features

  • Allowing each spot to render it's own tide information was a hurdle we had to overcome. The api comes back with predefined tide information from specific spots. While this is nice it is too rigid. Swell calculates which location is closest to the spot the user has defined and renders the information of that spot. This gives the user an approximate to go off of. alt.text
  .then((long, lat) => {
              long = this.state.surfSpot.coordinates[1];
              lat = this.state.surfSpot.coordinates[0];
              this.props.fetchSpitCastSpots(long, lat)
              .then((spots) => {
                this.setState({
                  nearestForecast: spots.hourly[0]
                })
  • By making reviews of spots users can help fill in some of the information that the API does not provide. Users can rate beaches by quality and difficuly and then add any other information they deem relevent. alt.text
  const{surfSpot}=this.state;
        createReview(surfSpot._id,review)
            .then(fetchReviews(surfSpot._id))
            .then(this.setState({
              quality: '',
              difficulty: '',
              title: '',
              body: '',
            }))
  • The Surfer's Log was an idea (Ethan Wright) got from an old surf coach. His coach logged each surf in a note book after each session. By using a surfer's log the surfer can remember what gear they brought, who they went with, and what the surf was like that day. As a result surfers can reflect on their log and think about what they want to do next time, or if they find themselves far from the beach remember those times fondly. alt.text
 this.props.action(this.props.currentUser.id, this.state)
            .then(this.props.fetchSurfSessions(this.props.currentUser.id))
            .then(this.setState({body:""}))

swell's People

Contributors

wrightet avatar alscotty avatar mstenflo avatar codybreene avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

yasurfer

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.