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:
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
Here is our live site
Welcome Page
-
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.
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
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