top of page

Building A Social Network in Wix | The Non-Coding Founder's Guide - Part 2

Building A Social Network in Wix | The Non-Coding Founder's Guide - Part 2

Hello, everyone. Welcome to part two of How To Build A Social Network in Wix, The Non-Coding Founder's Guide. We're at a little bit of a different style of video here because I really make sure to stress the importance of planning a website before you build it. I'm going to take you through the process of doing exactly what I would do when building a website. We're learning how to build a social network. In today's video, we're going to focus on the database side of things. What we're going to do is we're going to plan out our user group and the different databases we can think of right off the bat, right now, when we're starting this social network-type website.

Before we get into things, it's important for me to stress a couple of important points here. One, we are going to build a website similar in style and in functionality to Twitter. Now, we're not going to get as extreme, as crazy as Twitter has, but we're going to build the basic layout and the basic functionality of being able to create a profile, post statuses, like statuses, direct message, those types of things- same as Twitter. Now, the other important thing that I need to tell you is, some of you may be watching this video and saying, "Well, I'm not building a social network." If that's not you, what I need to stress is that this series has more than just building a social network.

We're learning valuable Wix Code lessons. This series was originally built to teach a bunch of Wix Code tutorials because I know how in high demand they are and how much you requested it. So, what I would say is, join along in this series and take the points from each part of this series that we go through that will apply to you in your website. I will tell you that we have a couple other series coming up, but they will follow this building a social network in Wix series. Let's hop right into it.

First, right off the bat, we're building a social network similar to Twitter. What are our user groups? Well, we have one main user group and that is users themselves. On social networks, we're going to have a couple different groups depending on the style of social network. You look at Facebook now and they've got so many different types of groups, so many different dynamics because they have business pages, groups, regular everyday users. But, you look at Twitter or something like Twitter. It's a little bit more simplified in the aspect of who's on the platform. It's users, it's strictly users.

We have to take into account what type of databases we're going to set up for our users. Let's draw this out a little bit. When we know our target market here is users, right? We've got our users right here. But then, what we need to do is identify, "Okay, what do these users need to be able to do on the website? What access are they going to have? What type of functionality will they be able to use?" When we're building this website, there's a couple different functionalities we need to think of; design and functionality. The first is, we want our users to create a profile page. We want them to be able to create a page, edit the profile information, edit their profile picture, and put information onto their page.

The first one is profile pages. Okay, so profile pages is step one. That's the very basic form. When you get onto a social network, 100 percent of the time what you do is you get a profile and you sign up. The other thing we need to look at is a social network is full of social activity. You're posting stuff to the network, it's social media. You're posting media to the website. The next aspect of this is statuses, posting statuses. We're going to go ahead and say statuses. When you get a social media account, you usually follow other people and what you do is you see that information in the feed. We have to have something to put into that feed and that's where the statuses come into play.

The next thing we have here, I do have a handy dandy little sheet over to my left, is something in addition to statuses is image upload. We want to post more than just text to our social network. We're going to post a couple different styles of things. In this case, we're going to have two different styles. We're going to have our regular text-type statuses where you write out text and post it or image uploads, so we're also going to have image uploads. We'll just put images for short. Now, after we have our profile pages, statuses, and we know we're going to have image uploads, we also need to have a system to be notified when something happens on a status that we post.

We often refer to these as notifications. We know we're going to need notifications on our social network. We'll go ahead and write notifications. Okay, so now we have a user that signs up, builds a profile page. When they build that profile page they can either stay there, stay stagnant and just follow people, and read other people's statuses, or they want the ability to post the ability to post a status of their own, post their own update, post their own status, post their own picture. Perfect. We got to that step. Following that step, we want those people to be notified when something happens on their status; if someone comments, if someone likes their status.

