Giter VIP home page Giter VIP logo

webscienceproject's Introduction

ITWS-4200 Web Science Project

Project Summary

This project, called “On Point,” is a social travel platform that allows people to share their insider knowledge of cities around the world, showcasing their picks of everything from the classic must-do’s to the up-and-coming hidden alleyways. On Point’s target users are curious travelers who visit cities and want to wander like a local as well as people who enjoy traveling and sharing their recommendations.

As a traveler, you can explore the curated lists of cities to plan your next trip or virtually travel to your next dream spot. Travel books are antiquated and for the most part, advocate for the same tourist traps. Tapping into locals’ knowledge and the spirit of the adventurous traveler, this tool will improve the traveling experience.

Using a standard user account system as a foundation, users will have profiles where they can showcase cities and list parks, restaurants, viewpoints, cafés, and more within each city listing. On Point is an ecosystem of quality curations of what’s good around the world where users can follow fellow travelers for inspiration. Listings will gather supplemental media from Instagram and Yelp to provide relevant information to users.

On Point intends to become a local-oriented valuable information source for traveling recommendations and a social platform to curate featured points and interest sharing.

Emily Roth [email protected]

Devin Nguyen [email protected]

Pinyuan(Doris) Xian [email protected]

Jonathan Yax [email protected]

Aidan Pelisson [email protected]

Installation

First, run npm install to install the NPM dependencies.

To start the application, run npm start.

On the server-side, run PORT=80 npm start to set the express server port to default 80. Otherwise, the default port will result in the app's running on localhost:5000.

Mongo Database

Our application uses the name onpoint-dev for the mongo database.

A copy of all the default supported cities and a collection of sample points are included in a mongodump at dump/onpoint-dev. To use this, make sure there is no local copy of a mongodb called onpoint-dev and just run mongorestore in the repo's directory to load the mongodump.

Social Media Integration

As our application is not registered on the Facebook Developer Platform yet, the passport.JS integration with Facebook will only work on a local running copy of the application and not on our live site.

Live Version

A sandbox/live version of our application is developed and live at http://onpoint.devinnguyen.com/

Github URL is: https://github.com/jonathanyax/webscienceproject

webscienceproject's People

Contributors

errskipower avatar jonathanyax avatar apelisson57 avatar dorisxian avatar

Stargazers

Devin Nguyen avatar Richard Plotka avatar

Watchers

Devin Nguyen avatar  avatar  avatar  avatar  avatar

Forkers

devin2712

webscienceproject's Issues

Font-Stack

Font Issues

  • OnPoint font doesn't look sharp. Something to look into?
  • Need to incorporate a font-stack and eliminate duplicated font-stack statements in CSS.

Mobile region nav design thoughts

screen shot 2015-03-11 at 1 13 33 pm

Mobile Design Question

I believe Doris envisioned the gray bar to iteratively change to green in chunks as the cities changed. Currently, it is border-bottom solution, which is cool. Only concern is that on mobile, as seen in the screenshot, is that with border-bottom, the page shifts as you hover in the nav.

Point page

I have started the tentative basis for the point page.

List of things we should address @ next meeting

  • Permalink + how to share this point, bookmark? this point, or add point to user collection.
  • How to display the media object for a user and the user's comments
  • What the images link to?
  • Breadcrumb navigation?

Spaces for tabs

I thought we had decided to use spaces for tabs? Can we come to an overall consensus?

Notes on Jade conversion

I had to make some changes to the main stylesheet and index.html module, so I'm not sure if that would affect the tentative Jade template. We had some bugs in the rendering of the onPoint font on smaller widths and there was a stray font awesome user profile icon which messed with the overall line-height and stuff.

I think we're on the final homepage mockup now... just wanted to check in and notify you in case you've gone and packaged homepage for Jade rendering!

CSS Updates to-do list

Stuff to do

CSS changes on the queue that need to be addressed
If anyone wants to help tackle these, just cross them out and update the issue, as you go.

Logistics

  • Plan roadmap for function implementations (user login, database organization, etc)

Global Design

  • Fix padding on settings cogwheel and ? icon perhaps
  • Need to make sign in floating dialog box
    • Mobile: user-profile icon links to a sign in page
    • Desktop: floating dialog box appears on click
      • For now, I'm going to implement a sign in page as separate for simplicity.
  • Need to implement image replacement for user-icon circle in nav
    • default image for no user profile image
  • Add point modal design and implementation
  • Settings page
  • Help page
  • Can we get a secondary font in use? Lane is really illegible beyond the title uses and I've been placing in Helvetica for now.

Index Page

  • box-sizing: border-box needs to be the default everywhere. I don't know if it's currently implemented throughout. This error is evident with the search box bleeding the edge of the page and the effective container isn't the same width as the image grid and 4-up region display.
    • 03/17 2:20PM Should be fine. Need to double-check. -DN

Regions Page

  • need to fix the green underline width on window resize
  • need to design so that the workflow is complete from regions page to point page
  • can we make anchors in the URL path for each region so they're linkable?

Discover Page

  • What is it and how are we going to design it?

Search Page

  • Reference static search.html to see the changes needed
  • Letter spacing on titles for "Popular Points" and "Search History"
  • li element vertical spacing on search history terms
  • li element for search history terms does not seem to have a defined hover state to change text color
  • a element on popular points: hover action does not change text color
  • Fix clear button styles to match the static version
  • Vertical-aligning the text and fa-icons (the comments and photo icons and count)

Point Page

  • Update spacing and display of address component
  • Improve media object of user display and user comments
  • Breadcrumb navigation?
  • Share point function
  • Permalink
  • Add point function and organization
  • Images in database
  • Pulling in from social media APIs

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.