Skip to content

Omarkhaled711/LifeLoader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LifeLoader

LifeLoader: Loading moments, Sharing lives...

Welcome to LifeLoader, your destination for blogging and social networking. Connect with others, share your thoughts, and explore a vibrant community.

Table of Contents

Introduction

LifeLoader invites you to explore a vibrant platform where shared experiences come to life. Engage in thoughtful discussions, share your thoughts, and build meaningful connections. The website is live and and you can explore it here. Please note that for the best experience, we recommend visiting LifeLoader on a PC or laptop. As the project primarily focuses on backend development and system configuration, the current frontend may have some limitations on mobile devices. Dive in, explore, and become a part of the LifeLoader community!

Note: The current domain name might not be available in the future, as this project was developed for practice, and the domain may not be renewed.

Technologies used

Development

  • Django: The backend is powered by Django, providing a secure and scalable web framework.
  • Bootstrap: Ensuring a responsive and visually appealing user interface.
  • jQuery: Empowering the client to handle dynamic content loading, enhancing frontend interactions, and optimizing server resources.
  • RESTful API: Streamlining communication between the frontend and backend for optimal performance.
  • HTML and CSS: Crafting the foundation for a pleasing user interface.
  • SQLite: Serving as the database engine in the development environment.

Deployment

  • PostgreSQL: Providing a robust and scalable database solution for deployment.
  • Apache2: Serving as the web server in the deployment environment.
  • HAproxy: Managing load balancing to distribute incoming traffic efficiently.
  • NFS: Facilitating the sharing of media files between servers.
  • Let's Encrypt: Securing the load balancer server with SSL encryption.
  • Datadog: Utilized for monitoring and analytics in the deployment environment.
  • Linux (Ubuntu): Operating system for the deployment servers.
  • Bash Scripts: Automating some deployment tasks.

Version Control

  • Git and GitHub: Enabling collaborative development and version control.

Features

User Authentication

  1. Registration:

    • Seamless user registration process with a clear and intuitive interface.
    Click to view screenshot

    Registering process. User Registration Screenshot.

    Click to view screenshot

    Account created successfully User Registration Screenshot

  2. Login:

    • Secure login functionality with robust password protection.
    Click to view screenshots

    Entering username and password. Login Page Screenshot

    User successfully logged in, showing the dashboard. Dashboard Screenshot

  3. Password Reset:

    • Effortless password reset mechanism for user convenience.
    Click to view screenshot

    Request password reset. Password Reset Screenshot

    Email for creating new password has been sent Password Reset Screenshot

    Create new password. Password Reset Screenshot

Social Networking

  1. Post Creation:

    • Intuitive interface for creating and publishing posts.
    Click to view screenshot

    Write Post Post Creation Screenshot

    Published successfully Post Creation Screenshot

  2. Interaction:

    • User-friendly features for liking and commenting on posts.
    Click to view screenshot

    Writing a comment Post Interaction Screenshot

    Liking a post Post Interaction Screenshot

  3. Sorting Options:

    • Explore posts based on latest, top likes, and top comments.
    Click to view screenshot

    Latest Sorting Options Screenshot

    Top Comments Sorting Options Screenshot

    Top Likes Sorting Options Screenshot

Profile Management

  1. Update Information:

    • Easily update profile picture, email, username, and bio.
    Click to view screenshot

    The profile before any changes Update Information Screenshot

    Making Edits Update Information Screenshot

    Profile updated successfully Update Information Screenshot

  2. View Others' Profiles:

    • Explore and view profiles of other users in the community.
    Click to view screenshot

    View Others' Profiles Screenshot

Search Functionality

  1. User Search:

    • Efficient search functionality to find specific users.
    Click to view screenshot

    User Search Screenshot

  2. Posts of a specific user:

    • Find posts written by a specefic user
    Click to view screenshot

    Post Search Screenshot

