your glitch (or alternative server) link e.g. https://a3-vspatel927.herokuapp.com/
My project was a continuation of A2, where I had made a simple BMI calculator. My goal with A3 was to use Express to process user data in the back-end while saving individual user data in MongoDB and creating login for users so they can only manipulate their own data. Some challenges I faced when making the application included figuring out how to make the adding, deleting and especially editing user data for indivdual users so that the database would update too, and figuring out how to post a user's data from the database when they logged in. The authentication strategy I used was the one with cookies that the professor showed in class because it wasn't too complicated and it got the job done for me. I used Bootstrap for my CSS framework because I had previously tested a bit with Bootstrap, and as the most popular framework for CSS, I wanted to learn more about and actually use it properly for the first time. It was a bit difficult trying to convert my entire old CSS stylesheet to Bootstrap using the HTML tags, so I kept some of the old stylesheet code like background color(because I couldn't find how to change the background color using a custom color), font size and border. For the Express middlewares, the first I used was body-parser, which processes data from an incoming request. The second one I used was cookie-session, which helped me make my login page by setting the session to true if the username and password were right. The third was express-slash, which redirects a user to a page if they enter an extra slash or different link after the slash(ex. /login/ or /home ). The fourth is serve-favicon, which sets a logo in the tab bar which was a picture I picked off the internet. The fifth is morgan, which is a logger that logs requests and errors. (Hi Akim if you're grading this, thank you for all the help!). And note to grader, for the edit function if you want to edit, click edit on the row you want to edit, then enter the new information in the text boxes, then click edit again to save(couldn't figure out how to change button text)
-
Tech Achievement 1: I decided to host the website on Heroku. Compared to Glitch, it was nice having Heroku automatically build from Github and then allowing me to launch the app after I pushed a new change to Github. However, I had some errors initally when trying to deploy to Heroku, and the error logs were not very detailed, so I wasted some time trying to find out how to fix it when I figured out that I needed to put my packages in the dependencies instead of dev dependencies. With Glitch, I was instantly alerted to go to the error logs where it already told me that the express package and other packages could not be found, while in Heroku I had to find out to run bash and then npm start to tell me the error. It was also nice not having a VM power up like Glitch, so I could instantly launch my site.
-
Tech Achievement 2: I got 100% on all four lighthouse tests in both my login page and my main app.
- Design Achievement 1: