Practice on: HTML, Bootstrap, MEAN stack, AWS, RESTful Design
This simple application was built for my final project in the CPSC 2261 class in Langara College. It was a group project, 3 of us were divided into front-end design, front-end functions and back-end interface. We came up with the RESTful api, mapped out all the end point we need, discussed how our website is going to layout. This page was not exactly how we planned it to be, but the basic functions are all there.
Due to the time constraint, I was involved in almost every aspect of this project. One of my peer drafted out the skeleton in HTML during our discussion, and then I started to decorate the web page using Bootstrap – formatting input field, adding navbar.. I had a lot of fun decorating it. The outlook is naive, but I am still proud of it because we started everything from scratch.
Back-end: I also hand coded on the back-end side application interface – app.js. I followed the protocol that we had agreed on, and practiced on NodeJS, MongoDB, used several npm package – express, body parser, mongojs to build up the application server. Although I have been always telling people that I have more interest on the front-end side, but every time I ran into the puzzle, I just feel like I have this eager and enthusiastic to solve it.
I remember there’s one issue really bombed me – CORS. It sounds a simple issue that I should have a lot of resources out there to help me solve it, all I need to do is “Google it”. But it took me long enough to figure out how to deal with it, and I think I got my answer from here – How to allow CORS in Express/Node.js?
The thing is, when it came to our midterm, I realized I am the very first one in my class knows how to solve this problem. 🙂
It is still vague to me to set up the environment. I mean I have the whole instruction from my teacher on which AMI to pick on EC2, how to install mongodb and npm package that we need, but npm package is still ambiguous. When I was reviewing and tackling this project, I stumbled on the feature of every npm package and its purpose.
I definitely have many thoughts about this application and really want to enhance it. On top of that, there are things I really want to get my hands on, I’ll drag some down here for my future boring me. 🙂
- To better layout my post page; to have the alert text when incorrect information is entered
- To be able to delete a post
- To apply OAuth
I will continue to work on Bootstrap and see what component can make this web application better quality of UX. User Experience is the field I really want to step in, although, so far I mostly code in back-end side language (mostly PHP), I still have big interest in the web site layout and UX.
Here’s some note from my teacher on how to set up the environment:
- For AMI, I use – Node.js powered by Bitnami
- To install mongodb, use command ‘sudo apt-get install mongodb”
- cd to the application folder, install the following npm modules:
- npm install body-parser
- npm install express
- npm install mongojs
- To access mongo sheel, just type “mongo”
Some useful link: