Dev-R / Instagram-clone

A web app that aims to replicate the UI/UX of Instagram using Vue.js, and Faker.js for dynamic data generation.

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

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