PhotoFlow 🖼️ - Instagram Clone with Dynamic Data

PhotoFlow is a frontend Instagram clone that replicates Instagram's frontend design for most features available as of the project's creation date. It also uses Faker.js to generate dynamic data.

Features ✨

• Dynamic Fake Data 🎭: Enjoy ever-changing posts and users powered by Faker.js.
• Home 🏠: Engage with posts and comments.
• Create 📸: Craft and personalize images.
• Stories 📺: Watch and comment on stories.
• Reels 🎞️: View and comment on videos.
• Messages 📤: Send and receive messages.
• Notifications 🔔: Stay informed about followers and activity.
• Search 🔎: Discover and find other users.
• Explore 👀: Uncover user-uploaded content.
• Emojis 😳: Express yourself with emojis using the Emoji modal!
• Responsivity 💙: Experience an Instagram-like design on various devices.

Preview 📺

Login

Home

Comment

Create Modal

Profile

Reels

Messages

Notification

Explore

Mobile

Stories

Dynamic Images

Run Locally

To run this project locally, follow these steps:

Clone the project:

  git clone https://github.com/Dev-R/PhotoFlow.git

Go to the project directory

  cd PhotoFlow

Install dependencies

  yarn install

Start the server

  yarn run dev

Using Docker

You can run PhotoFlow using Docker in either development or production mode:

Development Mode

Build the development Docker image:

  docker build -f Dockerfile.development -t photoflow:dev .

Run the development container:

  docker run -p 5173:5173 photoflow:dev

This will start the development server with hot-reload enabled.

Production Mode

Build the production Docker image:

  docker build -f Dockerfile.production -t photoflow:prod .

Run the production container:

  docker run -p 5173:5173 photoflow:prod

This will serve the optimized production build using the serve package.

You can access the application at http://localhost:5173 in both modes.

Personalize Data Generation 🧬

Since this project uses Faker.js, you have control over the number of posts, stories, and comments rendered. To customize this data, navigate to the SampleGenerator class:

cd src\data

code fakerGenerator.ts

Dynamic Data Disclaimer ⚠️

The data generated is intentionally inconsistent and ever-changing using Faker.js. Each refresh may provide new usernames and content. As such, this project serves more as a template and design showcase.

Acknowledgements

• Frontend framework used - Vue + Vite
• Fake API Data/ Data generation used - Faker.js
• CSS framework used - Tailwind
• Story Carousel - Swiper
• Emojis - vue3-emoji-picker
• Deployed at Vercel