- GitHub Repository - View this applications code
- Frontend - Interact with the Backend
- Backend - View raw JSON data.
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.
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.
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!
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.
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.
The set up was pretty simple. I navigated to my repostiory, enabled github pages, and the frontend was fully accessible via this link
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.