Ching-lin Lee : Developer  Front-end
  • Home
  • Portfolio
  • me.CV
Air France
14 novembre 2022
Transcendence
12 novembre 2022
 

Camagru

Project Ecole 42
Project Solo


Creation of a small web application with all the features of the Instagram

 
Technology :
HTML • CSS • Javascript • PHP • Mysql • Phpmyadmin • Docker
Code :
github.com/ddalee75/Camagru
Overview
• You are free to use any language to create your server-side application, but, for every function that you use you must check that an equivalent exist in PHP standard library
• Client-side, your pages must use HTML, CSS and JavaScript
• No library / framework allowed
• Compatible with the latest up to date version of Chrome, FireFox.

Build dev
make
• Use Docker in a VM for root mode
• The website should be deployed by only one command :
make (of Makefile)

Common features
• Any password stored must be hashed
• Inject HTML or “user” JavaScript in badly protected variables is not allowed
• Upload unwanted content on the server is not allowed

User features
• The application should allow a user to sign up by asking at least a valid email address, an username and a password with at least a minimum level of complexity.
• The user should confirm his account via a unique link sent at the email address fullfiled in the registration form.
• The user should be able to tell the application to send a password reinitialisation mail, if he forget his password.
• The user should be able to tell the application to send a password reinitialisation mail, if he forget his password.
• The user should be able to disconnect in one click at any time on any page.
• The user should be able to modify his username, mail address or password.

Gallery features
• This part is to be public and must display all the images edited by all the users, ordered by date of creation. It should also allow (only) a connected user to like them and/or comment them.
• When an image receives a new comment, the author of the image should be notified by email. This preference must be set as true by default but can be deactivated in user’s preferences.
• You should allow the upload of a user image instead of capturing one with the webcam.
• The list of images must be paginated, with at least 5 elements per page.

Webcam features
• This part should be accessible only to users that are authentified/connected and gently reject all other users that attempt to access it without being successfully logged in.
• A main section containing the preview of the user’s webcam, the list of superposable images and a button allowing to capture a picture.
• A side section displaying thumbnails of all previous pictures taken.
• Superposable images must be selectable and the button allowing to take the picture should be inactive (not clickable) as long as no superposable image has been selected.
• The creation of the final image (so among others the superposing of the two images) must be done on the server side.
• The user should be able to delete his edited images, but only his, not other users’ creations.

Bonus part
• “AJAXify” exchanges with the server.
• Propose a live preview of the edited result, directly on the webcam preview. We should note that this is much easier than it looks.
• Offer the possibility to a user to share his images on social networks.
↓ Camagru In Video ↓
 
↓ Camagru In Screenshot ↓






Code on GitHub

Related posts

Transcendence
12 novembre 2022

Transcendence


Read more
Ching-lin Lee's LinkedIn , Github