omichoubey793-png/flowsync

★ 14JavaScriptAudience · vibe coderComplexity · 3/5Setup · hard

Mindmap

mindmap
  root((FlowSync))
    What it does
      Upload images
      Browse gallery
      Full-screen preview
      Owner delete
    Tech Stack
      React and Vite
      TailwindCSS
      Node.js Express
      MongoDB
      AWS S3
    Use Cases
      Image sharing
      Visual discovery
      Creative portfolio
    Audience
      Vibe coders
      Creative builders

mindmap root((FlowSync)) What it does Upload images Browse gallery Full-screen preview Owner delete Tech Stack React and Vite TailwindCSS Node.js Express MongoDB AWS S3 Use Cases Image sharing Visual discovery Creative portfolio Audience Vibe coders Creative builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a visual content platform where users can upload images to cloud storage and browse them in a Pinterest-style grid.

USE CASE 2

Add owner-only deletion that removes files from both a database and AWS S3 when a user deletes their own upload.

USE CASE 3

Create a full-screen image preview modal that shows metadata like tags, upload date, and owner name.

USE CASE 4

Deploy a full-stack JavaScript app with a React front end on Vercel and a Node/Express back end on Render.

Tech stack

ReactViteTailwindCSSFramer MotionNode.jsExpressMongoDBAWS S3

Getting it running

Difficulty · hard Time to first run · 1h+

Requires an AWS S3 bucket with IAM credentials and a MongoDB database connection string.

In plain English

FlowSync is a web application that lets users discover, upload, and browse visual content in a Pinterest-style layout. It was built as a creative platform with a cinematic look and feel, meaning images and cards are presented in a visually immersive way rather than a plain list. The project includes both a front-end website and a back-end server that work together, and it is already deployed live online. On the front end, the interface is built with React and styled using TailwindCSS, with animations powered by Framer Motion. These choices give the site a polished, modern appearance. When a user clicks on any image, a full-screen preview opens showing the image alongside details such as the title, description, tags, upload date, and the name of the person who uploaded it. Smaller cards in the main feed also show tags, formatted dates, and owner names at a glance. For handling files, the platform uses Amazon S3, a cloud storage service, to store uploaded images. Users can upload images through the site, and they are saved directly to that storage. Only the person who originally uploaded an image, the owner, can delete it. When they do, the record is removed from the database and the corresponding file is also deleted from cloud storage, keeping everything consistent. The back end is a Node.js server using Express as its framework, connected to MongoDB to store records about each image, its owner, and its details. A library called Multer-S3 handles the process of taking a file from the user and sending it to S3. The project is live at two public URLs: the front-end website is hosted on Vercel and the back-end API runs on Render. The README does not include steps to run the project locally, so anyone wanting to use FlowSync would visit the deployed site directly.

Copy-paste prompts

Prompt 1

I'm using the FlowSync repo. Help me add a search bar that filters the image grid by tags stored in MongoDB.

Prompt 2

How do I connect FlowSync to my own AWS S3 bucket? Walk me through setting the Multer-S3 config and the correct IAM permissions.

Prompt 3

Add a user login system to FlowSync using JWT tokens so only signed-in users can upload new images.

Prompt 4

Modify the FlowSync full-screen image modal to show a like button and persist the like count in MongoDB.

Prompt 5

How do I run FlowSync locally? What environment variables do I need for the MongoDB connection and AWS S3 credentials?

Open on GitHub → Explain another repo

← omichoubey793-png on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.