MySpace From Scratch — Part 1 (Node + Vue)

Maybe I’m old, maybe I’m nostalgic. But I woke up one day and had the thought, “I wonder how hard it would be to build myspace from scratch?” I’ve been a software developer for over 10 years now and built some fairly complex things. The more I thought about it, the more I realized, it wouldn’t be all that hard. And then I thought, why not share my journey in recreating myspace because I think it’s going to be entertaining for all of us. So here we are, over the next few weeks I’m going to post every step along the way as I build MySpace from scratch.

Remembering Myspace

I was shocked to realize that over the years I had forgotten what it was like to be on myspace. I started asking myself questions like, “Was there a timeline?” And how did you find your friends to begin with? I tried to find my profile but myspace is apparently still around and the profile’s of old are nowhere to be found. So googled “What myspace looked like in 2009?”, and this is what I found:

What I’m Going To Build

1. A login / registration page to log into your profile
2. Your myspace page, resembling that beautiful photo I posted above
3. The ability to upload photos and set your profile picture
4. The ability to upload an MP3 that automatically plays when you go to the page
5. The ability to add friends
6. The cruel and unusual Top 8 friends section
7. The ability to post on your wall (tbh I don’t remember if this is myspace or early facebook I’m thinking about, but it’s going to be just posts from newest to oldest)

I’m going to build this with a Node backend and probably a Vue front end, because I enjoy that workflow and they’re modern enough. I’m going to break down each “component” into manageable chunks, so let’s talk about that —

Breaking it down

The way I work is I break down large projects into small pieces. Here is what that looks like here:

There’s a User Schema, the user schema will hold the user’s name, email, a hashed password, an array of photos, an array of posts, and a song.

Friendships will be handled by a separate schema the will contain 2 users ids, one for each side of the friendship.

I think this is enough to get us most of the way there, and I’ll fill in the gaps as we go.

How I’m Building Each Component

We are lucky enough to live in a world where a lot of really cool things have been built and made open source for us to use. Here are the systems I’ll need and the libraries/tools I’m going to use to build each.

Backend Framework

express for the webserver, mongo/mongoose for the database, helmet for security, bcrypt for hashing passwords

For Storing Photos and Audio

Going to use AWS S3 for storage and connect using the Node SDK for AWS

And that’s all I can think of before I get started and get into the work.

More Parts Are Out!

Part 2 — Setting Up the Environment
Part 3 — Authentication
Part 4 — Photo Uploads

Thanks for following along, while you’re here consider following me on twitter!