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.

• 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.

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

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

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.

• 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