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

You can run PhotoFlow using Docker in either development or production 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.

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.

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