Camagru 📸
Camagru is the first website I created from scratch all by myself. It allows user to create an account, which is verified via an email with unique link. User can log in, upload pictures with none, one or more stickers, take a picture using their webcam and jazz it up with one or more stickers, like pictures and comment on them, edit their profile, and search for other users and follow them. Every time someone comments on user's picture, user will receive a notification email. User can turn off the notifications in the profile settings. The gallery with all the pictures is public, so people can see them without creating an account or logging in.
XSS and SQL injction attacks are rather difficult to achieve, since I prevent all kinds of shenanigans 😁
For more information about this project, check out the project's assignment.
Project Purpose & Goal
Camagru was the first full-stack web development project in my school's curriculum. The challenge was to create a small Instagram-like web application that allows user to edit their photos using their webcam and stickers.
My goal was to create a comprehensive and user-friendly photo-sharing website focused on user's creativity, interaction, and security. It allows users to connect, express themselves visually, and easily manage their profiles, all while being protected against security vulnerabilities like XSS and SQL injection attacks.
PHP
HTML
CSS
JavaScript
MySQL
Bulma
Stack & Constraints
The choice of technologies used for this project was limited due to mandatory constraints.
Exclusively PHP was used to handle server-side logic. No frameworks and no libraries were authorized on the server side. Client-side interactivity was implemented solely using HTML, CSS, and JavaScript. Since JavaScript-free client-side frameworks were allowed, I decided to use Bulma. I chose MySQL as the database management system. Since I had no previous hands-on experience with database systems, MySQL's user-friendly interface and good documentation made it an ideal choice for a beginner, allowing me to effectively learn and implement database functionalities necessary for the project.
PHP
HTML
CSS
JavaScript
MySQL
Bulma
Thought Process & Problems
Although this was a school assignment, I approached it as I would a real-life project and employed practices aligned with industry standards. The first step was to sketch the layout and design of the website. Key UI elements included forms for creating new posts and feed to display posts. I aimed for a clean and intuitive design inspired by Instagram. My development process started with setting up a version control system. Then I worked on user authentication and developed key features, such as feed, image uploads, likes and comments. I implemented validation and error handling to ensure secure file uploads.
The feature that turned out to be particularly problematic was taking photos using webcam and placing stickers correctly on top of them. I used one HTML canvas tag for this task. We can think of this canvas tag as an actual canvas in real life - it is a blank space that allows us to draw on it. After a few hours of trial-and-error, I solved my problem by using two separate HTML canvases instead of just one - one for the photo and the other one for the stickers. Then I was able to place the canvas with the stickers on top of the canvas with the picture.
Login page.