This Instagram clone is a full-stack web application built using Laravel 10 and Vue.js 3. Users can sign up, log in, and create posts with images, text, and locations. The app supports functionalities like liking posts, adding comments with emojis, saving favorite posts, and managing user profiles.
The Home.vue component is a dynamic and engaging Vue.js view designed to create an immersive user experience within your application. Tailored for social media platforms or content-driven websites, this component seamlessly integrates user posts, likes, and comments, offering a visually appealing and responsive interface.
- User-Friendly Interface: Enjoy a user-friendly interface that seamlessly combines user posts, comments, and engagement metrics for an immersive browsing experience.
- Interactive Carousel: The component features a responsive carousel that showcases user profiles, allowing for easy navigation and exploration of diverse content creators.
- Real-Time Updates: Stay updated with real-time interactions such as likes, comments, and post creations, fostering an engaging and dynamic user community.
- Post Interaction Options: Empower users with post interaction options, including liking, commenting, and viewing detailed post information, all within a single view.
- Mobile Responsiveness: Ensure a consistent and visually pleasing layout across devices with mobile responsiveness, adapting to various screen sizes for an optimal user experience.
- Vue.js Integration: Leverage the power of Vue.js to create reactive and modular components, promoting efficient development and easy maintenance.
The CreatePostOverlay component is a powerful and intuitive Vue.js component designed to simplify the process of creating and sharing content within your application. Whether you're building a social media platform, a photo-sharing app, or any project requiring user-generated content, this component provides a seamless and visually appealing overlay for crafting and sharing posts.
- User-Friendly Interface: The overlay presents a user-friendly interface, allowing users to effortlessly create and share posts with minimal effort.
- Media Upload: Support for uploading images directly from the user's device, providing a dynamic and engaging way to include visuals in posts.
- Real-Time Validation: Receive immediate feedback on the validity of uploaded files, ensuring a smooth user experience with error messages for incorrect file formats.
- Rich Text Editor: A robust text editor allows users to compose captions with ease, offering a spacious and responsive area for thoughtful content creation.
- Location Tagging: Seamlessly integrate location tagging for posts, enhancing the contextual information associated with each creation.
- Accessibility and Advanced Settings: The component includes options for users to enhance accessibility and configure advanced settings for their posts.
- Responsive Design: The overlay adapts to various screen sizes, maintaining a consistent and visually appealing layout across devices.
The User.vue component is a versatile Vue.js view designed to showcase user profiles within your application. Tailored for social media platforms or content-driven websites, this component offers a comprehensive display of user details, including posts, bio, and follower metrics.
- Profile Overview: Display essential user information such as username, bio, and profile picture, creating an engaging and personalized profile page.
- Interactive Icons: Dynamically toggle between grid, reels, saved, and tagged views with interactive icons, enhancing user experience and navigation.
- Follow and Message Options: Facilitate user interactions with convenient "Follow" and "Message" buttons, encouraging community engagement.
- Responsive Design: Ensure a seamless experience across devices with a responsive design that adapts to various screen sizes and orientations.
- Real-Time Metrics: Showcase real-time metrics such as the number of posts, followers, and following, providing users with valuable insights into profile activity.
- Post Grid View: Explore user posts in a visually appealing grid layout, allowing for easy browsing and interaction.
The Profile Page Vue.js component provides users with a comprehensive interface to manage and customize their profile information seamlessly. Tailored for applications requiring user account controls, this component allows users to edit their name, email, bio, change passwords, and even delete their account.
- Edit Profile Information: Empower users to modify their profile details, including name, email, and bio, effortlessly enhancing their personalization on the platform.
- Change Password: Facilitate secure account management by enabling users to update their passwords with ease, ensuring robust security practices.
- Email Verification Awareness: Support email verification processes by dynamically adjusting the interface based on whether email verification is required.
- Delete Account Option: Implement a straightforward account deletion mechanism, allowing users to permanently delete their accounts when needed.
- Responsive Design: Ensure a seamless user experience across various devices with a responsive and user-friendly design.
The Login and Register Pages Vue.js components provide a streamlined and user-friendly authentication experience for your web application. Built with the powerful Inertia.js framework, these components seamlessly integrate with Laravel backends, ensuring a robust and secure authentication process.
-
Effortless Login: Allow users to log in with ease using their email and password.
-
Remember Me: Implement a "Remember Me" functionality with a checkbox for a convenient login experience.
-
Password Reset: If enabled, users can reset their passwords directly from the login page.
- User Registration: Enable new users to sign up by providing essential details like name, email, and password.
- Password Confirmation: Ensure data integrity with a password confirmation field.
- User-Friendly Validation: Provide clear error messages and input validation for a smooth registration process.
The FavoritePostOverlay component is a sleek and feature-rich Vue.js component designed to showcase and interact with a user's favorite posts. Whether you're developing a social media application or any platform where users can curate and revisit their preferred content, this component provides an elegant overlay for a seamless and engaging experience.
- Visual Interaction: Enjoy an immersive visual experience as the overlay dynamically responds to user hover actions, revealing essential engagement metrics such as likes and comments.
- Effortless Navigation: Users can effortlessly click on their favorite posts to view detailed information or navigate to the full content, enhancing the overall user journey.
- Dynamic Content Display: Display key information, including the number of likes and comments, providing users with instant insights into the popularity and engagement of their favorite posts.
- Customizable Design: Tailor the appearance of the overlay to match your application's aesthetic, with customizable background colors, font styles, and icon themes.
- Responsive and Intuitive: The component adapts seamlessly to various screen sizes, ensuring a consistent and intuitive user interface across devices.
- Vue.js Integration: Harness the power of Vue.js to easily integrate the FavoritePostOverlay component into your application, leveraging the framework's reactivity and component-based architecture.
The ShowPost page in this Instagram clone project provides a detailed view of a post, including the post image, user details, comments, and interactive features. Users can like posts, add comments with emojis, and manage post options.
- Detailed Post View: Display of the post image, user details, and creation date.
- User Interaction: Like posts, add comments with emojis, and view existing comments.
- Post Options: Users can access post options, including deleting their own posts or comments.
- Responsive Design: Optimized for various screen sizes, including mobile, tablet, and large screens.
- User Authentication: Sign up, log in, and password recovery.
- Post Creation: Upload photos, write text, and share locations.
- Social Features: Like posts, add comments with emojis, and save favorite posts.
- User Profile: Upload profile photos, view posts, and manage profile information.
- Dashboard: Change name, email, bio, password, and delete the account.
- Responsive Design: Optimized for mobile, tablet, and large screens.
- Vue.js Components: Utilizes Vue.js 3 and various plugins for enhanced frontend functionality.
git clone https://github.com/PayamAnari/instagram-clone.git
composer install
cp .env.example .env
php artisan cache:clear
composer dump-autoload
php artisan key:generate
composer require laravel/breeze --dev
php artisan breeze:install vue --ssr
php artisan serve
- Laravel 10 for robust server-side functionality.
- Laravel Sanctum for secure API authentication.
- MySQL database for efficient data storage.
- Vue.js 3 for dynamic and reactive user interfaces.
- Inertia.js for server-side rendering, enhancing frontend performance.
- Tailwind CSS for a utility-first styling approach, ensuring a responsive and visually appealing design.
- Vue3 Carousel and Vue3 Emoji Picker for additional engaging features.
- Laravel Mix for asset compilation
- Laravel Breeze for authentication scaffolding
- Intervention Image for image handling
- Ziggy for named Laravel routes in JavaScript
Contributions to the Instagram Clone App are highly encouraged! If you'd like to contribute, please follow these steps:
Fork this repository to your GitHub account.
Create a new branch for your feature or bug fix.
Implement your changes or additions.
Commit your changes and push them to your forked repository.
Create a pull request to the original repository, explaining your changes and their significance.
This project is licensed under the MIT License.
Thank you for exploring the Gym Fitness app! If you have any questions, feedback, or just want to say hi, feel free to reach out. Happy fitness journey!