Instagram Clone

Timeline

May 2024

Skills

Python, Flask, React, HTML, CSS, JavaScript, SQL, AWS, REST API, JSON

Overview

This project is an Instagram clone that I developed in three stages, leveraging static site generation, server-side dynamic pages, and client-side dynamic pages. The final product is a fully interactive web application with functionalities similar to Instagram, including user management, posts, comments, likes, and a REST API for client-side dynamic interactions.

Process

Static Site Generator

I began the project by implementing a templated static site generator using Python. This tool processes HTML templates, JSON data, and static files (such as images and CSS) to generate static content for a non-interactive website. The focus was on understanding HTML templates and static site generation. I developed a Python program named insta485generator to automate the generation of static HTML files from input directories, laying the groundwork for static content creation.

Server-Side Dynamic Pages

Building on the static site generator, this stage involved creating server-side dynamic pages with Flask. The website was enhanced with features for managing users, posts, comments, and likes. This was achieved by setting up a SQL database and implementing server-side rendering. I deployed the application on AWS, configuring the EC2 instance and ensuring it was ready for handling interactive user features.

Client-Side Dynamic Pages

The final stage transformed the server-side application into a client-side dynamic application. I refactored server-side code into a REST API and developed a JavaScript client application using React. This allowed for interactive features such as dynamic user interfaces and seamless updates. The client-side application enhances the user experience with functionalities like infinite scrolling and real-time interactions without page reloads.

Outcomes

Throughout the project, I developed expertise in Python programming, server-side development with Flask, client-side development using React, and working with AWS for deployment. I gained experience in designing and implementing both static and dynamic web applications, handling database interactions, and creating seamless user experiences with modern web technologies. The final product is a comprehensive Instagram clone featuring a static site generator for initial content, an interactive server-side application for managing users, posts, comments, and likes, and a dynamic client-side interface with infinite scrolling and real-time updates for an engaging user experience.