Landing Page

  • Having a visually good-looking landing page that describes the features of the website.

    Click to view screenshot

    Landing Page Screenshot

API Endpoints

These APIs are seamlessly integrated with jQuery, optimizing backend server performance by enabling efficient retrieval of JSON data, which is then presented on the client frontend.

1. View Posts Ordered by Latest

  • Endpoint: /api/v1/posts/

  • Description: Fetches posts ordered by the latest.

  • Click to view screenshot

    View Latest Posts Screenshot

2. View Posts Ordered by Top Likes

  • Endpoint: /api/v1/posts/top_likes/

  • Description: Fetches posts ordered by top likes.

  • Click to view screenshot

    View Top Likes Screenshot

3. View Posts Ordered by Top Comments

  • Endpoint: /api/v1/posts/top_comments/

  • Description: Fetches posts ordered by top comments.

  • Click to view screenshot

    View Top Comments Screenshot

4. View Comments on a Specific Post

  • Endpoint: /api/v1/posts/{post_id}/comments/

  • Description: Fetches comments on a specific post.

  • Click to view screenshot

    View Comments on Post Screenshot

5. View Likes on a Specific Post

  • Endpoint: /api/v1/posts/{post_id}/likes/

  • Description: Fetches likes on a specific post.

  • Click to view screenshot

    View Likes on Post Screenshot

6. Fetch Data of All Users Profiles

  • Endpoint: /api/v1/users/

  • Description: Fetches data of all user profiles.

  • Click to view screenshot

    Fetch User Profiles Screenshot

7. View a Specific User Profile

  • Endpoint: /api/v1/users/{user_id}/

  • Description: Fetches data of a specific user profile.

  • Click to view screenshot

    View User Profile Screenshot

8. Post Comment on a Specific Post (if logged in)

  • Endpoint: /api/v1/posts/{post_id}/comments/

  • Description: Allows the user to post a comment on a specific post (requires authentication).

  • Click to view screenshot

    Adding a comment Post Comment on Post Screenshot

    Added successfully Post Comment on Post Screenshot

Demo Video

Check out the demo video to see the features in action:

Demo Video

Click on the image above to watch the demo video.

Installation

Follow these steps to get your project up and running.

Prerequisites

Before you begin, make sure you have the following installed:

  • Python (version 3)
  • Pip (Python package installer)

Clone the Repository

git clone https://github.com/your-username/your-project.git

Navigate to the Project Directory

git clone https://github.com/your-username/your-project.git

Create a Virtual Environment (Optional but recommended)

python -m venv venv

Activate the Virtual Environment

  • On Windows:

     venv\Scripts\activate
  • On macOS/Linux:

    source venv/bin/activate

Apply migrations

python manage.py migrate

Create a Superuser (Optional but recommended)

python manage.py createsuperuser

Run the Development Server

python manage.py runserver

Visit http://localhost:8000/ in your browser to see the application.

Deployement

Design overview

For the deployment architecture, I employed a robust 3-server web infrastructure. The infrastructure comprises one server designated as a load balancer, powered by HAProxy, while the other two servers host the website utilizing the Apache web server. Additionally, a master-slave configuration was implemented with two PostgreSQL databases to ensure optimal data management and redundancy.

click here to view the design

View Design

Deployement steps

1. Download and Install LifeLoader

  • Automated Script: Run the provided bash script to streamline the installation process. Navigate to the "deploy" directory and execute:

    ./deploy/scripts/installing_LifeLoader.sh
  • Manual Installation: If you encounter issues with the script or prefer a manual approach, follow these steps:

    • Clone the repository to your desired server.
    • Intsall any prerequisites an mentioned in the installation steps above
    • Install the dependencies listed in requirements.txt. Adjust configurations as necessary.

2. Adjust Static Settings

  • Automated Script: Utilize the provided script for configuring static settings:

    ./deploy/scripts/adjust_static_settings.sh
  • Manual Configuration: In case of script issues or if you prefer manual adjustments: -- Update ALLOWED_HOSTS and add STATIC_ROOT to settings.py (Refer to the script to see how can this be done) -- Execute python3 manage.py collectstatic.

