HE
EN

PhotoGems Social Media Network

Project Overview

Technologies Used

HTML5

CSS3

ReactJS

Firebase

Technical Aspects

Firebase User Authentication

-

any person can create his own account using email address & password, every user that registered is signed in the Firebase Authentication system. Then, next time the user tries to login his account it got to match with the information founded in that system.

Customized profiles

-

every user has his own profile page. Any registered user has the ability to edit his profile in many matters such as profle picture, nickname, bio, gender, age, motto, hobbies, favorite food and skype username.

In every profile you can also find the colleciton of all the posts the user posted in live feed, ordered by the time they actually were uploaded.

In addition, anyone can view other profiles by simply clicking on others names (every user has unique link for his profile).

Live Feed

-

any user can create a post of his own in the live feed, there anyone can see the last 25 posts of others accounts and of the own user's as well.

There's an option in live feed to view likes list and comments for specific posts. Only logged in users have few extra options such as: making likes and comments to other posts, and the post owner can decide if he wants to remove his own post.

Imgur API

-

is an American online image sharing community and image host. Using their API, any picture that is uploaded by the user is basically saved in imgur firstly and gets unique link, then after the post was created, that link is saved in the database.

Any picture that is uploaded to imgur is saved there in the highest quality because it's the main idea of the website. Every picture that is showed in the website keeps proper aspect ratio to prevent the case of distorted images.

IPStack Geolocation API For User Flags

-

every profile and every comment has a country flag next to the user's name, which is the country the user is located in.

This is achieved in several steps: using IPStack API to recieve the user's country name, afterwards taking this country name to recieve a country flag from another API called countryflags.io, and then at last all this information is saved in the database in Firebase about this specific user.

In every post the country that's shown next to the user is the country the user was present in at the moment he uploaded the post/comment, and every time the user reconnects to the website his country will be updated accordingly.

Handling errors and improving UI interface

-

in case a user entered incorrect details while signing up, an error message will show up. Any box that exists in the website has some sort of limit for example a number of characters available, this way spam can be avoided more efficiently.

Using localStorage to achieve the action "Rememeber me" while signing in, so that next time the user comes back to the website he doesn't have to take care of re-logging because the website already did it for him.

When a user hasn't uploaded any profile picture, the website will provide an anonymous picture that shows that user doesn't have any profile picture.

In case a user tries to load a link of his own profile that he recieved from other person, or just as if he clicked his name in the live feed, then instead of showing him the regular page interface of viewing other people profiles, the website will redirect him to "my profile".

Reporting & Data Security

-

there's an option to report any post that exists in the website. By simpling clicking the report button, the post will be forwarded to the administrators of the website that will examine the request and if necessary take the post down.

Dynamic Website (SPA)

-

all the information that exists resides in the Firebase Firestore database. Any action the user does whether it is watching someone profile or live feed or anything, all the information provided is dynamic that is changed every moment, brought from the database and presented to the user nicely.

In addition, the website is SPA, which means that website doesn't make any page reloads at any point except of the initial opening of the website.

Secured Backend

-

not anyone can make any type of action, every sort of action is being checked for the sake of security, for each post only the post owner can remove his own post, only registered users can make actions such as such for instance making likes and comments on other posts, etc..

Responsive Design

-

working in any sort of environment, both in phones and computers.

Thank you for reading! 😊
Itay Shiff ©