image.raw

Stop just scrolling. Start learning.

image.raw is "GitHub for Creatives", a place where creators share not only finished images but the exact editing "recipes" that produced them.

Inspiration

We all see the photographers posts on social media, thinking to ourselves, "How did they do that?". Comparing their pictures to ours, and seeing the stark differences. Online you only see the final cut, but with image.raw you get to see the before, the after and the post-production steps.

What it does

• For browsers: Browse a gallery of before/after projects. Each project includes an interactive slider to compare the raw and final image, plus a Markdown "Recipe".
• For creators: Upload raw + final images, write your process in a simple editor, and publish. Manage your projects from a dashboard (edit/delete).
• For aspirants: Use the AI Theme Helper to describe a mood (e.g., "Cyberpunk rainy night") and receive a starter Lightroom-style recipe.

How we built it

We focused on speed and polish:

• Frontend: Next.js for fast React pages and server-side API routes.
• Styling: Tailwind CSS for consistent UI work and custom effects.
• Backend: Firebase (Auth, Firestore, Storage) to handle user management, authentication, data, and image hosting.
• AI: OpenAI API (GPT-3.5 Turbo) with a custom system prompt to convert natural-language themes into structured editing recipes.

Challenges we ran into

• Hydration issues when combining client-side Firebase Auth with Next.js SSR. Fixed through auth-dependent UI to client-only rendering.
• Image aspect-ratio mismatches in the slider. Resolved using object-fit and absolute positioning to preserve layout and avoid image stretching.
• Z-index and dynamic UI glitches from scroll-away navbar. Required careful stacking-context adjustments so interactive elements remain clickable.

Accomplishments

• Polished UX: dark mode, smooth animations, parallax effects, and a custom mouse glow give a premium feel.
• The slider: smooth, responsive, and communicates value instantly.
• CRUD: upload, view, edit, and delete complex projects with image storage handled.

What we learned

• Firestore: compound queries often need manual indexes.
• Next.js: when to use SSG, SSR, and CSR matters for user data driven apps.
• Tailwind: huge speed gains when iterating directly in markup.

What's next for Team D

We plan to expand the platform into a community:

• Forking "recipes": let users clone another creator's recipe as a starting point.
• Social features: likes, comments, and follows to encourage interaction.
• Direct integrations: plugins for Lightroom/Photoshop to export recipes automatically.

Built With

• css
• firebase
• html
• javascript
• nextjs
• openai
• tailwind