3. Install apache2

  • Automated Configuration: Run the provided script to automatically set up Apache2 for LifeLoader:

    ./deploy/scripts/apache2_setup.sh
  • Manual Configuration: If you encounter issues with the script or prefer a manual approach, follow these steps:

    • Install Apache2 and the WSGI module:

      sudo apt-get install apache2 -y
      sudo apt-get install libapache2-mod-wsgi-py3 -y
    • Copy the default Apache configuration file to create one for LifeLoader:

      sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/LifeLoader.conf
    • Add the following configurations to LifeLoader.conf, just above the </VirtualHost> tag. Adjust the paths to match your machine:

              Alias /static /home/ubuntu/LifeLoader/static
              <Directory /home/ubuntu/LifeLoader/static>
                      Require all granted
              </Directory>
      
              Alias /media /home/ubuntu/LifeLoader/media
              <Directory /home/ubuntu/LifeLoader/media>
                      Require all granted
              </Directory>
      
              <Directory /home/ubuntu/LifeLoader/LifeLoader>
                      <Files wsgi.py>
                              Require all granted
                      </Files>
              </Directory>
      
              WSGIScriptAlias / /home/ubuntu/LifeLoader/LifeLoader/wsgi.py
              WSGIDaemonProcess LifeLoader_app python-path=/home/ubuntu/LifeLoader python-home=/home/ubuntu/LifeLoader/venv
              WSGIProcessGroup LifeLoader_app
    • Ensure the adjustments in paths reflect those on your machine. Finally, enable the LifeLoader website:

      sudo a2ensite LifeLoader
      sudo a2dissite 000-default.conf

4. Setup postgresql on master server

  • Install PostgreSQL and psycopg2:

      sudo apt-get install postgresql postgresql-contrib
      pip3 install psycopg2-binary
  • Access the PostgreSQL command-line interface:

      sudo -u postgres psql
  • Execute the following SQL commands, replacing placeholders with your actual information:

    CREATE DATABASE "$your_db";
    CREATE USER "$your_user" REPLICATION LOGIN CONNECTION LIMIT 1 ENCRYPTED PASSWORD "$your_dbpassword";
    ALTER ROLE "$your_user" SET client_encoding TO 'utf8';
    ALTER ROLE "$your_user" SET default_transaction_isolation TO 'read committed';
    ALTER ROLE "$your_user" SET timezone TO 'UTC';
    GRANT ALL PRIVILEGES ON DATABASE "$your_db" TO "$your_user";
    • For single-server deployment, use this line instead:

      CREATE USER "$your_user" WITH PASSWORD '"$your_dbpassword"';
  • If deploying on two servers (Master-Slave Database Replication), add these configurations:

    ALTER ROLE <your_user> CONNECTION LIMIT -1;
  • Append the following lines to '/etc/postgresql/<version>/main/postgresql.conf':

    listen_addresses = '*'
    wal_level = replica
    max_wal_senders = 10
    wal_keep_segments = 64
  • Append the following line to '/etc/postgresql/<version>/main/pg_hba.conf':

      host    replication     <your_user>   <ip of the slave server>/0   md5
  • Restart the PostgreSQL service:

    sudo service postgresql restart
    sudo service postgresql status

5. Setup postgresql on slave server

  • Install PostgreSQL (as done on the master server) and stop the PostgreSQL server:

    sudo service postgresql stop
    sudo service postgresql status
  • Append the following lines to '/etc/postgresql/<version>/main/postgresql.conf':

    listen_addresses = 'localhost,<slave server ip>'
    wal_level = replica
    max_wal_senders = 10
    wal_keep_segments = 64
    hot_standby = on
  • Append the following line to '/etc/postgresql/<version>/main/pg_hba.conf':

    host    replication     <your_user>     <master server ip>/0   md5
  • Delete all PostgreSQL data directory contents (backup important data first, if necessary):

    cd /var/lib/postgresql/<version>/main/
    sudo rm -rfv *
  • Copy data from the master database to the slave database:

    sudo su postgres
    pg_basebackup -h <main server ip> -U <your user> -p 5432 -D /var/lib/postgresql/<version>/main/  -Fp -Xs -P -R

