Week 1 of development
Even though we were advised to work on the three app screens one by one, that wasn’t working out for me and I wanted to work on each screen simultaneously. I wanted to work on the search and share screens initially, as they are at the heart of my webapp.
Front end — For the front-end, I used Bootstrap. My first task was to get the navbar right. Once I got it right, I put the navbar in a separate ejs file, so that it could be included, without having to write it separately for every screen.
I had quite some trouble getting my navbar to work. So for the sake of making it easier to other people looking for navbars, this one is what I used and should work.
My next task was to figure out which screen to build next. In terms of UI, the search screen was the easiest to start with. But it would get complex with all the features that I wanted to add. The share screen was the easiest in terms of the functionality, but the UI part of it required a lot of JQuery that I hadn’t quite gotten the hang of yet. My philosophy to approach this was simple. Do one thing at a time and keep it simple. I started work on the share screen.
Because my share screen no longer looks like this and because I failed to take a screenshot at that point, I am using a HTML renderer to simulate what my screen looked like at that point in time.
Through this screen I was able to capture the basic functionality of the share screen. But the real struggle was to figure out how to get the auth_token of the user. My initial technique was to put the auth_token and other required details in the page, but to hide them using the CSS display property. Not one of my best moments!
The search screen was next; the base UI for this screen is quite simple.
In addition, I also wanted to minimise the number of empty requests being sent, so I added a check using jquery. So, whenever a search bar is made with an empty search text, this would happen.
Back end — For the backend, I used Node.js in an Express framework. There isn’t much happening in the backend, just the routing. The Node.js serves files on the specific routes and posts requests using the Auth APIs for login and register. For the purpose of sharing a resource and searching a resource, I made AJAX calls. Most of the backend functions like executing queries, adding users, etc are taken care of by Hasura.
Here’s a video lecture/webinar on connecting to the backend.
JQuery can be pretty overwhelming for beginners. These references should help you along the way
