This project is a social networking application featuring a welcome page and a profile page. The primary objective of this project was to implement different functionalities for both the Frontend and Backend using JavaScript, SQLite and Python. Due to the emphasis on learning functionalities, less attention was given to CSS. A separate project was undertaken to focus on CSS to enhance the visual appeal of the website. You can find the repository for that project here.
Steps to view the app:
-
Make sure the latest version of Python is installed.
-
Create a virtual environment by running:
virtualenv -p python3 specified_directoryThis is done to create and use a separate and isolated virtual machine for the application.
-
Run the below command:
source path_to_virtual_environment/bin/activate -
Ensure relevant libraries are installed as indicated in lines 1-7 in the server.py file. (Use pip3 install ____ )
-
Now run the below command for the app to run:
gunicorn -b 0.0.0.0:5000 --workers 1 --threads 100 server:app
Here are some more information about the functionalities implemented in the project:
-
The Flask development web server was initially used, later transitioning to Gunicorn for deploying the app to an external server.
-
SQLite3 was employed for database storage of user information.
-
Postman was utilized for testing backend connections.
-
Asynchronous HTTP requests were sent using the XMLHttpRequest object.
-
Two-way asynchronous communication was established using the WebSocket protocol. This facilitated automatic sign-out of a user from one browser when the same user signed in from another browser. Additionally, a logout notification was sent to the old client for clear communication regarding the sign-out event.
-
HTTPS status codes were implemented appropriately across various functions to ensure effective communication with the user.
-
The website is made responsive so that the application is adaptable to different display resolutions from mobile to desktop using the "Bootstrap" framework.
-
Geolocation was setup using the "Geocode.xyz" API and the implementation was done such that every message shall also include the user’s location who has posted it. (Note: Due to the limited number of free credits available for this API, once the limit has been reached, the address will, unfortunately, be displayed as "undefined" as the current auth key has reached its API limit)
Profile View:
This profile page has different tabs within it for the user to use as shown below
In the "Home tab", the user shall own a message wall on which other users and himself/herself can post messages on it.
In the "Browse tab". The user shall be able to view another user's personal information, everything excluding their password, and message wall by providing his/her email address. The user can also post on their wall from this tab.
In the "Account tab", the user can change their password and also sign-out.