With the goal of launching my first web application, my objective for the day is to make it such that users' upload can be saved in MongoDB. After researching how this can be accomplished, I've concluded that there are 4 main implementations.
Set up the frontend interface(this was already done, on Vue)
- Set up a backend server (I've chosen Express for this)
- Set up a database (MongoDB)
- Set up API between frontend and backend (Axios)
After overcoming the problems I've encountered, I end today having implemented the communication between frontend and backend.
After reviewing my code, I've come up with a list to serve as a guide for future implementation. Also to remind me of the various errors I've encountered and the respective solutions.
- make use of 'cors' npm package
- I've got stuck for a while with a CORS error on the localhost, using 'cors' npm package seems to be the easiest solution that I've found
- create HTTP request
- and DOUBLECHECK the endpoints, I ended up missing a '/' in my POST request and I was wondering why the POST request doesn't work
- use Postman to test if your HTTP requests are working as intended
v-on:clickdirective to call specific methods which handles respective HTTP request
- make use of Axios to easily handle HTTP request
- most importantly, create a separate component for each HTTP request
- I've started by lumping them all in a single component only to have the file get so messy that I've started making mistakes.
Less readable code leads to more confusion
More confusion leads to more mistakes
More mistakes leads to more frustration
More frustration leads to less effective debugging
Less effective debugging leads to time wastage
Moral of Story: write clean and simple code!
In short, the above implementation allows for frontend to sent HTTP requests that will be handled by the backend. At this point, all the data are tests and hence hardcoded.
With that in mind, my main objective for tomorrow would be to implement it such that each HTTP request would interact with MongoDB, with a properly defined data structure that takes dynamic user input.