Skip to content

Latest commit

 

History

History
146 lines (136 loc) · 5.58 KB

README.md

File metadata and controls

146 lines (136 loc) · 5.58 KB

Camagru

Camagru is an Instagram like web application, purely created with html, css, php and javascript. The aim of the project is to allow users to capture fun moments by allowing them to make basic photo and video editing using your webcam and some predefined images.

Getting Started

Requirements

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Xampp
  6. MySQL

Windows

Install XAMPP

Linux

Install Bitnami LAMP

MacOS

Install Bitnami MAMP

NOTE:
This application was developed to run on Windows Operating System.

Steps to run the project on your machine

  1. Download and install Xampp for Windows XAMPP
  2. After Installation, start apache and mysql server.
  3. Clone the project into htdoc directory. (C://xampp/htdocs/).
  4. Configure xampp to send email notification, the list of steps can be found on How to Send Mail from Localhost XAMPP Using Gmail.
  5. To complete the setup, you need to setup a 2 factor verifaction and also create an app password with Gmail, which then it will allow you to send email.
  6. Restart apache and mysql
  7. Open browser and Go to url http://localhost/camagru, this will create a database and tables

Project Structure

  • config - database configuration
  • css - contains css files for styling
  • images - contains images
  • includes - contains partial files
  • js - contains javascript files for dynamic content
  • stickers - contains sticker images
  • upload - contains uploaded images of users
  • [root directory] - contains views/php files

Tests

Project Requirements:

  • Preliminary Checks
    • This application is developed in PHP.
    • No Framework or micro framework used.
    • Does not have npm packages of composer.
    • files configured correctly:
      • index.php
      • config/database.php
      • config/setup.php
    • Queries are managed through PDO instances.
  • User Creation
    • Application must be able to create users.
    • Form inputs must have validations.
    • User must receive an email to confirm/activate the account with a unique link.
    • User cannot login unless the link has been conformed
  • User Authentication
    • Can a user connect with credentials once they have confirmed.
    • Can user reset their password.
  • ft_snapshots / ft_instagram
    • Application should have a decent header, main section and footer
    • Editing the view:
      • A Webcam view
      • A way to save the image with or without stickers
      • List of stickers
      • A way to upload an image without the use of camera view
    • Public gallery the view the images withput authentication
    • Gallery displays all images taken by alll users
    • The list of images must be paginated with at least images per page
    • Authenticated user must be able to like and comment on an image
    • For each comment on the image, the user must be able to receive an email notification on if it was set to true in the user preference.
  • User Preferences
    • Once logged in, a user must be able to edit
      • their username
      • their email address
      • their password
      • their notification preferences
  • Can Can Can
    • Can a user can delete its own editing but not the others.
    • The editing view is only accessible if the user is correctly logged in.
    • Trying to reach the view anonymously redirects you to the login view.
    • Gallery is public, but only a logged user can like and comment photos.
  • UI/UX
    • The app must be compatible on Firefox( >= 41 ) and Chrome ( >= 46 ). All features aboves must work, without any warning, error or log ( except as always for getUserMedia ).
  • Mobile
    • When you set the app on mobile mode ( you can do it on Chrome ), elements must not overlap each other and have a correct layout.
  • Security
    • Password Encryption
    • SQL Injections
  • BONUS
    • Did exchanges between client and server are AJAX-ified ?
    • Render it as an animated GIF