This will be a tutorial on building a basic social network app using react and node, or the MERN stack as I've heard it be called.

Part 1. Planning

First step is deciding what the scope of the project is, or the MVP. For this, I decided that, in order for the app to be usable, it needs some basic features such as:
  • Registration
  • Authentication
  • Profile page
  • News feed / status updates
  • Friendship (request, accept, remove)

This way, there would always be new content being created from friends, giving users some value and a reason to return. Then once this is created, a marketing campaign would be of value for getting users into the funnel and the site itself has enough of a reason for them to return, giving the opportunity for growth. Then it is ideal to come up with a basic api for the backend. It doesn't have to be perfect but just something to work with. For this, I came up with these endpoints and models that should be able to accomplish the MVP.

Endpoints

  • POST /register
  • POST /login
  • POST /logout
  • GET /me
  • POST /update-profile
  • POST/GET /status-updates
  • POST/GET /friend-requests
  • POST/GET friend-connection

Models

User: {
    name: String,
    email: String,
    password: String,
    profilePicture: String,
}
StatusUpdate: {
    user: {
        type: ObjectId,
        ref: User
    },
    text: String
}
FriendRequest: {
    from: {
        type: ObjectId,
        ref: User,
    },
    to: {
        type: ObjectId,
        ref: User
    },
    status: {
        enum: ["pending", "accepted", "rejected"]
    }
}
FriendConnection: {
    users: [{
        type: ObjectId,
        ref: User
    }],
    friendRequest: {
        type: ObjectId,
        ref: FriendRequest
    }

Then, it is a good idea to create mockups to understand the basic flow of the app and use some project management software to organize and prioritize things.

For the mockups I use Balsamiq, which has a free trial version, and for project management I use Trello

Here are a few mockups I created for this project:

Stay tuned: part 2 coming soon!