Skip to content

PikQ is a website developed to allow users to take pictures from their webcams. These pictures can be edited and posted to their profiles which in turn appear in the gallery. Users can also comment on and "Like" posts from other users.

Notifications You must be signed in to change notification settings

Ryan-ruan/project2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

README

Project 2 - PikQ

Description

Developing websites involves working in groups where its members have different ideas, tasks delegated, and versions of have to be controlled and reconciled when using the GitHub. The purpose of the project is to make and develop a website in a group. Our group is comprised of:

  1. Weijia Li
  2. Lingxiao Wang
  3. Ryan Ruan
  4. Jonathan See

Features

PikQ is a website developed to allow users to take pictures from their webcams. These pictures can be edited and posted to their profiles which in turn appear in the gallery. Users can also comment on and "Like" posts from other users.

The group utilized the following applications to achieve a functional yet visually appealing website:

Ruby

  • Ruby on Rails - wireframe upon which the website is built
  • acts_as_votable - Ruby Gem used for the upvotes ("Like") of the posts

AJAX - enables the user to see the updated number of votes ("Likes") without reloading the page

JS Libraries

  • fabric js - allows users to edit images by changing and adding stickers, drawings and texts to it
  • webcam js - enables PikQ to obtain data from the users' webcams and take pictures
  • tracking js - detects users' faces as they move which in turn can be superimposed by another image (e.g. other people's faces)

Plugin

  • AddThis - allows users to share their edited images to social media sites such as Facebook, Pinterest, Weibo and Yummly.

API

  • imgurAPI - allows users to upload their edited images unto imgur anonymously

CSS Framework

  • Semantic-UI - responsible for creating a clean and presentable website
  • Colorzilla - responsible for the purple gradient background appearing throughout the website

Cloud Platforms

  • Cloudinary - responsible for storing all the images saved in PikQ
  • Heroku - where PikQ is deployed

Result

Here is our live site

Welcome Page pikQ pikQ pikQ

Lessons Learned

  • The most useful important learned in working in groups is that conflicts will inevitably arise so resolving these quickly saves time which can be devoted to completing tasks.

  • Planning from the beginning by listing and delegating tasks helps keep the team on track. In our group, we used teambition to keep track of the tasks progress and share resources useful to accomplish the tasks.

  • Never be afraid to explore other applications to give the website the best user experience.

Wish List

The website would have provided better user experience if the following features were incorporated which would have allowed users to:

  • Crop and resize the uploaded image
  • Upload stickers they wish to add and choose fonts for the text editor
  • Comment on other user's comments using the nested commenting system
  • Add tags
  • Use search function

Acknowledgments

We would like to thank Luke Hammer for leading us to the right direction by introducing us to webcamjs, trackingjs and AddThis and helping us fix the bugs in our face detection feature. We also would like to thank Matthew Edge-Williams for answering our queries and assisting us with the Github-related problems.

Lastly proper acknowledgments goes to the following:

  • freepik - source of the sticker used in the editor function of PikQ
  • I Hate Tomatoes - tutorial on how to create a CSS glitch effect on PikQ when hovered on the welcome page
  • Adorable Avatars - collection of avatars for users who choose not to upload their face photos in their user profile

About

PikQ is a website developed to allow users to take pictures from their webcams. These pictures can be edited and posted to their profiles which in turn appear in the gallery. Users can also comment on and "Like" posts from other users.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published