Skip to content

AhmedYahyaE/laravel-instagram-clone

Repository files navigation

Instagram Clone Laravel Project

This is a Laravel (and partially Vue.js ) application which mimics the core functionalities of the popular social media platform, Instagram. The project is built using Laravel framework (and Vue.js), providing a robust and scalable foundation for creating an image-sharing platform. The project also features a User Following System (Follow/Unfollow Button) based on Vue.js Components and making HTTP Requests from the frontend using Axios JavaScript library.

Frontend technologies used: Bootstrap (responsive/mobile first design), Vue.js, Axios JavaScript library, and Webpack module bundler.

Screenshots:

Homepage:

instagram-clone-homepage

User Profile:

instagram-clone-profile-page

User Following System (Follow/Unfollow Button):

instagram-profile-page-2

User Profile Management:

instagram-clone-edit-profile

Adding Posts:

instagram-clone-add-new-post

Features:

1- Using Laravel's 'storage' directory (public disk and local driver) for storing user-uploaded images (instead of the regular 'public' directory). Additionally, using a Symbolic Link between the 'storage/app/public' directory and 'public/storage' directory to display images throughout the application.

2- User Following System (Follow/Unfollow Button).

3- Authorization using Laravel "Policies" classes.

4- Using Laravel Cache (caching) to optimize performance.

5- Using Eloquent Events / Model Events.

6- Laravel Telescope.

7- Using SQLite, the lightweight database engine.

8- Sending automatic Welcome emails to new registered users (using Mailable and Mailtrap).

9- Making HTTP Requests to the server from the frontend using Axios JavaScript library.

10- Using Vue.js Components.

11 - Using "Intervention Image" package for handling and manipulation of user-uploaded images.

12- Eloquent Pagination.

13- User Profile Management.

14- User Registration, Authentication and Authorization.

15- Using Webpack module bundler.

Application Routes:

All the application routes are defined in the web.php file.

Installation & Configuration:

1- Open your terminal, and use the 'git clone https://github.com/AhmedYahyaE/laravel-instagram-clone.git' command, or just download the ZIP project.

2- Navigate/Change into (using the cd command) to the project root directory, then run the 'composer install' command.

3- Run the 'npm install' command (and only in case you face any issues/errors, run the 'npm audit fix' command), and then run the 'npm run build' command.

4- Recreate the Symbolic Link between the 'storage/app/public' directory and 'public/storage' directory by removing/deleting the public/storage directory first, then run the 'php artisan storage:link' command.

5- Run the 'php artisan serve' command, and then open your browser and visit http://127.0.0.1:8000 to access the Instagram Clone application.

** Ready-to-use registered accounts credentials you can use to log in:

Profile 1: Email Address: test@test.com, Password: 11111111

Profile 2: Email Address: other@email.com, Password: 11111111

Profile 3: Email Address: test3@test.com, Password: 11111111

Profile 4: Email Address: ramy.morsy@gmail.com, Password: 11111111

Contribution:

Contributions to my Instagram Clone Laravel application are most welcome! If you find any issues or have suggestions for improvements or want to add new features, please open an issue or submit a pull request.