We want notifications built in as well. On Twitter, you often see this referred to as "liking" and "retweeting", also "quoting", so commenting is quoting on Twitter. We're going to, again, build a like version of Twitter here. We have these different statuses, we have our notifications, profile pages, and the next thing we need is also what I just said, a liking system. We need to build a liking system into this site. Okay, so we have our liking system. After our liking system, we need to build in a commenting system to also back up that whole liking and commenting, notification idea. We want a commenting system.

We have our liking system, commenting system, and those are technically part of notifications, but at the same time we can't necessarily classify that. It's classified under the entire scope of what we're trying to do. After our commenting system, we also need to build in a follow system, but that's a little bit more complex. We're going to really focus on the database side of things today. But, what I'm going to do is I'm going to write it in here and I'm going to go through and at least put the ones we know right off the bat. Follow system is next. You want to be able to follow someone and then get their statuses, their feed of information that they post

Anyone you follow, you get their statuses and their images that they upload, so we want a follow system. Then, the last thing we're going to write on the board in this video, as far as planning goes, is peer to peer messaging. Also known as PM or DM, direct messaging, private messaging. Either way, we want to have that on our list as well because this is going to be a separate database as well. We're going to have here, we'll just call it P2P messaging. Okay, so this is a basic outline of the different functionalities and pages we're going to need on our website. Most, if not all of these pages, will be something called dynamic pages.

Well, in order to display information and pull information onto a dynamic page, we need databases. What I really want to stress and show you in this video, is the set up of databases that we're going to need. We're going to start with everything we've mentioned here. We know off the bat that profile pages are going to need their own databases because profile pages are a separate entity of some of the other things we have here. Profile pages are where people are going to create their profile, upload their profile image, maybe a header image as well, their name, their email, their maybe at name or follow name, if we're going to do that I haven't decided quite yet, and then also their about information, and all that great information.

But, we also want them to be able to edit that information or delete that information at any time. We need a separate database to host all of the profile page information. We'll just call this Database One. After we've got Database One here that houses profile information, we need a separate database for our statuses because when someone posts a status, we need them to be able to post it and that information will be stored in a separate database because it will be stored on a separate dynamic page, known as our feed page. Our feed page here will house information from Database Two and Database Two will house all the status updates that anyone on our website comes in and posts.

Statuses and images will go together on Database Two since statuses may contain images that are going to coincide and go together. We're going to go in here and we'll connect them and we'll call this Database Two. Now, we've got Database One and Database Two for profile pictures, statuses, and images. Notifications. Notifications are going to be a little bit different. I'm going to have to show you guys as we go through the series how we're going to do something of these things. As I said, this is the non-coding founder's guide. However, there are going to be very minimal amounts of coding and a few little lines here and there. Notifications are going to be part of this.

Right now, in the planning phase, we're going to say, "Okay, we're not ready to move onto notifications," so we're going to say TBD next to it as far as databases go. To be determined because I will carry through notifications when we get to that point in the series. That will be a little farther down the road after we go through the series and build out profile pages, build out statuses, build out feed pages, build out image uploads. All of that fun stuff will be done before get into notifications. The liking system and commenting system are going to be similar. However, for the commenting system, we are likely going to need a separate database to house comments and we're going to use reference fields to reference them back to the original status post.

I know this is confusing, but we're not going to focus on that in this video. What I will tell you is we're going to call commenting system here Database Three. That kind of looks like a two. Database Three right there. For our liking system, we're also going to put TBD- to be determined, because again, we're going to use a little bit ... minimal amounts of code and use that to build our liking system. If we continue down our list here, we have our follow system. Once again, not going to focus an emphasis on this one. We're going to put TBD on the following system.

Finally, we have our peer to peer messaging. What I can tell you off the bat is this is going to be a complex part of this series. It's going to be cool because, really, there hasn't been many websites done in Wix where you can actually create a direct messaging system homemade, from scratch, custom built. But, I'm going to show you how to do it. The only this is we're going to have a high emphasis later on in the series. This will be one of the last things we do in this entire series. Again, there will be one video uploaded per week and this is going to be towards the tail end of things.

