Git Product home page Git Product logo

siverson90 / cali-cool Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 2.0 107.99 MB

Cali.cool is a photo sharing MERN-stack app for Californians by Californians, a visual platform for sharing the California experience. The collection of photographs is open for public viewing, but requires a login to begin sharing photos.

Home Page: http://cali.cool

License: MIT License

CSS 0.90% HTML 2.54% JavaScript 96.57%

cali-cool's Introduction

Cali.cool

Live application: www.cali.cool

Synopsis

Cali.cool is a photo sharing app for Californians by Californians, a visual platform for sharing the California experience. The collection of photographs is open for public viewing, but requires a user login to share photos, as well as to like and comment on photos and albums.

User Story

As a Californian, I want to upload photos to a California-oriented photo app so that I can share photos which express life in California with other residents.

Motivation

As creators of Cali.cool, we want a platform that is welcoming and encouraging to all those who love and want to share their experiences in and of California.

Visual Application Walkthrough

Click to see Cali.cool Walkthrough Click image for video walkthrough.

Technologies:

MERN Stack

  • MongoDB - Document-oriented NoSQL database
    • Mongoose - Schema solution for MongoDB
  • Express - Application framework/server
  • React.js - JavaScript library for building user interfaces
  • Node.js - JavaScript runtime engine

Hosting

Installation

  1. Clone repo and install NPM packages:

    git clone https://github.com/dbmarshall/cali-cool
    cd cali-cool/
    yarn install 
    cd client/
    yarn install 
    cd ../
    
  2. Start server (local environment only):

    yarn start
    

Available Commands and URLs

Local:

Heroku Deployment:

Code Highlights

Promise-based syntax to find user by ID with Mongoose and populate with data from photos and user collections

findById: function(req, res) {
    db.Albums
      .findById(req.params.id)
      .populate({
        path: "photos",
        populate: [{
          path: "owner",
          model: "Users",
          select: ["_id", "userName"]
        },
        {
          path: "album",
          model: "Albums",
          select: ["_id", "title"]
        }]
      })
      .populate("owner")
      .populate({
        path: 'comments',
        options: {
          sort: {
            dateUpdated: -1
          }
        },
        populate: {
          path: 'user',
          model: 'Users'
        }
      })
      .then(dbModel => res.json(dbModel))
      .catch(err => res.status(422).json(err));
  }

Creating a new photo w/ Cloudinary API

createPhoto: function(req, res) {
    cloudinary.uploader.upload(req.body.data_uri, function(result) { 
      imageUploadId = result.public_id;
      newObj = req.body;
      delete newObj['data_uri'];
      newObj.imageUploadId = result.public_id;
      db.Photos
        .create(newObj)
        .then(dbModel => res.json(dbModel))
        .catch(err => res.status(422).json(err));
    }, 
      { upload_preset: "ccu" });
  }

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

cali-cool's People

Contributors

siverson90 avatar minujames avatar

Watchers

James Cloos avatar

Forkers

ktpm489 joshsiv

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.