Code Monkey home page Code Monkey logo

fglsn / camagru Goto Github PK

View Code? Open in Web Editor NEW
2.0 0.0 0.0 10.99 MB

Full-stack web application written in PHP on the back-end and Html, Css, Vanilla JavaScript and Fetch on the front-end. Based on MariaDB. Simple photo-gallery application allowing user to upload photos or take a webcam shot, apply stickers on pictures, leave comments and likes, handle basic profile settings etc.

Hack 0.18% PHP 89.81% CSS 9.28% JavaScript 0.73%
bootstrap camagru css database ecole42 fetch full-stack hivehelsinki html javascript

camagru's Introduction

Camagru

Camagru is an Ecole42 curriculum web-branch project. The project was written from scratch and completed in roughly 3 weeks.

Implemented using PHP on the server side, as well as Vanilla JavaScriptHTML, and CSS with some Bootstrap components on the front-end. As a bonus, I've Ajaxified a couple of sections (Fetch was used for 'Like' and 'Remove post' actions).

This application serves as a photo-gallery where user can:

  • upload pictures from filesystem or by using his web-camera

  • apply stickers to their pictures

  • leave likes and comments to other users' posts

  • handle their profile setting such as:

    • alter your email, username, and password
    • subscribe/unsubscribe from email notifications
    • remove account

A user will receive an email notification when his post is commented, unless user decides to unsubscribe from notifications.

Project visual layout and short comments on each section

Starting page

An index page will be responsible for the database migration. Tables are created on the first run of the application.

alt text

Signup page

All necessary validations are made on both: front and back-end sides.
After registering, the user will get an email message with a unique activation link.

alt text

Login page

alt text

Forgot password

After providing an email address, the user will get an email message with a unique password reset link.     The link will take you to the password reset form.

alt text

Main page / Main feed

The main page is paginated, there are five posts per page.
An id of the last post from the current page will be sent to the PHP script, which will fetch only the next 5 posts from the db.
Users are able to comment and like any post. Comment sections and likes are disabled and comments are not loaded for not logged in visitors.
Upd: Comment can be now removed by post owner or comment owner. Also elapsed timestamps ("N time ago") are added to posts and comments.

alt text

Post upload page / Webcamera view

On this page user can upload new pictures: from filesystem or made with webcamera.
Thumbnails of all webcam-taken pictures are displayed in a sidebar, from which the user can delete any webcam post.
By project specs, a user cannot take a webcam snapshot without selecting one or multiple stickers.
Filesystem images may be uploaded with or without stickers.
Image manipulations/editing are done on the server side, as well as necessary validations.  

alt text alt text

User profile page

All user creations are displayed on this page. Any post may be deleted by a user from here as well.

alt text

Profile settings

alt text
alt text

All pages have a responsive layout. The application is compatible at least with Chrome and Mozilla Firefox.

camagru's People

Contributors

fglsn avatar

Stargazers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.