Enter the PostgreSQL user password when prompted.

  • Start the PostgreSQL server:

    sudo service postgresql start
    sudo service postgresql status

6. Create a configuration file to hide sensitive information

Create a Configuration File for Sensitive Information

  • Automated Configuration: Run the provided script to generate a configuration file with sensitive information:

    ./deploy/scripts/config_file.sh

Ensure to fill the variables with your actual data. If you encounter issues with the script, you can manually create the file and populate it similarly.

Note: It's advisable to change the secret key on your deployment server. Utilize get_random_secret_key() from django.core.management.utils to achieve this.

7. Update settings

The settings.py files on both the master and slave servers need to be updated. Additionally, a routers.py file must be added to the slave server to facilitate forwarding write operations to the main server, considering the slave server database is read-only.

Find the updated code in:

  • For the Master Server: ./deploy/code_changes/master
  • For the Slave Server: ./deploy/code_changes/slave

Ensure to incorporate these changes to ensure the proper functioning of the LifeLoader application in your multi-server deployment setup.

8. File permissons

run the script:

./deploy/scripts/permissions.sh

to ensure that the files have the proper permissions

9. Set up NFS for media files

  • Install NFS Server on Master:

    sudo apt-get update
    sudo apt-get install nfs-kernel-server
  • Configure Exports on Master:

    Update /etc/exports to export your media directory.

    /path/to/media  slave_ip(rw,sync,no_subtree_check)
  • Install NFS Client on Slave:

    sudo apt-get update
    sudo apt-get install nfs-common
  • Mount Media Directory on Slave:

    sudo mount master_ip:/path/to/media /path/to/local/media

10. Restart apache2 on both servers

sudo service apache2 restart

Adjust Load-balancer

  • Install HAProxy:

    sudo apt-get install haproxy -y
  • Install SSL Certificate using Let's Encrypt:

    sudo apt-get install certbot -y
    sudo certbot certonly --standalone -d yourdomain.com
  • Combine Certificate Files

    Combine the Let's Encrypt certificate files into a single .pem file:

    sudo cat /etc/letsencrypt/live/yourdomain.com/fullchain.pem /etc/letsencrypt/live/yourdomain.com/privkey.pem > /path/to/your/domain/combined.pem
  • Adjust Load Balancer Configuration:

    Find the HAProxy configuration file at ./deploy/load-balancer/haproxy.cfg. Adjust the settings within this file with your actual paths and server ips

  • Start HAProxy:

    sudo service haproxy start

Monitoring

Datadog was used for monitoring

Click to view screenshot

Monitoring Screenshot

Future Enhancements

Frontend Improvements

  • Mobile Responsiveness: Enhance the frontend to ensure a seamless and responsive experience on various devices, especially mobile phones and small screens.
  • User Interface Refinement: Optimize layout and styling to improve overall user experience.

Backend Features

  • Media Posts: - Expand content options by allowing users to create and share media posts, including pictures and videos. - Implement image and video upload functionalities to enhance user-generated content.

  • More User Interaction: - Implement a "Follow" feature, allowing users to follow each other and receive updates on their activities. - Introduce a chat functionality, enabling users to communicate with each other in real-time.

  • Notification System: Introduce a notification system to keep users informed about new followers, likes, comments, and other relevant activities.

Acknowledgments

Special thanks to ALX for providing the servers and domain names for this project. In addition to their guidance and mentorship during my journey through the foundations stage in the software engineering track.

License

This project is licensed under the MIT - see the LICENSE file for details.