What I can tell you is we definitely will need a separate database to store private messaging. For right now, we're just going to put Database Four, but we may get into more complex databases and we may need a couple databases, but I'm not going to stress that too much yet. We're going to put Database Four here. Okay, so now we have all of our tools to properly say, "Okay, here's our users. Here's what our users need to be able to do on the platform. They need to create profile pages. They need to be able to post statuses. They need to receive notifications based off of whatever happens on their statuses from other people. We need a liking system so that way people can like certain statuses. We need a commenting system so people can comment on those statuses.

We need a follow system so people can follow other people and receive different status updates in their feed. Finally, we need a peer to peer, direct messaging, or private messaging feature that allows you to message someone else that you follow or don't follow, we'll have to set the parameters there, and send messages back and forth to each other." This is our basic layout of what our lite version of a simple Twitter is going to look like. This is the information we need to know. Now, what I'm going to do is I'm going to cut this video here and I'm going to head into Wix and who you guys the actual set up and database creation of Wix. What I'm going to do is I'm actually going to build this site from scratch with you in Wix.

I'm going to show you my step by step. What I'm not going to show is I might not show every single piece of design that I do. I'm going to show you all of the functionality, but when it comes to the overall scope and feel of the design, I may not show you every aspect of that, but I will show you have to connect the design that you create and that I create to all of the functionality that we're building here. Let's hop right into Wix and show you how to actually go about setting up these databases and setting the correct permissions right off that bat so that we know, "Okay, this user has access to do this, this, and this in this database with this information." Let's hop into Wix and go ahead and start that. Hope you guys are enjoying.

Welcome to part two of part two. I've just explained to you guys on the whiteboard our whole planning sequence and planning out the databases from the user groups. Obviously, we discussed profile pages, status updates, image uploads, liking system, commenting system, follow system, and a peer to peer messaging system. We discussed a lot of different things in our planning phase. Now, we're not going to go through all of those things in one video because, man, that would be one, long video. But, what I am going to do is I'm going to take you guys from the start of the process, which is picking our template, which right off the bat, guys, we're building from scratch on this one.

We're going to go with Wix's blank templates here and we're going to go start from scratch and press edit. Now that we've got our template up, here's what I'm going to do for the remainder of part two; I'm not going to go through and build out the fields in each database that we need because that would take, one, a large amount of time for the time we've already spent in this video. I'm going to save that for another reason because when we build out the fields, I really want to correlate that with our dynamic pages. We're going to save the building out the fields and dynamic pages for part three of our building a social network in Wix, the non-coding founder's guide series.

We're going to save that for part three. In this video, remember the remainder here of part two, I'm going to actually just go ahead and set up the databases we already know we need and set the permissions up on them with you. We can see here the Wix code developer tools were activated as soon as we came onto the website. If you are just getting on a website and you are ready to go design and you're not ready to add the tools and the functionality yet, to deactivate them come up here to code and if you hover over it, you can just turn off developer tools just like that. But, in this case, I'm going to turn them on.

Like I said in the previous whiteboard part of this video, the design portion of this entire process, of this entire series, I'm going to kind of do in the backend along as we go. You guys are going to see me incorporate some design into it. There is going to be design. It's going to be fully designed, fully functional, but I may not show every element of design that I do. What I really want to stress in this series is the importance of the functionality, the Wix code. That is the meat of this whole entire series. However, with that in mind, obviously to make elements work a certain way, you have to connect them with functionality.

You're going to see an incorporation between the two, but for instance, right now, I'm not going to show you myself designing the home page. I will save that for a next portion, maybe even a filler video somewhere in mid-week. I'll throw out, "Okay, here's the home page design," but I'm only going to show you setting up the databases right now. This leads me to my next point. To set up databases in Wix Code, we, one, have to activate the developer tools. Then, we have our properties panel over here. We're not going to worry about this guy right now. In fact, we're even going to X him out. Then, we have our pay ... excuse me, our page code or our code manager, coder handler down here at the bottom of the page.

