Instagram Clone: Comprehensive Web Application

Overview

This project is rendition of a Instagram clone that evolves through a three-phase development process, integrating functionalities of static site generation, server-side dynamics, and ultimately, client-side dynamic pages. This comprehensive platform offers an immersive user experience, allowing users to not only interact with static content but also engage dynamically, creating, updating, and deleting profiles, posts, comments, and likes. Leveraging advanced technologies like Python, HTML, CSS, JavaScript, and AJAX, this project showcases a seamless transition from server-side to client-side dynamics, ensuring an interactive and responsive user interface.

Features

Phase 1: Static Site Generator

• Generates web pages from HTML templates and JSON data.
• Utilizes the Jinja2 library to render templated HTML files with contextual data.
• Allows configuration through a JSON file specifying the URL, template file, and context for each page.

Phase 2: Server-Side Dynamic Instagram Clone

• Facilitates user registration and login, paving the way for a personalized experience.
• Features user profile pages displaying posts, followers, and following statistics.
• Home page showcases recent posts from the user and the users they follow.
• Detailed post pages offer options to like, comment, and delete posts.
• Includes an explore page for discovering new users and posts.
• Account administration functionalities encompass profile editing, password changes, and account deletion.

Phase 3: Client-Side Dynamic Pages

• Implements client-side dynamic pages coupled with a REST API, leveraging the server-side code from phase 2 and enhancing it with AJAX calls for a smoother user experience.
• Develops a client application in JavaScript running in the browser, ensuring asynchronous programming and seamless interaction with the REST API.
• Mirrors the main page aesthetics and functionalities from phase 2 but with client-side dynamics, promoting a more interactive and responsive user interface.
• Focuses on learning objectives like client-side dynamic pages, JavaScript programming, asynchronous programming (AJAX), and understanding REST APIs.

Screenshots

• Home Page:
  
• User Profile Page:
  
• Post Detail Page:
  
• Explore Page: