🔗 https://pique-ten.vercel.app/

About • Demo/Features • Installation • Roadmap • Credit

💡 About the Project

PIQUE is a social media and creative application for users who want to digitize their closet, share their creativity with others, or seek inspiration.

Why build this application?

• To create a social media platform specifically for those who love fashion or want to seek styling help
• To build an application that is comprehensive and intuitive, even for users who aren't "techy"
• To challenge myself to build a full-stack project from the ground up with a hybrid architecture between a Dockerized Flask microservice for AI image processing and a MERN tech stack for the core plateform

Tech Stack

• Frontend: React, Vite, Tailwind CSS
• Backend: Node.js, Express, Python microservice (Flask)
• Database: MongoDB
• Hosting: Vercel (frontend), Render (backend), Railway (microservice)

💻 Demo

Key Features:

• AI Styling

  • Integrated generative AI styling, translating user prompts and wardrobe data into realistic outfit mockups
  • Interactive outfit results allowing users to see outfit metadata right away

• Image Processing and Storage

  • AI-powered image processing microservice (Rembg)
  • Implemented Jimp to detect and remove excess 'white-space' from images
  • Integrated Cloudflare Images for secure, performant image storage
  • Database of pre-processed images to easily add to closet/wishlist
  • Item organization with dynamic tagging and filtering system

• Canvas Editor

  • Interactive canvas editor for users to create outfits using Fabric.js

• Dynamic Posts and Saving

  • View outfit item metadata by clicking the item
  • User interaction with liking and saving posts to boards

• Secure Authentication

  • Google OAuth and manual login via Firebase
  • Protected API routes with token-based authentication and middleware handling
  • User engagement through viewing profiles, following, customizing profile, etc.

• Efficiency

  • Cached outfit and image to reduce backend calls and improve performance

🔓 Installation

1. Clone the repository

https://github.com/gracematsuoka/PIQUE.git

2. Install dependencies

npm install

3. Create environment variables

   • .env in /client

     # From firebase project settings → web app config
     REACT_APP_FIREBASE_API_KEY
     REACT_APP_FIREBASE_AUTH_DOMAIN
     REACT_APP_FIREBASE_PROJECT_ID
     REACT_APP_FIREBASE_STORAGE_BUCKET
     REACT_APP_FIREBASE_MESSAGING_SENDER_ID
     REACT_APP_FIREBASE_APP_ID
     REACT_APP_FIREBASE_MEASUREMENT_ID
     
     # Your backend URL (ie http://localhost:8000)
     REACT_APP_API_BASE_URL
     
     # From Cloudflare Images → account hash
     REACT_APP_CF_HASH

   • .env in /server

     # Your MongoDB cluster connection string
     MONGO_URI
     
     # From firebase project settings → service accounts → generate new private key
     FIREBASE_PROJECT_ID
     FIREBASE_PRIVATE_KEY_ID
     FIREBASE_PRIVATE_KEY
     FIREBASE_CLIENT_ID
     FIREBASE_CLIENT_CERT_URL
     
     # From Cloudflare Images → account API tokens
     CF_IMAGES_API
     CF_IMAGES_TOKEN
     
     # Your connection URL to the flask microservice (ie http://python:5001)
     PYTHON_SERVICE_API

4. Run the frontend

npm start

5. Follow the instructions for installation of Rembg at https://github.com/danielgatis/rembg

6. Make sure Docker is installed and running → run the server

   cd bgrem
   docker build -t rembg-server .
   docker compose build
   docker compose up

🎉 You're all set! Visit http://localhost:3000 to get started.

📍 Roadmap

PIQUE is an ongoing project, the following are some of the features that are being/will be implemented...

• Feed that reflects user's preferences
• AI-integrated styling feedback/recommendations
• Calender feature to plan outfits
• Messaging and commenting system to increase collaboration
• Allowing images to be uploaded in bulk

✅ Credit

This project uses the following libraries/services:

• Background remover: Rembg
• Loading animation: LDRS
• Drop down selection: React Select
• Canvas: Fabric JS
• Caching: TanStack Query
• Image storage: CloudFlare Images
• Image processing: Jimp