Case Study

PhotoShare - Sprint Based Social Media Platform

PhotoShare is a team-built web app focused on helping everyday users share photos and comments with friends. My work centered on sprint delivery across API integration, MongoDB-backed data flow, and route-aware frontend behavior.

Role

Scrum Master + Full-Stack Contributor

Team

5 developers

Timeline

~1 month (10+ hours personal implementation)

Stack

React, MUI, Node, Express, MongoDB

Problem And Audience

The product solves a simple social problem, helping people share memories and reconnect through photo timelines. The audience is general users, not a niche professional segment.

Screenshots

User details, photo board, and comment thread views from the app.

Sprint Highlights

Sprints 1–2: Foundation

Implemented SPA routing shell with a master-detail layout for user list, detail view, and photo view.
Built route-aware top bar context text that updates to Details of or Photos of the active user.
Connected UserList, UserDetail, and UserPhotos views to backend APIs using axios.
Migrated backend routes to MongoDB/Mongoose and returned UI-friendly response payloads.
Populated comment user references, then reshaped nested objects for frontend compatibility.

Sprint 3: Sessions, Security, and Input

Implemented login/logout session flow and server-side session persistence and validation.
Built route protection and access control to redirect unauthenticated users and block protected endpoints.
Expanded login/register screen with password validation and new user registration support.
Added photo commenting with immediate UI refresh and photo uploading with multipart form handling.

Sprint 4: @Mentions in Comments

Extended MongoDB schema to store mention references within comments and validate mentions against existing users.
Exposed backend query endpoint for retrieving all photos that mention a specific user.
Built mention-aware comment entry UI with mention detection and validation.

My Responsibilities

Scrum Master for a five-person team across all four sprints.
Led MongoDB/Express API implementation and integration details.
Completed UserList and UserDetail frontend work in Sprints 1–2.
Implemented server-side login/logout session flow and session persistence in Sprint 3.
Designed and implemented backend mentions system for Sprint 4: schema design, validation logic, and query endpoints.
Primary documentation owner for sprint deliverables and team execution.

Implementation Highlights

SPA Routing Shell

<HashRouter>
  <Grid container spacing={8}>
    <Grid item sm={3}><UserList /></Grid>
    <Grid item sm={9}>
      <Switch>
        <Route path="/users/:userId" render={props => <UserDetail {...props} />} />
        <Route path="/photos/:userId" render={props => <UserPhotos {...props} />} />
      </Switch>
    </Grid>
  </Grid>
</HashRouter>

Route-Aware Top Bar Context

const path = this.props.location.pathname;
if (path.includes("/users/") || path.includes("/photos/")) {
  const userId = path.split("/").pop();
  axios.get("/user/" + userId).then((response) => {
    const prefix = path.includes("/photos/") ? "Photos of " : "Details of ";
    this.setState({ contextText: prefix + response.data.first_name + " " + response.data.last_name });
  });
}

Mongo Route Projection

app.get("/user/list", function (request, response) {
  User.find({}, "_id first_name last_name", function (err, users) {
    if (err) return response.status(500).send(JSON.stringify(err));
    response.status(200).send(users);
  });
});

Populate + Response Reshape

Photo.find({ user_id: id }, "_id file_name date_time user_id comments")
  .populate("comments.user_id", "_id first_name last_name")
  .exec(function (err, photos) {
    const plainPhotos = JSON.parse(JSON.stringify(photos));
    plainPhotos.forEach((photo) => {
      photo.comments.forEach((c) => {
        c.user = c.user_id;
        delete c.user_id;
      });
    });
    res.status(200).send(plainPhotos);
  });

Challenges And Solutions

Challenge: Mongoose model shape mismatched the frontend data contract.

Solution: Populated nested comment users and reshaped payload objects from user_id to user.

Challenge: Route context and selected user state drifted during navigation.

Solution: Synced state with route/hash updates and refreshed context text on route changes.

Challenge: Team consistency across sprint workflows.

Solution: Scrum-driven checkpoints and clear run/rebuild/lint documentation for shared execution.

Project Evolution

PhotoShare evolved from a prototype photo gallery into a fully featured social platform. Sprints 1–2 established the core SPA architecture and API layer. Sprint 3 added the authentication and real-world features sessions, registration, commenting, and file uploads that transformed it from an open demo into a secure, user-aware application. Sprint 4 extended the feature set with @mentions, allowing users to tag each other in comments and browse their mention gallery.

The project strengthened my understanding of full-stack architecture: how backend schema decisions shape frontend developer experience, how to balance feature scope with test/lint compliance, and how session and validation logic must work together to keep a platform secure and reliable.

View Sprint Highlights Contact Me