JavaScript Project - Twitter Clone

Quick Links

• GitHub Repository - View this applications code
• Frontend - Interact with the Backend
• Backend - View raw JSON data.

What Was the Goal?

I wanted to create a very dumbed down version of twitter for this portfolio project to showcase my knowledge in building a backend Rails api and manipulating DOM elements via javascript (for the frontend).

For this we needed to be able to create new 'tweets' as a user, like certain tweets, as well as be able to leave comments on certain tweets.

What Was difficult?

Rendering changes to API data quickly without sacrificing performance was hard. This was most likely due to the way that I set up my frontend.

When you originally load the site, you get the most recent tweets from our api's root.

fetch(BACKEND_URL).then(resp => resp.json())
 // => [Post, Post, Post, ...]

Which then gets cached into a master list of all posts. When you send CRUD operations to the server, instead of re-loading and re-rendering all of the Posts from our api, we manipulate the cached objects.

This way we can manipulate the object for instantaneous changes on the frontend and not have to wait for responses from the server to view our changes.

Although we also will be able to reload our page completely and see all of our updated changes as well! This was slightly confusing at first but after getting it figured out saved my backend from getting unnecessary HTTP requests that would most likely affect server performance if this was interacted with on a larger scale.

What Did I Learn?

I learned so much through this project when it comes to manipulating DOM elements on a page and interacting with a backend API to send POST, PATCH, GET, etc. requests.

Also how learned how some systems like this really function when separating my concerns between a remote backend server (heroku) and the static (yet hosted remotely and dynamic) frontend.

This is a great way to showcase my work as it is completely free!

Backend Hosting Through Heroku

When creating my project I separated concerns out of my backend and frontend directories. To get my rails backend hosted via heroku, I had to install their NPM package and run the following:

# Login to heroku
$ heroku login

# Set our remote (found in your heroku app overview)
$ heroku git:remote -a ajrom-twitter-clone

# Push our (/backend) directory as to the master branch on heroku 
$ git subtree push --prefix backend heroku master

After getting everything setup I could seed my database by running:

$ heroku run rake db:migrate
$ heroku run rake db:seed

And as easy as that the backend API was up and running right here.

Frontend Hosting Through GitHub

Since I already had a heroku web server running for the backend and didn't want to create a new one soley for the front end I went with the GitHub Pages approach.

GitHub Pages allows us to create static web pages, although we can manipulate the DOM via javascript to make this function dynamically with a third party server.

The set up was pretty simple. I navigated to my repostiory, enabled github pages, and the frontend was fully accessible via this link

Conclusion

All in all I am pretty happy with the way this project turned out and learned so much in the process.

Some of the additional tools and frameworks I learned while creating this project that I found very useful were BootStrap and Form.io. Which helped create a responsive layout and quickly create amazing looking forms with validation via frontend declaration with Form.io.