Instagram Clone Project

Project Overview

This project is a simplified clone of Instagram, allowing users to sign up, upload photos, follow other users, like posts, and leave comments. The goal was to replicate the core features of Instagram using modern web technologies.

Goal

The project was inspired by the need to build a full-stack application with user authentication and CRUD operations, enhancing my skills in Flask and modern web development.

Technical Stack

Front-end: HTML, CSS, JavaScript, React

Back-end: Flask (Python)

Database: SQLite

APIs/Libraries: Flask for session-based authentication, Jinja for template rendering

Features

• User authentication (signup, login).
• Upload and display photos in a user feed.
• Follow/unfollow users and interact with posts (like, comment).
• Infinite scrolling with pagination using postid_lte, size, and page query parameters for optimized data loading.

Architecture/Design

The project combines Flask for server-side operations with Jinja templating to render the Explore, User, and Account pages, while React handles dynamic content on the Feed and single post pages. Communication between the front-end and back-end is facilitated through a REST API, which supports pagination for the user feed.

Data is stored in SQLite, and user sessions are managed using Flask’s session management for authentication. The REST API allows clients to pass query parameters like postid_lte, size, and page to fetch posts and enable continuous scrolling, loading posts dynamically as needed.

Pagination

To support infinite scrolling, the pagination system allows the client to request posts in chunks. The query parameters include:

• postid_lte=N: Fetch posts with an ID less than or equal to N.
• size=N: Specify the number of posts to return per request.
• page=N: Request a specific page of results (useful for non-infinite scrolling scenarios).

Challenges & Solutions

One challenge was ensuring user authentication was secure and efficient. Flask's session-based authentication simplified this process, ensuring only logged-in users could interact with protected routes.

Another challenge was optimizing the feed for large datasets. Pagination was implemented using a React library, but we encountered issues like duplicate posts in the first 10 pages and inconsistent post loading between requests. These issues occurred due to improper handling of the postid_lte parameter. To resolve this, we refined how query parameters were managed to ensure correct data retrieval across multiple requests.

This experience reinforced the importance of scalable data handling in large applications. While a simpler JavaScript scrolling window could have been used, it would have required loading all data at once, making it inefficient for handling large-scale datasets.

Lessons Learned

This project deepened my understanding of efficient data handling, particularly pagination and its role in scalability. I strengthened my skills in integrating RESTful APIs, session-based authentication with Flask, and managing dynamic front-end data with React. Debugging pagination issues also gave me valuable insight into how large-scale applications optimize content delivery for seamless user experiences.

Future Improvements

• Transition to Full Client-Side Dynamic Pages:

  Currently, the app uses React for the Feed and individual posts, while Flask handles the Explore, User, and Account pages. Moving forward, I plan to refactor the entire app to be fully client-side by transitioning all pages to React. This shift will enable a seamless, single-page experience, where content is dynamically loaded on the client-side, improving performance and providing a smoother user experience.

• Stories Feature:

  Implement time-based content expiration by automatically deleting or hiding posts after 24 hours. Explore database strategies for expiring content. Improve real-time UI updates to dynamically reflect disappearing stories without requiring a page refresh.

• Videos on the FYP:

  Expand the For You Page (FYP) to include video posts, enabling users to upload and view videos alongside images, creating a richer feed experience.

Live Demo

Conclusion

This project was an excellent learning experience that allowed me to develop and refine my full-stack skills. I gained valuable insights into Flask, session management, and creating user-centric web applications. I’m proud of the progress made, especially in integrating front-end React with back-end Flask.

However, I recognize that there are still areas for improvement. For instance, the current app still relies on a hybrid architecture, combining client-side React with server-side Flask for certain pages. Moving forward, I plan to refactor the entire app to be fully client-side, which will help optimize performance and provide a smoother experience for users. Additionally, further improvements can be made to the feed’s scalability, especially when handling large datasets.

Despite these areas of improvement, I’m excited about the progress I’ve made and the potential for future updates. This project has given me a solid foundation, and I look forward to building on it.