I'm going to minimize that little guy. Over here to the left, we have our site structure. If you do want to minimize the site structure at any point, you just press this little arrow and it will minimize. To bring it back out, you press the arrow again. We see over here on the site structure, pages, public, backend, database. Public and backend, these are for two code ... two different types of code to call API, stuff like that. Oh, of course, we've got a little update coming in here. Nope, not today. That's for that. We're not going to focus on that aspect right now, but we are going to focus on is we're going to focus on this database section.

We identified in the previous video that we need a couple of databases. One, we need at least a database for profile pages to collect user information, store user information, and allow that information to be edited or deleted. We need one for profile pages. We need a second database for people to post statuses and images. Again, usually images with their status. That's going to have its own database. We're going to have a database for our commenting system. We may use some reference fields in this portion, but we are going to need a database for this. Then, we're also for sure going to need a database for the peer to peer messaging.

Now, the peer to peer messaging, I am not going to show you the set up of the database in this video because, like I told you in the previous portion, that is going to be a whole part of this series by itself. The peer to peer messaging is probably going to be in addition to the series. It's going to be the last thing we do tying everything back together. We're going to build everything out, again, it's like lite version of Twitter, and then that peer to peer messaging, direct messaging, will be the last portion we work on. In this video, what we're really going to set up is we're going to set up the database for profile pages and statuses because that will connect to what series we're doing next ... excuse me, what part of the series we're doing next, which is the dynamic pages along with database fields.

So, let's do that. Let's set up the database first for profile pages. This will be user information. To set up a database, we're going to go click "add a new collection". When we do that, we'll see this nice, little Introducing Database Collections, then we press Start Creating. This is where we name our database. I'm going to name them ... Here's a big portion of this, guys. When you're naming databases for whatever project you're working on because I understand some of you may not be building a social network, but you're building a similar type of concept, make sure you keep everything organized and clearly named and marked. It's going to help you in designing, especially for these more advanced, complex websites.

For these, I'm going to name it Profile ... I'm going to name it UserProfileData. User Profile Data. That's pretty self explanatory. I know that it's the user's data and it's going to be for their profile. Keep it clean. Keep it concise. What's the database collection for? I'm going to scroll down and we're going to use Custom Use. There's going to be pretty much all custom use databases in this tutorial in this whole series. Now, we're going to go to Setup Custom Permissions. What this means is we're going to set the permissions of this database. When we do that, we have a couple different options, Set Permission Roles.

The first one reads, Who can read the content from this collection? Well, remember, this is the user's profile page. When you're on a social network or social media, you're always able to click on someone's profile page and read it, right? That means anyone, the answer to this question is anyone. We want this to be anyone. Any site visitor could come on and read someone's profile. That's step one. Step two, Who can create content for this collection? Well, we only want the site member ... Well, in this case, the site member to create the content for their collection, for their page. We want that site member to be able to upload their own information for their profile page.

Which leads us down to our next two. Who can update content from this collection? Well, we see a new option here. We see site member author. This means, and this is who we're going to select, the registered user who can modify their own content. If the site member created and updated that information in their profile page, the site member author, that same person that added that information is the only one who can update it. We're going to select the same thing for the same person who can delete it. The site member author is the one who can delete that content from their collection. Once we do that, what we're going to do is simply press Set and Create Collection.

Just like that, our user profile data database is created. Once again, I'm not going to sure you the building out of the fields of this portion of the series. That is going to be in next week's portion, which is going to be database fields and dynamic pages. We've got the user profile data database complete somewhat. We've got it started, I should say. Now, we want to create a database for statuses. This is the database that's going to hold all the information of where people post statuses. We're going to go back to database and now we can click this little plus button over to the right to add a new one, a new collection.

