Creating our own mini Twitter Clone part 1
[Please note this series was created when I was first learning JS so excuse any messy code :)]
Welcome back, over the last few blog entries we have discussed creating a status API, protecting the API then finally cleaning up the code. This “Project” was to get familiar with Express on node.js and to see just how easy it was to create an application very quickly. This week we are going to finally get started on creating our own mini twitter clone that I have been talking about so much. Following the last few tutorials will get you familiar with NodeJS to be able to follow this tutorial.
So what will our application to do:
– Sign up using passport.js
– Login using passport.js
– Profile page to view our information
– Ability to create new statuses/tweets
– Edit created statuses/tweets
– Delete created status/tweets
If we have the time or I don’t get too bored I would like to also implement some advanced features:
– Admin page to manage all users within our system
– View other users profiles and statuses
– Follow other users
– View personalized timeline
So lets get into it, this first tutorial will mostly focus on creating our boilerplate project. This boilerplate code is absolutely everywhere online and I really don’t care to repeat it. One of the best tutorials I have found can be found here. This tutorial runs you through from generating the project and all the files via express-generator all the way to setting up basic login and signup forms using passport.js. So Jason what the hell is this post about? if your just going to tell us a tutorial on another website…Well while following the tutorial I found some stuff confusing and I had some stupid questions so I taught it would be good to explain what I found out. Also I have customized it to use Jade as the template engine instead of ‘.ejs’ files as I really hate writing tags… and the tutorial isn’t a twitter clone so I have customized it for our use.
Questions and Answers on the tutorial I had:
- The tutorial uses .ejs templates how do i tell express to use something else or what is express generators default?
Answer. Express generators default seems to be Jade which is good for us but it has support for most template engines you just need to specific it during the project generating.
express --jade/pug express-authentication
- Running the express command just created a bunch of files what the hell are all these files??
Answer So most of these files are self explanatory for example routes are in the routes folder, views are in the views folder etc etc…app.js would be the equivalent to our server.js file from the last tutorials. Models folder will contain our database models i.e. user and status models we had in the last tutorials.
- What the hell is bin/www? and where is my port specified?
Answer So www is our actual server it already has all the boilerplate code to import everything for our application and get the server up and running also this is where your port is specified. My Recommendation is do not touch this file unless you know what your doing.
Differences: The tutorial I linked gets us up and running in terms of signing up and logging in but we need to make changes to it so it fits into the requirements for our little twitter clone.
Daniel user schema is very simple and works but I wanted to extend on it a bit more.
So as you can see my user model is quite different:
- I have extended the schema to have a name, admin, created_at and updated_at field to help us with our application in the future.
- Another thing you might ask is what is the “pre” function and what does it do. Well basically anytime we save to the User database (create user) this pre section runs first and populates the updated_at and created_at field then adds our user information into the row. Note: Since I already have “default: Date.now” in the schema populating them in pre is probably not needed but I wanted to show a good use of pre.
So Daniel is not creating a mini twitter clone so he doesn’t have this file so it will need to be added. Its pretty self explanatory if you read the above about the user.js file.
I just renamed the database to match the application we are creating.
I have some small changes in passport.js so it works with our schema. Again the code speaks for itself in terms of what it does. Some notes we are setting admin to false by default we might change this later so admin can create new admin accounts etc.
Since I am using Jade instead of ‘ejs’ for my template engine here is the GitHub link to the project you can see exactly what I did for the jade files. Note the files have code that we will use in the future so you can get a preview :). Once you have all the changes I have mentioned and you can signup and login to our application we are in a great position for the next tutorial, which will involve customizing our profile page to display our information correctly and displaying our statuses. So Join me next week for part 2!