-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbookworm_resources.txt
210 lines (179 loc) · 12.9 KB
/
bookworm_resources.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
https://www.youtube.com/watch?v=bsZKDIaij-A (How to Program Web App Using Google Book API 1: HTML by root tech)
https://developers.google.com/books/docs/viewer/developers_guide
https://developers.google.com/books/docs/overview
https://developers.google.com/books/docs/v1/performance
Note: Google Books Embedded API works best in Google Chrome or Chromium browsers. There have been issues with it not displaying
all pages in books when being run on Firefox.
sources:
https://getbootstrap.com/docs/5.3/forms/overview/
background wallpaper: https://www.canva.com/templates/EAFm9cdFi94-bright-cartoon-green-and-brown-school-books-pattern-desktop-wallpaper/
button styling: https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/
colors: https://www.w3schools.com/cssref/css_colors.php
https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Make_box_transparent
https://www.w3schools.com/cssref/css3_pr_opacity.php
https://www.w3schools.com/html/html_formatting.asp
https://onlinepngtools.com/change-png-opacity
Some frontend ideas and implementations (navbar router,...) taken from:
https://github.com/kristijanH1998/dev-duckies-sm-proj-front.git
date picker (Bootstrap): https://stackoverflow.com/questions/68662850/datepicker-bootstrap-5
https://www.codeply.com/p/zU0EWDmIfn
Error: can't resolve 'react-router-dom': https://stackoverflow.com/questions/53914013/failed-to-compile-module-not-found-cant-resolve-react-router-dom
https://www.w3schools.com/html/html_form_input_types.asp
Backend endpoint and middleware logic referenced from: https://github.com/ConnorBstill/module-4-express-api.git
https://jwt.io/
https://stackoverflow.com/questions/33673946/error-duplicate-entry-for-key-email
https://dev.mysql.com/doc/refman/8.4/en/datetime.html
https://stackoverflow.com/questions/60561207/date-format-in-mysql-database-and-html-input-type-date-do-not-match-how-do-i
https://www.geeksforgeeks.org/mysql-date-data-type/
https://www.tiny.cloud/blog/javascript-localstorage/
https://dev.to/codeanddeploy/check-if-email-address-is-already-exists-in-the-database-4jf7
https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem
https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem
https://stackoverflow.com/questions/44617825/passing-headers-with-axios-post-request
Migrating from JS to TS:
https://dev.to/rashidshamloo/migrating-a-vite-react-app-from-javascript-to-typescript-5dmn
https://flaviocopes.com/fix-tsconfig-json-no-inputs-found/
https://stackoverflow.com/questions/41211566/tsconfig-json-buildno-inputs-were-found-in-config-file
https://github.com/ConnorBstill/cars-front-end
https://stackoverflow.com/questions/4810841/pretty-print-json-using-javascript
https://stackoverflow.com/questions/10514873/line-continuation-characters-in-javascript
https://stackoverflow.com/questions/1011317/replace-a-value-if-null-or-undefined-in-javascript
https://www.geeksforgeeks.org/how-to-add-bearer-token-authentication-in-postman/
https://learning.postman.com/docs/sending-requests/authorization/authorization-types/
https://stackoverflow.com/questions/24709944/sending-jwt-token-in-the-headers-with-postman
https://learning.postman.com/docs/sending-requests/variables/variables/
https://stackoverflow.com/questions/3794919/replace-all-spaces-in-a-string-with
https://getbootstrap.com/docs/5.3/utilities/sizing/
https://getbootstrap.com/docs/5.3/forms/input-group/
https://getbootstrap.com/docs/5.3/forms/checks-radios/
https://dev.to/collegewap/how-to-work-with-radio-buttons-in-react-3e0o
https://dev.to/dwjohnston/react-usestate-argument-of-type-string-is-not-assignable-to-parameter-of-type-setstateaction-undefined-27po
https://stackoverflow.com/questions/50819162/why-is-my-function-being-called-twice-in-react
https://stackoverflow.com/questions/63906002/update-a-state-variable-only-on-loading-the-page-for-the-first-time-in-react-js
https://apidog.com/blog/axios-get-with-body-and-header/
https://stackoverflow.com/questions/61551137/how-to-send-body-data-and-headers-with-axios-get-request
https://stackoverflow.com/questions/27530462/tag-error-react-jsx-style-tag-error-on-render
https://dev.to/collegewap/how-to-render-array-of-components-in-react-fma
https://react.dev/learn/rendering-lists
https://react.dev/learn/passing-props-to-a-component
https://getbootstrap.com/docs/5.3/components/card/
https://stackoverflow.com/questions/21868610/make-column-fixed-position-in-bootstrap
https://getbootstrap.com/docs/4.0/layout/grid/
https://icons.getbootstrap.com/icons/star/
Reference tutorials from Bay Valley Tech's Mod 4 sources:
https://youtu.be/YSsRH4ccqVI?si=8PNHXJ2gE5tctfo3
https://www.youtube.com/watch?v=ioIlptgGu08
https://www.youtube.com/watch?v=dc4TIHjLepY
https://www.youtube.com/watch?v=gs88z-QeKUQ
https://www.youtube.com/watch?v=tLnBQDqubTU
https://stackoverflow.com/questions/32232659/react-inline-conditionally-pass-prop-to-component
https://stackoverflow.com/questions/46855927/how-to-print-a-space-between-each-word-in-an-array
https://chsohn15.medium.com/integrating-google-books-embedded-viewer-api-into-a-react-app-a81fde35c14d
https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx
https://stackoverflow.com/questions/31173738/typescript-getting-error-ts2304-cannot-find-name-require
https://github.com/googleapis/google-api-nodejs-client?tab=readme-ov-file#installation
https://googleapis.dev/nodejs/googleapis/latest/books/index.html#typescript
https://www.npmjs.com/package/@googleapis/books/v/1.0.0
https://react-redux.js.org/api/hooks
https://www.w3schools.com/react/react_useref.asp
https://www.youtube.com/watch?v=F2kTdZXS9Cc
https://stackoverflow.com/questions/63604420/cannot-find-name-google-angular-8
https://stackoverflow.com/questions/2257993/how-to-display-all-methods-of-an-object
Obstacle 1: faced while including Google Books Embedded API viewer canvas on the Search Books page: TypeScript compiler initially
threw errors indicating it does not recognize 'google' in 'google.books.load();' with messages 'Cannot find name 'google'' and
'google.books.load is not a function', and 'google' object's associated functions and classes ('.books' class,'load()' method, etc.). This issue was mitigated by adding the following lines:
'<script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>' in index.html,
'declare var google: any;' in Home.tsx,
it is not enough to just write these lines of code in Home.tsx before calling 'google.books.load();':
'const script = document.createElement('script');
script.src = "https://www.google.com/books/jsapi.js";
script.type = "text/javascript"
document.body.appendChild(script);'
we also need to include the jsapi.js script in the script tag in index.html, and have 'declare var google: any;' in Home.tsx.
Obstacle 2: although initial Home page (Search page) load succeeded, restarting the compiler and reloading the Search page would
throw a 'google.books.load is not a function' error. This was fixed by...???
https://stackoverflow.com/questions/64022462/pass-multiple-onclick-handler-functions-to-child-component
https://paulund.co.uk/reactjs-onclick-child-components
https://legacy.reactjs.org/docs/faq-functions.html
https://stackoverflow.com/questions/48423061/radio-buttons-need-to-click-twice-to-reflect-change
https://rangen.medium.com/dynamically-load-google-scripts-with-react-and-the-useeffect-hook-3700b908e50f
https://getbootstrap.com/docs/5.3/components/modal/#via-javascript
https://stackoverflow.com/questions/33108188/can-i-have-bootstrap-columns-go-to-next-row-two-by-two-on-smaller-screens
https://stackoverflow.com/questions/43991224/react-show-these-div-if-true
https://getbootstrap.com/docs/5.3/utilities/flex/#justify-content
https://static.vecteezy.com/system/resources/previews/037/741/250/non_2x/floral-pattern-with-blue-flowers-daisy-on-a-dark-blue-backgrounds-for-textile-wallpaper-books-covers-digital-interfaces-prints-design-templates-material-cards-invitations-banners-posters-vector.jpg
https://stackoverflow.com/questions/12897742/how-do-you-specify-that-a-class-property-is-an-integer
https://stackoverflow.com/questions/48476625/having-trouble-with-jsonwebtoken-jsonwebtoken-error-jwt-must-be-provided
Obstacle 3: This segment of code:
"useEffect(() => {
if(page >= 0) {
acquireJwt();
// console.log(searchPhrase)
axios
.get("http://localhost:3000/search-books", {headers: {"authorization": "Bearer " + jwt}, params: {"search-terms": searchPhrase, criteria: searchPlaceholder, page: page * 10}})
.then((res) => {
if (res.data.success) {
// console.log(res.data.data.items)
// console.log(typeof res.data.data.items)
setBookList(res.data.data.items)
console.log(bookList)
}
})
.catch((error) => {
console.log(error.response.data.error)
});
}
console.log(page)
}, [page])"
threw an error from the backend complaining about jwt key not being provided. This made it impossible to send the /search-books
request above whenever the condition page>=0 was true; it was only functional when page>0 condition was required. This bug was
fixed by including 'jwt' as condition in the if statement (like this: "if(jwt && page >= 0)"), since jwt was now first checked
for value inside it and whether it was undefined before the /search-books endpoint request was sent.
Security safeguards:
1) SQL injection prevented by using named placeholders in POST and PUT queries (INSERT INTO user (user-name, password) VALUES (:username,:password)
The syntax: {username:req.body.username, password:hash}
2) Hashing passwords using 'bcrypt' library and salt value of 10
https://imperiumdynamics.com/blog/How-to-Write-a-Functional-Design-Document.html
https://balsamiq.com/learn/ui-control-guidelines/special-pickers/
https://balsamiq.com/learn/ui-control-guidelines/text-input/
https://balsamiq.com/learn/ui-control-guidelines/radio-buttons/
https://balsamiq.com/learn/ui-control-guidelines/menu-bars/
https://www.codecademy.com/resources/docs/uiux/wireframe-elements
https://uxplanet.org/date-picker-design-best-practices-41bd522f10a5
https://www.figma.com/community/plugin/1218870312659740254/target-flow
https://www.w3schools.com/sql/sql_foreignkey.asp
Obstacle in which GET HTTP request worked, but POST HTTP request would send authorization error saying the authorization header
content was undefined. Fixed by following rules for POST request type from this link (it is all about the order of parameters
sent with the request):
https://stackoverflow.com/questions/38274674/jwt-authentication-working-with-http-get-but-not-with-http-post
https://stackoverflow.com/questions/51415439/how-can-i-add-raw-data-body-to-an-axios-request
https://getbootstrap.com/docs/5.3/components/navbar/#how-it-works
https://stackoverflow.com/questions/8091053/delete-all-record-from-table-in-mysql
https://www.dbvis.com/thetable/postgres-on-delete-cascade-a-guide/
https://stackoverflow.com/questions/1481476/when-to-use-on-update-cascade
https://stackoverflow.com/questions/12763726/mysql-make-a-pair-of-values-unique
https://stackoverflow.com/questions/29168719/can-you-target-an-elements-parent-element-using-event-target
https://stackoverflow.com/questions/35948157/javascript-insert-string-into-another-url-string
https://www.w3schools.com/css/css_border_color.asp
https://www.w3schools.com/js/js_switch.asp
https://getbootstrap.com/docs/5.3/layout/gutters/
https://stackoverflow.com/questions/48619381/react-how-to-use-child-formitem-components-without-getting-warning-validatedom
https://fontawesome.com/v3/icon/trash
https://www.w3schools.com/sql/sql_delete.asp
https://stackoverflow.com/questions/47269189/css-class-for-pointer-cursor
https://stackoverflow.com/questions/35185974/font-awesome-icon-with-an-onclick-event-set
https://github.com/OpenAPITools/openapi-generator/issues/10864
https://stackoverflow.com/questions/927358/how-do-i-undo-the-most-recent-local-commits-in-git
https://getbootstrap.com/docs/5.3/forms/input-group/#basic-example
https://stackoverflow.com/questions/11929138/how-to-present-asterisk-when-entering-a-password-in-index-html
https://stackoverflow.com/questions/37609049/how-to-correctly-catch-change-focusout-event-on-text-input-in-react-js
https://www.geeksforgeeks.org/react-onfocus-event/
https://www.geeksforgeeks.org/how-to-set-placeholder-value-for-input-type-date-in-html-5/
https://www.w3schools.com/tags/att_input_placeholder.asp
https://stackoverflow.com/questions/18084595/how-to-decrypt-hash-stored-by-bcrypt
https://www.w3schools.com/sql/sql_top.asp
https://www.w3schools.com/jsref/jsref_substring.asp
https://www.w3schools.com/sql/sql_update.asp
https://stackoverflow.com/questions/47355150/how-do-i-format-timestamp-as-mm-dd-yyyy-in-postman
https://developer.mozilla.org/en-US/docs/Web/API/Element/previousElementSibling
https://stackoverflow.com/questions/2031085/how-can-i-check-if-string-contains-characters-whitespace-not-just-whitespace