We have to name this one. For this one, I'm going to name this User Statuses. Pretty simple. We know that this database is user statuses. The user is going to post their status updates, their posts. They're going to post to this database. This is where the information's going to be stored, this is where it's going to be held. We're going to also choose Custom Use on this, and then we're going to go back to set up custom permissions yet again. Who can read content from this collection? Well, once again, if we're on a website, a social media website, it's not just the site member that can read their author ... can read their content or other people's content. It's anyone.

We're going to select anyone on here. Who can create content for this collection? Well, once again, the site member because the person has to be registered in order to create content. The person has to have an account with our website in order to post statuses, in order to build their profile page. Just like the profile pages, we want the site member author to be the one that's able to edit or change the information in their status post. The next is, Who can delete it? Once again, we want the site member author to be the one to be able to delete their post if they so choose.

Then, we're simply going to click Set and Create Collection. Just like that, we now have our user profile data and our user status data. Like I said, the other for sure databases that we know are the commenting system and the peer to peer messaging system. I'm not going to show you the commenting system database setup in this either because what we're going to do is we're going to get to the commenting system in part four of this series, which will follow the next series, which is dynamic pages and database field creation. Part four will contain commenting and liking, and that's when we'll get into those databases and that code. That way, we can arrange that properly.

I'm trying to take you through a very strict and polished sequence in this series because it's going to help you stay on top of creating this type of website. Guys, that is it for part two of Building A Social Network in Wix, The Non-Coding Founder's or Co-Founder's Guide. If this video helped you out and you enjoyed it, drop a like down below. Comment if you've got any questions or if you're enjoying the series. Guys, I really want to hear your feedback for this. It's very important to me because I'm trying to continue on this very good series that I feel is going to be very helpful for you.

Also, it's going to give me a good read on if I should create a series like this again for a different style website; how to build an online market place, how to build a real estate style website, an AirBnB type website, those type of things. I really need to get your feedback. Don't forget to subscribe here on [inaudible 00:28:05]. The final thing I'm going to ask you to do is head over, I just rebranded everything for this entire new fresh start, I guess you can call it to Guys, this is the previous and it is now a online training resource.

I have lots of blog content, podcasts, getting started. I've got a ... If we come here to Getting Started here, I've got a Facebook group, a free Facebook group that you guys can join. I will throw the link in the description. A free Wix website roadmap. It's a 12 step roadmap to get your started in building your website. I've got my podcast. Most importantly, the final aspect of this that I launched, this is a personal passion project that I've been working on is the academy, guys. This is really exciting. In this academy, it's called The Wix Training Academy, if we scroll down here I'll show you what you get access to.

You get an extensive training library full of courses, workshops, webinars. You've got a result-drive community of other like-minded entrepreneurs, business owners, CEO's in there, at the academy at the moment. We've got checklists, apps, reviews, member-only discounts. Plus, we've got a monthly mastermind/Q&A call with me every single month to answer any questions you may have. This Wix Training Academy is the real deal. If you're looking to exponentially grow your knowledge on Wix and upscale your stuff on Wix, come check this out. Guys, I really appreciate all of your support and this is amazing.

I'm so excited to be putting on this series. It's been a process, for sure. It's been in the works for a while, but I finally got to the point where Wix is ready for everything that I'm teaching right now and I've got this Academy built out so the timing couldn't be better. Thank you guys, again, for watching and I will catch you on part three next week.

931 views1 comment

1 Comment

Feb 11, 2019

Terminé de ver el 4to tutorial y al mismo tiempo lo apliqué a la pagina que estamos diseñando junto al tutorial. Sin embargo tengo un problema en la parte final.

Cuando hago click en publicar aparece la pagina. Seguidamente hago click en REGISTER y aparece la ventana de REGISTER, lleno los campos y le doy enviar, y nada; no aparece la pagina inicial, se queda en la ventana de registro . Al lado derecho superior aparece una gran (X) , cuando hago click en (X), recién aparece la pagina de inicio.

Pueden ayudarme porqué pasa esto.


bottom of page