Picture This

The project

This was our mid-year assignment for the Web Development programme at Yrgo. Our main goal was to create a clone of the Instagram application.

Built With

• PHP
• JavaScript
• SQLite Database
• HTML
• CSS

Designed as mobile-first

Features/User stories

Minimum requirement for the assignment:

• As a user I should be able to create an account.

• As a user I should be able to login.

• As a user I should be able to logout.

• As a user I should be able to edit my account email, password and biography.

• As a user I should be able to upload a profile avatar image.

• As a user I should be able to create new posts with image and description.

• As a user I should be able to edit my posts.

• As a user I should be able to delete my posts.

• As a user I should be able to like posts.

• As a user I should be able to remove likes from posts.

Extra features:

• As a user I should be able to follow and unfollow other users.

• As a user I should be able to view a list of posts by users I follow.

• As a user I'm able to add filters to my images.

• As a user I'm able to delete my account along with all posts and comments.

• As a user I'm able to search for other users.

Picture that / Extra features by another student

Our second assignment with picture this was to create a pull request with two additional features on a another students project.

See the pull request here

Extra features

• As a user I should be able to add, edit, delete comments on posts.
• When searching you also get search hits of posts with the same post description.

added by Mark Dela Cruz

Installation

1. To be able try this Instagram rip-off, clone this repository to your directory through the terminal.

$ git clone https://github.com/milliebase/picture-this.git

2. Change current directory to the cloned repo.

$ cd picture-this

3. Start your web server (8000 can be changed to any other 4 digits, ex. 1337 also works).

$ php -S localhost:8000

Authors

Betsy Alva Soplin

Published

16th january 2020

Tested by

• Jesper Lundqvist
• Mikaela Lundsgård

Browsers:

• Brave
• Google Chrome
• Firefox
• Safari

Code review

• Viktor Puke

• You can use Lazy loading to your images (all)

• In your functions to make it more clear what it returns in addition to your comments after declaring the function. example: function authenticateUser(PDO $pdo) :void

• In email.php l.11, settings.js l.175 and settings.php l.75, l.79 you spelled address wrong (don’t shoot me)

• You forgot to remove a comment in register.css, l. 36.

• Edit post javascript, it saves new information first time. second time it saves but it doesn’t show (not certain where in code though)

Overall you Rock!

License

MIT

Credits

• "Search" icon by Besticons from the Noun Project

• "Home" icon by Satisfactory from the Noun Project

• "Heart" icon by Vicons Design from the Noun Project

• "like" icon by Amelia from the Noun Project

• "Image" icon by iconsphere from the Noun Project

• "Photography" icon by Lima Studio from the Noun Project

• "users" icon by Mundo from the Noun Project

• "User" icon by Rainbow Designs from the Noun Project

• "Plus" icon by scott desmond from the Noun Project

• "Settings" icon by Graphic Tigers from the Noun Project