April 8, 2024

Overview

PhotoQuotes is a web application I developed as my final project for Harvard's CS50 course. It helps elderly users create and share good morning messages on social media by combining beautiful Unsplash photos with inspiring quotes. The project focuses on simplicity, making it easy for older adults to create and share meaningful morning greetings with their friends and family.

Key Features

Simple Interface:
- Easy-to-use search for finding photos
- Clear buttons and controls
- Straightforward sharing options
Good Morning Messages:
- Collection of morning greetings and blessings
- Quotes that change based on time of day
- Special weekend and holiday messages
- Family-friendly content
Image Generation:
- High-quality photos from Unsplash
- Automatically embedded text
- Professional-looking results
- Easy sharing to social media

Design System

Typography

Typography System

Caveat ExtraLight

Caveat Light

Caveat Regular

Caveat Medium

Caveat SemiBold

Caveat Bold

Caveat ExtraBold

Simple, family-friendly typography optimized for elderly users with clear hierarchy and good readability.

Color Palette

PhotoQuotes Color Palette

#07090B

#FFFFFF

#4C6A93

Our design emphasizes warmth and positivity:

Primary Blue (#2563EB): Trust and reliability for the interface
Golden Yellow (#F59E0B): Warmth and optimism for morning themes
Success Green (#10B981): Positive actions and sharing
Purple Accent (#8B5CF6): Creative and inspirational elements

Technologies Used

Frontend Stack:
- React.js for user interface
- HTML5 Canvas for image manipulation
- Web Share API for social sharing
- Modern JavaScript features
External Services:
- Unsplash API for photos
- Custom quote collections

Challenges and Learnings

Image Text Embedding

"A challenge was creating visually appealing images with properly positioned text."

I developed a solution that:

Analyzes image brightness for text placement
Adds semi-transparent overlay for readability
Positions text dynamically based on image dimensions

"Implementing an easy sharing system that works across different platforms was crucial."

I chose the Web Share API for its simplicity and wide platform support:

Javascript

const shareImage = async (imageUrl, quote) => {
  try {
    const finalImage = await embedTextInImage(imageUrl, quote);
    const file = new File(
      [await (await fetch(finalImage)).blob()],
      "morning.webp",
      { type: "image/jpeg" }
    );

    if (navigator.share) {
      await navigator.share({
        title: "Good Morning!",
        text: quote,
        files: [file],
      });
    } else {
      const link = document.createElement("a");
      link.download = "morning.webp";
      link.href = finalImage;
      link.click();
    }
  } catch {
    alert("Sharing failed. Try saving instead.");
  }
};

Outcome

The project successfully:

Makes it easy for elderly users to create beautiful morning messages
Provides a simple way to share greetings with family
Generates professional-looking images automatically
Demonstrates practical use of modern web APIs
Served as an effective CS50 final project

PhotoQuotes: Good Morning Message Generator