piyush-eon/instagram-clone

Purpose and Runtime

This is a Create React App single-page Instagram-style clone, deployed to Firebase Hosting. The browser app renders a post feed and supports image-upload-driven post creation. Primary entry points are src/index.js, which mounts React, and src/App.js, which owns the application composition.

Application Shell and Feed

src/App.js is the top-level UI/controller boundary: it assembles the header, upload experience, and feed. Global and application-level styling are split across src/index.css and src/App.css. There is no server application in this repository; client code communicates directly with Firebase services.

Post Rendering Component

src/Post.js is the feed-item boundary. It is responsible for displaying an individual post’s content and associated interaction UI, with styles in src/Post.css. The application flow is expected to map persisted post records into Post component instances from src/App.js.

Upload and Content Creation

src/ImageUpload.js encapsulates the image-post creation workflow, including user image selection and submission. Its dedicated presentation layer is src/imageUpload.css. This component forms the key client-side mutation boundary: local file input is uploaded to remote storage, then post metadata is persisted for the feed.

Firebase Integration Boundary

src/firebase.js centralizes Firebase initialization and is the integration point for Firebase-backed persistence and media storage. Firebase provides the external backend boundary: post data is read/written through Firebase database capabilities, while uploaded images are stored and made available by URL for post rendering.

Primary Data Flow

On startup, src/index.js mounts src/App.js. The app loads or subscribes to post data through src/firebase.js, maintains feed state in the React layer, and renders records through src/Post.js. For creation, src/ImageUpload.js accepts a local file and caption-like metadata, uploads media through Firebase, persists the resulting post record, and the feed updates from Firebase-backed data.

Delivery and Static Assets

Create React App builds the browser bundle from src/index.js; public/index.html supplies the document host and public/manifest.json supports installable/PWA metadata. Firebase Hosting deployment is defined by firebase.json and .firebaserc; the checked-in .firebase/hosting.YnVpbGQ.cache indicates a deployed hosting build cache.