Instagram-clone

An Instagram-clone with my own flavors and features. Same app which will be single-page app with MERN, Redux and NoSQL coming soon!!

Quick links

1. Screenshots
2. Features
3. Requirements
4. Own the project

Screenshots

Below are some screenshots of the app:

More screenshots

Features

1. Login, Signup, Forgot password (with email).
2. Quick Login like in Facebook and Instagram (this means app remembers that you had logged in, so you only have enter password to login again).
3. Indicates that users exists as you type username when signing up.
4. About, Developer, Help, 404, No such user, No such group page.
5. AJAX used almost everywhere (From login to logout).
6. Follow, Unfollow, Recommend, Profile views, Block, Unblock.
7. Like, Comment (Sticker, Text, Image), Share, Unshare, Remove share, Tag, Untag, Remove tag, Copy post link, Delete post, Edit post, Open post.
8. Post Text, Image (with filters), Video, Audio, Link, Document, Location with emojis, Font size, Tag, mentions, hashtags and location.
9. Time ago format used everywhere.
10. Custom Video and Audio player.
11. Add tags to describe yourself much more.
12. Edit your profile (From username, Bio, social links to tags).
13. Get suggestions on whome to follow (you can also refresh suggestions).
14. Know what are some of the most popular hashtags.
15. Mutual likes and comments as in Facebook (When you see a post, if your followings have liked or commented on the post, then app re-arranges post's likers and commenters in a way that your followings get the first priority). eg. F1, F2, F3 and 230 others liked where F = Following.
16. Shows images in Theatre mode.
17. Explore people, photos, videos, audios and groups.
18. Get notified on almost everything from your post being liked, commented, shared TO you being added to a group.
19. Create conversation with your followings and give your conversation a title.
20. Message emoji, Text, Image, Sticker.
21. Delete conversation, unsend all your messages, edit conversation title and get all info about the conversation.
22. Create group conversation with your followings.
23. Change admin (if you're an admin), leave group, remove member, change group avatar, add members and get more info about the group.
24. Bookmark the post if you liked it.
25. Make a user favourite if you like him/her.
26. Create a group with your followings.
27. Shows newest member, members you know from the group.
28. Post (Point no. 8).
29. Add/remove members.
30. Edit group's settings.
31. Shows if a user is online.
32. Love a group, invite your followings to the group.
33. Change your avatar from over 200 custom avatars, don't like it upload your avatar with a cropping tool (Same can be done while changing group avatar).
34. If a text post is large, then a glimpse of the post is shown and you can load more.
35. You will be always prompted from deleting a post to blocking someone.
36. Search users, groups and hashtags.
37. Click on a particular user tag such as 'Mumbaikar' and see all users with the same user tag.
38. Google+ style notification bar (one that transitions from the bottom, stays 3 seconds and then goes down).
39. Description provided almost everywhere eg. when you hover over Like (Heart) button, then there'll be description of 'LIKE'.
40. Change you password.
41. Change account type private or public (Default: public).
42. Change email and phone visibility.
43. Get all your login details.

Requirements

1. Latest version of PHP.
2. Gmail account (for account verification & password retrieval of users).

Own the project

Few works to do:

1. Import SQL file.
2. Change user, password and host (can be done easily by CTRL+SHIFT+F).
3. Change root path /faiyaz/Instagram to yourrootpath.
4. Change YOUR_GMAIL and GMAIL_PASSWORD with your gmail account and gmail password resp.

Below are extended & more useful details:

1. There's a SQL file named instagram.sql it contains all details database details.
2. Import the same SQL file in PHPMyAdmin and it will create the Instagram database.
3. Replace the username, password and host or database (if you want) of PDO connection with yours simply with CTRL+SHIFT+F (in Atom and VS Code for searching the whole project).
4. Here's how to do it very easily: search $db = new PDO('mysql:host=host;dbname=instagram;charset=utf8mb4', 'root', 'user') and replace it with $db = new PDO('mysql:host=YOUR_HOST;dbname=instagram;charset=utf8mb4', 'USER', '****') with CTRL+SHIFT+F.
5. The root of this project is /faiyaz/Instagram/ and in your case the root will be different for eg. http://www.yoursite.com/. Search /faiyaz/Instagram and replace it with yourroot. Replace easily by CTRL+SHIFT+F.
6. Open login.class.php and forgot.class.php in config>class.
7. Replace YOUR_GMAIL with your gmail account and GMAIL_PASSWORD with your gmail password.
8. If root of project is HTTP || HTTPS, go to line 130 of login.class.php file & line 88 of forgot.class.php file and fix bit messed up url of Activate button of mail body.