Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template
Heroku Link: https://a3-stefano-jordhani.herokuapp.com/
The goal of this application was to extend the task from assignment 2 and rework our server so that it uses the express framework. Not only this but instead of storing data in the server's memory, this time we were required to store data inside MongoDB and have the server communicate with MongoDB to add, edit, and delete data as requested from the client. Most of my challenges came from deciding how to go about the user aspect of the application (which was another requirement for this application). I was not sure how to go about having users log in and have access to their own data but I eventually decided that I would store documents in my MongoDB collection in which each document contained the information for a hotel review (name, location, scores, etc...) in addition to a "creator" field which held the id of the user who created/"owns" that document. At first, I decided to implement my own "home-made" login system where the user could create an account by entering a username and password. The id of the document in which the user's information was stored, was passed back to the client and recognized as the "userid" which was sent with every request in order to tell the server that this data is associated with user xxx. Once completing that, I wanted to give myself a challenge and went for the github OAuth authentication strategy because it is something I believe will be beneficial to know for the future. As far as the framework, I decided to use bootstrap because I have heard really good things about it and thought that the framework fit well with the idea of a "playful" hotel review website while still giving the site a professional look. I made very small modifications to the framework which included: changing the background color, changing font size, and changing width of the table/header. The reason I need to change the width of the table/header was because I added a margin to all the elements so that I could follow the "Alignment" design principle and have the elements line up. When doing that, I realized that bootstrap automatically sets the width of those elements to 100% so what ended up happening was the width of the table and the margin exceeded the width of the page which I didn't like so I slightly tweaked the width of the table and it looked exactly how I wanted. As far as express middleware packages, I used these:
- Express.json(): This will parse requests sent to the server that included stringified JSON objects in the body. By using this middleware you will not have to manually parse requests.
- Express.static(): This middleware does as the name suggests, it will serve static files from the directory that is requested. If you have GET and POST request handlers above this, they will override the serving of the static files.
- Express.helmet(): This will allow your app to be more secure by setting HTTP headers that are returned by the application.
- Express.compression(): This will compress response bodies that pass by the middleware in an attempt to make your app faster and more efficient.
- Custom: I created two custom middlewares for my server. One middleware simply checked to see if the connection to MongoDB was active and if it was then it was allowed to proceed (by calling next()- this middleware was also in the starter code found in the class repository). Another custom middleware I wrote was to check to see if an user was authenticated through OAuth. The use case for this would be if a user tries to directly access '______.com/mainpage' without first logging in, in which they would be redirected to the login page if they weren't authenticated.
In addition to the middleware listed above, there was also a lot more middleware that I used in order to get OAuth working with the GitHub Strategy (passport). Some examples include passport.initialize() and passport.session().
- Tech Achievement 1: I used OAuth authentication via the GitHub strategy as described above. NOTE TO GRADER: There is a log out button when you get to the main page and it will bring you back to the login page, however, if you try logging out and then clicking log in from the login page again, it will not ask you to sign into your github again. The app seems to cache your github information and will not ask you to log in again. To get this behavior, I recommend opening the application in a incognito window, logging in, and when you are done, close the window, open another incognito window with the app and it will ask you to log in again. Additionally, if you are not comfortable logging in with your own github account, please let me know and I will give you the credentials for a test github account that I created.
- Tech Achievement 2: I hosted my application on Heroku. I really like the fact that Heroku allows for automatic deploys when changes are pushed to your github repository. This allows you to deploy your website even before it is finished and still in development phase. I also liked the fact that setting everything up was simple (except for a challenge that I came across where I needed to change the callback URL used for OAuth authentication which wasn't apparent at first). One thing that I don't really like is the fact that there isn't really a UI version where you are able to modify your code and even see the logs. I needed to see the logs for the deployment and I needed to do this through terminal which wasn't terrible but having it on the website would be great.
- Tech Achivement 3: One small custom achievement that I did was for the date-picker form input element. I was able to determine how to get todays date using Date() and then set that date to be the maximum date for the date-picker considering it would not make sense for a user to leave a hotel review for the future.