-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreact-project-faq.html
More file actions
889 lines (776 loc) · 38.3 KB
/
Copy pathreact-project-faq.html
File metadata and controls
889 lines (776 loc) · 38.3 KB
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Yapper Project FAQ</title>
<style>
:root {
--bg: #0f172a;
--panel: #111827;
--card: #ffffff;
--text: #111827;
--muted: #6b7280;
--accent: #2563eb;
--accent-soft: #dbeafe;
--border: #e5e7eb;
--green: #ecfdf5;
--yellow: #fffbeb;
--purple: #f5f3ff;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f8fafc;
color: var(--text);
line-height: 1.5;
}
.hero {
background:
radial-gradient(circle at top left, rgba(59, 130, 246, 0.32), transparent 35%),
linear-gradient(135deg, #0f172a, #111827);
color: white;
padding: 42px 18px;
}
.wrap {
width: min(1050px, 100%);
margin: 0 auto;
}
h1 {
margin: 0 0 10px;
font-size: clamp(2rem, 5vw, 3.2rem);
letter-spacing: -0.04em;
}
.subtitle {
max-width: 760px;
color: #cbd5e1;
font-size: 1.08rem;
margin: 0;
}
.toolbar {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
margin-top: 24px;
}
.hero-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
.proj-btn {
background: white;
color: #111827;
border-radius: 12px;
padding: 8px 12px;
font-weight: 700;
text-decoration: none;
border: 1px solid var(--border);
box-shadow: 0 6px 18px rgba(15,23,42,0.06);
display: inline-flex;
align-items: center;
}
.layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 22px;
align-items: start;
}
.sidebar {
position: sticky;
top: 18px;
align-self: start;
}
@media (max-width: 880px) {
.layout { grid-template-columns: 1fr; }
.sidebar { position: static; }
}
/* topbar for quick GitHub links */
.topbar {
background: linear-gradient(90deg,#0b1220,#0f172a);
color: white;
padding: 8px 0;
}
.topbar .wrap { display:flex; gap:12px; align-items:center; }
.topbar a { color: #e6eefc; text-decoration:none; padding:6px 10px; border-radius:8px; background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); font-weight:700 }
.topbar .topbar-label {
font-weight: 800;
color: #dbeafe;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.03);
padding: 6px 10px;
border-radius: 8px;
margin-right: 6px;
font-size: 0.96rem;
}
/* style the details/summary header to look like a section heading */
summary.section-title {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-radius: 12px;
background: #ffffff;
color: #0f172a;
border: 1px solid var(--border);
font-size: 1.25rem;
margin: 20px 0 12px;
}
.summary-title-text { font-weight:700; }
.summary-toggle {
background:#111827;
color:white;
border-radius:10px;
padding:6px 10px;
border:none;
cursor:pointer;
font-weight:700;
font-size:0.95rem;
}
summary.section-title::-webkit-details-marker { display: none; }
summary.section-title::marker { content: none; }
/* diagram modal */
.diagram-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:60; padding:20px; }
.diagram-modal .inner { background:white; border-radius:12px; padding:18px; max-width:1100px; width:100%; max-height:90vh; overflow:auto; }
.diagram-modal .close-btn { float:right; background:#111827; color:white; border-radius:8px; padding:6px 10px; border:none; cursor:pointer; font-weight:700 }
.diagram-preview { max-width:820px; }
.search {
width: 100%;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.1);
color: white;
border-radius: 16px;
padding: 14px 16px;
font-size: 1rem;
outline: none;
}
.search::placeholder { color: #cbd5e1; }
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
border: 1px solid rgba(255,255,255,0.22);
background: rgba(255,255,255,0.08);
color: white;
border-radius: 999px;
padding: 8px 12px;
cursor: pointer;
font-weight: 650;
}
.chip.active {
background: white;
color: #111827;
}
main {
padding: 26px 18px 40px;
}
.note {
background: var(--accent-soft);
border: 1px solid #bfdbfe;
border-left: 6px solid var(--accent);
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 22px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
gap: 14px;
align-items: start;
}
.faq {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.faq[hidden] { display: none; }
.tag {
display: inline-flex;
align-items: center;
width: fit-content;
border-radius: 999px;
padding: 4px 9px;
font-size: 0.78rem;
font-weight: 750;
background: #eef2ff;
color: #3730a3;
margin-bottom: 9px;
}
.faq h2 {
margin: 0 0 8px;
font-size: 1.08rem;
line-height: 1.25;
}
.faq p { margin: 0 0 10px; }
.faq p:last-child { margin-bottom: 0; }
code {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 1px 5px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.92em;
}
.quick {
margin: 26px 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
}
.mini {
background: white;
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px;
}
.mini:nth-child(1) { background: var(--green); }
.mini:nth-child(2) { background: var(--yellow); }
.mini:nth-child(3) { background: var(--purple); }
.mini h2 {
margin: 0 0 8px;
font-size: 1.1rem;
}
.section-title {
margin: 32px 0 12px;
font-size: 1.7rem;
letter-spacing: -0.025em;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
}
.art-card {
background: white;
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.art-frame {
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(168, 85, 247, 0.12)),
#f8fafc;
border-bottom: 1px solid var(--border);
color: #64748b;
text-align: center;
padding: 16px;
font-weight: 750;
}
.art-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
padding: 0;
}
.art-caption {
padding: 10px 12px;
font-size: 0.92rem;
color: #4b5563;
}
.empty {
display: none;
background: white;
border: 1px dashed #cbd5e1;
border-radius: 18px;
padding: 22px;
text-align: center;
color: #64748b;
margin-top: 14px;
}
footer {
color: #64748b;
padding: 20px 18px 36px;
text-align: center;
font-size: 0.92rem;
}
</style>
</head>
<body>
<div class="topbar">
<div class="wrap">
<span class="topbar-label">GitHub Links:</span>
<a href="https://github.com/ASCTE-CYBER/Vite-Projects/tree/main/Yapper_Team8" target="_blank" rel="noopener">Team 8 — Yapper</a>
<a href="https://github.com/ASCTE-CYBER/Vite-Projects/tree/main/Sneak-Peak_Team9" target="_blank" rel="noopener">Team 9 — Sneak‑Peak</a>
<a href="https://github.com/ASCTE-CYBER/Vite-Projects/tree/main/TheFlyTrap_Team10" target="_blank" rel="noopener">Team 10 — TheFlyTrap</a>
<a href="https://github.com/ASCTE-CYBER/Vite-Projects/tree/main/Yapper_Team11" target="_blank" rel="noopener">Team 11 — Yapper</a>
</div>
</div>
<header class="hero">
<div class="wrap">
<h1>Yapper Project FAQ</h1>
<p class="subtitle">Questions from our sticky-note check-in, cleaned up and answered in one place. Use the search bar to find topics like GitHub, TSX, Chakra UI, Vite, input, hosting, and security.</p>
<div class="toolbar">
<input id="search" class="search" type="search" placeholder="Search the FAQ..." aria-label="Search FAQ" />
<div class="chips" aria-label="Filter FAQ by category">
<button class="chip active" data-filter="all">All</button>
<button class="chip" data-filter="React">React / TSX</button>
<button class="chip" data-filter="Tools">Tools</button>
<button class="chip" data-filter="GitHub">GitHub</button>
<button class="chip" data-filter="Design">Design</button>
<button class="chip" data-filter="Security">Security</button>
<button class="chip" data-filter="Fun">Fun</button>
</div>
</div>
</div>
</header>
<main class="wrap">
<details id="topDetails">
<summary class="section-title"><span class="summary-title-text">Tech Stack & Key Tools</span><button id="toggleTopSection" class="summary-toggle" aria-expanded="false" type="button">Expand</button></summary>
<section class="quick" aria-label="Quick project summary">
<article class="mini">
<h2>Vite</h2>
<p>Vite gives us a fast React development environment. It starts the local website with <code>npm run dev</code> and updates the browser as we edit.</p>
</article>
<article class="mini">
<h2>React + TSX</h2>
<p>React lets us build pages out of components. A <code>.tsx</code> file lets us write TypeScript logic and JSX UI in the same component file.</p>
</article>
<article class="mini">
<h2>Chakra UI</h2>
<p>Chakra gives us ready-made components like <code>Box</code>, <code>Text</code>, <code>Button</code>, and <code>Input</code> so styling is easier.</p>
</article>
</section>
<article class="faq" aria-label="Tech stack diagram">
<span class="tag">Architecture</span>
<h2>How the project fits together</h2>
<p>Simple diagram showing where each part lives and how they connect.</p>
<div class="tech-diagram diagram-preview" style="margin-top:12px; max-width:820px;">
<svg width="100%" height="220" viewBox="0 0 820 220" preserveAspectRatio="xMidYMid meet" role="img" aria-labelledby="techDiagramTitle">
<title id="techDiagramTitle">Yapper tech stack diagram showing Browser, Vite, React, Chakra, GitHub, and Hosting</title>
<defs>
<marker id="arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
<path d="M0,0 L10,4 L0,8 z" fill="#111827" />
</marker>
</defs>
<g font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" fill="#0f172a">
<rect x="20" y="12" rx="10" ry="10" width="200" height="44" fill="#60a5fa" />
<text x="120" y="38" text-anchor="middle" fill="white" font-weight="700">Browser (User)</text>
<rect x="310" y="12" rx="10" ry="10" width="200" height="44" fill="#7c3aed" />
<text x="410" y="38" text-anchor="middle" fill="white" font-weight="700">Vite (Dev & Build)</text>
<rect x="20" y="82" rx="10" ry="10" width="200" height="44" fill="#10b981" />
<text x="120" y="108" text-anchor="middle" fill="white" font-weight="700">React (Components)</text>
<rect x="310" y="82" rx="10" ry="10" width="200" height="44" fill="#f97316" />
<text x="410" y="108" text-anchor="middle" fill="white" font-weight="700">Chakra UI (Design)</text>
<rect x="20" y="152" rx="10" ry="10" width="200" height="44" fill="#f43f5e" />
<text x="120" y="178" text-anchor="middle" fill="white" font-weight="700">GitHub (Source)</text>
<rect x="310" y="152" rx="10" ry="10" width="200" height="44" fill="#06b6d4" />
<text x="410" y="178" text-anchor="middle" fill="white" font-weight="700">Hosting / Backend</text>
</g>
<g stroke="#111827" stroke-width="2" fill="none" marker-end="url(#arrow)">
<path d="M220 34 L310 34" />
<path d="M410 56 L410 82" />
<path d="M220 96 L310 96" />
<path d="M220 166 L310 166" />
<path d="M410 126 L410 152" />
</g>
<g font-family="system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" fill="#374151">
<text x="540" y="32">Runs UI & handles events</text>
<text x="540" y="102">React builds the UI; Chakra supplies components</text>
<text x="540" y="172">GitHub stores code; Hosting publishes the site</text>
</g>
</svg>
</div>
</article>
</section>
</details>
<h2 class="section-title">Frequently Asked Questions</h2>
<div id="faqGrid" class="grid">
<article class="faq" data-category="React" data-keywords="components chef bacon blt analogy">
<span class="tag">React / TSX</span>
<h2>What are components?</h2>
<p>Think of a kitchen making a BLT: one chef does every step, cooks bacon, toasts bread, assembles the sandwich. If we split work into components, one chef specializes in bacon, another assembles the sandwich. When we add a new menu item (like a Cobb salad), the bacon chef can still supply bacon to the new chef without everyone needing to know how to make bacon. Components let us split responsibilities, reuse work, and keep complexity isolated.</p>
</article>
<article class="faq" data-category="Design" data-keywords="moderation twitter posts bad content">
<span class="tag">Design</span>
<h2>Will this have better moderation than Twitter?</h2>
<p>At first, probably not. Early versions of apps are usually simple and fragile.</p>
<p>That is why moderation is an important design problem. If users can post content, we eventually need rules, reporting, filtering, and consequences for misuse.</p>
</article>
<article class="faq" data-category="React" data-keywords="file types tsx css html javascript typescript">
<span class="tag">React / TSX</span>
<h2>How do different file types affect the code?</h2>
<p>Different file types tell the tools how to read the file. <code>.html</code> is page structure, <code>.css</code> is styling, <code>.js</code> is JavaScript, and <code>.ts</code> is TypeScript.</p>
<p>A <code>.tsx</code> file is special because it can contain TypeScript logic and JSX, which looks like HTML but is actually used by React to build the page.</p>
</article>
<article class="faq" data-category="GitHub" data-keywords="github repo repository commit push cloud save">
<span class="tag">GitHub</span>
<h2>How does GitHub actually work?</h2>
<p>Think of GitHub like cloud storage for code, but with a history of every important save point.</p>
<p>You save files on your computer first. Then you <strong>commit</strong> changes to create a checkpoint. After that, you <strong>push</strong> the checkpoint to GitHub so it is backed up online.</p>
</article>
<article class="faq" data-category="Design" data-keywords="twitter format background style">
<span class="tag">Design</span>
<h2>Is only the format going to look like Twitter, or the whole background?</h2>
<p>The first goal is the layout: a feed, posts, and repeated cards.</p>
<p>After the core functionality works, you can customize colors, backgrounds, spacing, and style. Make it yours!</p>
</article>
<article class="faq" data-category="Tools" data-keywords="overview system vite chakra json diagram">
<span class="tag">Tools</span>
<h2>What is the overview of the system?</h2>
<p>Right now, the browser loads a Vite React app. React renders components, Chakra UI helps style them, and our starter data may live in code or JSON files.</p>
<p>Later, the app can send and receive data from an API so posts are saved somewhere outside the browser.</p>
</article>
<article class="faq" data-category="Fun" data-keywords="tutoring help after school club">
<span class="tag">Class</span>
<h2>Can I have tutoring?</h2>
<p>Yes! After school or club time is usually the best time to get extra help, debug setup problems, or review React concepts!</p>
</article>
<article class="faq" data-category="Fun" data-keywords="dominic fike malcolm todd music">
<span class="tag">Fun</span>
<h2>Dominic Fike or Malcolm Todd?</h2>
<p>After a listening session, I am voting for Malcolm Todd. The jazz influence wins this round.</p>
</article>
<article class="faq" data-category="Fun" data-keywords="mr speak mr six russian">
<span class="tag">Fun</span>
<h2>Is Mr. Speak better than Mr. Six?</h2>
<p>Да ладно, Шестой — просто лучший!</p>
</article>
<article class="faq" data-category="React" data-keywords="map array loop render repeat tweets">
<span class="tag">React / TSX</span>
<h2>What is <code>.map()</code>?</h2>
<p><code>.map()</code> is a JavaScript array method that creates a new version of each item in a list.</p>
<p>In React, we use it to repeat UI. For example, if we have 5 posts in an array, <code>.map()</code> can create 5 post cards on the page.</p>
</article>
<article class="faq" data-category="React" data-keywords="user input base card format yap button json">
<span class="tag">React / TSX</span>
<h2>How are we going to accept user input into a base card format?</h2>
<p>We will use form tools like <code>Input</code> and <code>Button</code>. When the user types a post and clicks “Yap,” the app will collect that text.</p>
<p>Eventually, we need to save that post somewhere. A simple next step is JSON-style data. A more complete version would send the post to an API or database.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="chakra building app components ui">
<span class="tag">Tools</span>
<h2>How does Chakra help us build the app?</h2>
<p>Chakra UI gives us pre-built React components. Instead of writing every <code>div</code>, button, input, and style from scratch, we can use components like <code>Box</code>, <code>Button</code>, <code>Input</code>, and <code>VStack</code>.</p>
<p>It helps us build React interfaces faster.</p>
</article>
<article class="faq" data-category="React" data-keywords="simple way html css react">
<span class="tag">React / TSX</span>
<h2>Can I do this in a much simpler way?</h2>
<p>Yes, a basic HTML and CSS page can be simpler at first.</p>
<p>However, React helps when an app becomes interactive, has repeated UI, uses components, or changes data without rebuilding the whole page. Stick with the new tool long enough for the pattern to click.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="extra files explorer eslint config package vite">
<span class="tag">Tools</span>
<h2>What is all the extra code in the file explorer, like <code>eslint.config</code>?</h2>
<p>A Vite project includes setup files so the app can run, check code, manage packages, and build for the web.</p>
<p>You do not need to understand every file immediately. For now, focus on <code>src/main.tsx</code>, <code>src/App.tsx</code>, and <code>package.json</code>.</p>
</article>
<article class="faq" data-category="Fun" data-keywords="how are you summer">
<span class="tag">Fun</span>
<h2>How are you?</h2>
<p>I am doing good and very excited for summer. How are you?</p>
</article>
<article class="faq" data-category="GitHub" data-keywords="repo repository">
<span class="tag">GitHub</span>
<h2>What is a repo?</h2>
<p><strong>Repo</strong> is short for <strong>repository</strong>. It is the project folder Git tracks.</p>
<p>A repo usually contains your code, project files, commit history, and a connection to GitHub.</p>
</article>
<article class="faq" data-category="Design" data-keywords="ai websites learn code">
<span class="tag">Design</span>
<h2>Is there a benefit to learning web development when AI can make websites?</h2>
<p>Yes. AI is much more useful when you understand what it is creating.</p>
<p>If you know React, files, components, and errors, you can ask better questions, catch bad AI code, remove unnecessary code, and fix the app when something breaks.</p>
</article>
<article class="faq" data-category="React" data-keywords="functions different file component split">
<span class="tag">React / TSX</span>
<h2>Are we going to move functions into different files?</h2>
<p>Yes. That is one of the main reasons we use React.</p>
<p>Once the tweet card works, we can move it into its own component file. Smaller files are easier to read, test, reuse, and debug.</p>
</article>
<article class="faq" data-category="React" data-keywords="tsx interpret js html jsx">
<span class="tag">React / TSX</span>
<h2>How does TSX interpret JavaScript and HTML?</h2>
<p>TSX does not use real HTML inside the component. It uses <strong>JSX</strong>, which looks like HTML but gets turned into JavaScript that React understands.</p>
<p>Inside JSX, curly braces like <code>{tweet.name}</code> let us jump back into JavaScript and display values.</p>
</article>
<article class="faq" data-category="Security" data-keywords="malicious xss user input cyber">
<span class="tag">Security</span>
<h2>How could this code be used for malicious purposes?</h2>
<p>Any app that displays user input has security risks.</p>
<p>One example is cross-site scripting, or XSS. That happens when a user tries to submit code instead of normal text and the website accidentally runs it. We need to treat user input carefully and protect the app before it goes public.</p>
</article>
<article class="faq" data-category="Design" data-keywords="use app in class publish classmates">
<span class="tag">Design</span>
<h2>Will we use this app in class?</h2>
<p>Yes. The goal is for everyone to publish a working web app so classmates can visit it and see what you built.</p>
</article>
<article class="faq" data-category="Design" data-keywords="colorful chakra styling">
<span class="tag">Design</span>
<h2>How do I make it colorful?</h2>
<p>Use Chakra styling props such as <code>bg</code>, <code>color</code>, <code>borderColor</code>, <code>p</code>, <code>borderRadius</code>, and <code>boxShadow</code>.</p>
<p>Start small: change the page background, card background, text color, and button color.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="locally hosted network accessible cloud github pages hosting">
<span class="tag">Tools</span>
<h2>How will we get this website from local hosting to a network-accessible website?</h2>
<p>Right now, <code>npm run dev</code> runs the app on your computer for development.</p>
<p>To make it public, we need to deploy it to a hosting provider. GitHub Pages can host static sites, but if we want to save new posts, we will eventually need a backend or database service too.</p>
</article>
<article class="faq" data-category="GitHub" data-keywords="connect vs code github folder">
<span class="tag">GitHub</span>
<h2>How do I connect VS Code to GitHub?</h2>
<p>There may have been an issue when you first set it up. Please let me know and I am happy to help troubleshoot!</p>
</article>
<article class="faq" data-category="Tools" data-keywords="chakra vite give us">
<span class="tag">Tools</span>
<h2>What do Chakra and Vite actually give us?</h2>
<p><strong>Vite</strong> gives us the development server and build tools for a modern React project.</p>
<p><strong>Chakra UI</strong> gives us reusable visual components so we can style faster without writing every CSS rule manually.</p>
</article>
<article class="faq" data-category="React" data-keywords="website not break change code errors react">
<span class="tag">React / TSX</span>
<h2>Why does the website not instantly break if I change something?</h2>
<p>Some changes are harmless, and React can keep showing the last working version while tools report an error.</p>
<p>Other changes will break the app immediately. The browser console and terminal are your best places to look when something seems wrong.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="make yapper file classwork">
<span class="tag">Tools</span>
<h2>How do I make the Yapper file in the first place?</h2>
<p>Start from the setup assignment, classwork 8-1.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="codehs systems websites">
<span class="tag">Tools</span>
<h2>How does CodeHS use systems like this to make websites?</h2>
<p>Platforms like CodeHS often hide many setup details so students can focus on code.</p>
<p>With Vite and GitHub, we are seeing more of the real project structure professional developers use.</p>
</article>
<article class="faq" data-category="React" data-keywords="update without reloading state rerender">
<span class="tag">React / TSX</span>
<h2>Are we going to make the website update without reloading?</h2>
<p>Yes. React can update part of the page when data changes.</p>
<p>For example, when a user submits a new post, we can update the list of posts and React can re-render the feed without refreshing the whole browser page.</p>
</article>
<article class="faq" data-category="React" data-keywords="code run without refreshed virtual dom hmr">
<span class="tag">React / TSX</span>
<h2>How does the code run without having to refresh?</h2>
<p>During development, Vite watches your files. When you save, it sends updates to the browser.</p>
<p>React also uses a virtual representation of the page to figure out what needs to change instead of rebuilding everything from scratch.</p>
</article>
<article class="faq" data-category="React" data-keywords="tsx file">
<span class="tag">React / TSX</span>
<h2>What is a TSX file?</h2>
<p>A <code>.tsx</code> file is a TypeScript React file.</p>
<p>It lets us write component logic and HTML in the same place. The logic usually goes before <code>return</code>, and the UI usually goes inside <code>return</code>.</p>
</article>
<article class="faq" data-category="Fun" data-keywords="bread bowl soup sandwich">
<span class="tag">Fun</span>
<h2>Is bread bowl soup a sandwich?</h2>
<p>Yes. As a certified classroom sandwich expert, I will allow it.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="large amounts data server cloud solutions">
<span class="tag">Tools</span>
<h2>How do websites manage large amounts of data without their own server?</h2>
<p>Many websites use cloud services instead of owning physical servers.</p>
<p>Examples include hosted databases, serverless functions, authentication providers, and storage services. The main idea is that another company runs the infrastructure, and your app connects to it securely.</p>
</article>
<article class="faq" data-category="React" data-keywords="add new user input form state">
<span class="tag">React / TSX</span>
<h2>How do we add new user input?</h2>
<p>We will use form components, probably an <code>Input</code> or <code>Textarea</code>, and store what the user typed in React state.</p>
<p>Then the “Yap” button can add that new post to the list or send it to a backend later.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="badge avatar profile picture initials">
<span class="tag">Tools</span>
<h2>What does Badge do?</h2>
<p>A Chakra <code>Badge</code> is a small label, often used for categories, statuses, or tags.</p>
<p>Take a look at the documentation <a href="https://chakra-ui.com/docs/components/badge" target="_blank" rel="noopener">here</a>.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="chakra ui application react library npm">
<span class="tag">Tools</span>
<h2>Is Chakra UI an application from the React library?</h2>
<p>Chakra UI is not built into React. It is a separate package we install with npm.</p>
<p>React gives us the component system. Chakra gives us a library of styled components that work inside React.</p>
</article>
<article class="faq" data-category="React" data-keywords="multiple files one line big chunk organized reusable errors">
<span class="tag">React / TSX</span>
<h2>Why make multiple files instead of keeping one big file?</h2>
<p>One big file may feel easier at first, but it becomes hard to read and debug.</p>
<p>Smaller files let us separate responsibilities. A <code>TweetCard</code> file can focus only on showing one post, while <code>App.tsx</code> can focus on the whole page.</p>
</article>
<article class="faq" data-category="Design" data-keywords="long term project help">
<span class="tag">Design</span>
<h2>How will this help us long-term as we keep working on the project?</h2>
<p>You have already finished some of the hardest setup steps: creating the project, running it locally, editing TSX, and connecting to GitHub.</p>
<p>Those skills transfer to many modern web projects, not just this one.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="npm run dev what is it">
<span class="tag">Tools</span>
<h2>Why do we run <code>npm run dev</code>? What is it?</h2>
<p><code>npm run dev</code> starts the local development server.</p>
<p>It reads the project scripts in <code>package.json</code>, launches Vite, and gives you a local address where you can preview the app in the browser.</p>
</article>
<article class="faq" data-category="React" data-keywords="default keyword export functions">
<span class="tag">React / TSX</span>
<h2>What is the purpose of the <code>default</code> keyword when exporting functions?</h2>
<p><code>export default</code> marks one main thing that a file exports.</p>
<p>For example, <code>export default App</code> means another file can import the main App component without using curly braces.</p>
</article>
<article class="faq" data-category="Design" data-keywords="other people see my posts public cloud">
<span class="tag">Design</span>
<h2>Will other people be able to see my posts?</h2>
<p>Once the site is published online, other people can visit your website.</p>
<p>For classmates to see live posts that were added later, the app also needs a place to save and load those posts.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="endpoints api get posts new posts">
<span class="tag">Tools</span>
<h2>Are we going to build other endpoints?</h2>
<p>Eventually, yes. If we build a backend, we would likely need one endpoint to get posts and another endpoint to create new posts.</p>
<p>That is how the frontend and backend communicate.</p>
</article>
<article class="faq" data-category="Design" data-keywords="css chakra styling props">
<span class="tag">Design</span>
<h2>How does CSS work with Chakra?</h2>
<p>Chakra lets us write many styles as component props.</p>
<p>For example, <code><Box bg="gray.800" p={4} borderRadius="lg"></code> is styling the box without writing a separate CSS file.</p>
</article>
<article class="faq" data-category="Tools" data-keywords="run button disappearing vscode play button react python">
<span class="tag">Tools</span>
<h2>Why does my Run button keep disappearing?</h2>
<p>VS Code shows a Run button for some single files, like Python files.</p>
<p>A React app is a full project, not one file you run by itself. Use the terminal command <code>npm run dev</code> from the project folder instead.</p>
</article>
</div>
<div id="empty" class="empty">No matching questions yet. Try a different search term or category.</div>
<h2 class="section-title">Sticky Note Art Gallery</h2>
<section class="gallery" aria-label="Student art gallery">
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-1.jpg" alt="Student sticky note art 1">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-2.jpg" alt="Student sticky note art 2">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-3.jpg" alt="Student sticky note art 3">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-4.jpg" alt="Student sticky note art 4">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-5.jpg" alt="Student sticky note art 5">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-6.jpg" alt="Student sticky note art 6">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-7.jpg" alt="Student sticky note art 7">
</div>
</article>
<article class="art-card">
<div class="art-frame">
<img src="Images/postit-8.jpg" alt="Student sticky note art 8">
</div>
</article>
</section>
</div> <!-- end .content -->
</div> <!-- end .layout -->
</main>
<footer>
Built from class questions about the Yapper React project.
</footer>
<script>
const search = document.querySelector("#search");
const cards = Array.from(document.querySelectorAll(".faq"));
const chips = Array.from(document.querySelectorAll(".chip"));
const empty = document.querySelector("#empty");
let activeFilter = "all";
function normalize(value) {
return value.toLowerCase().trim();
}
function applyFilters() {
const query = normalize(search.value);
let visibleCount = 0;
cards.forEach(card => {
const category = card.dataset.category;
const text = normalize(card.innerText + " " + (card.dataset.keywords || ""));
const matchesCategory = activeFilter === "all" || category === activeFilter;
const matchesSearch = !query || text.includes(query);
const shouldShow = matchesCategory && matchesSearch;
card.hidden = !shouldShow;
if (shouldShow) visibleCount += 1;
});
empty.style.display = visibleCount === 0 ? "block" : "none";
}
search.addEventListener("input", applyFilters);
chips.forEach(chip => {
chip.addEventListener("click", () => {
chips.forEach(c => c.classList.remove("active"));
chip.classList.add("active");
activeFilter = chip.dataset.filter;
applyFilters();
});
});
// Diagram expand modal
const expandBtn = document.getElementById('expandDiagram');
if (expandBtn) {
const modal = document.createElement('div');
modal.id = 'diagramModal';
modal.className = 'diagram-modal';
modal.style.display = 'none';
modal.innerHTML = `
<div class="inner">
<button class="close-btn" id="closeDiagram">Close</button>
<!-- Large diagram copy -->
<div style="clear:both"></div>
<div style="margin-top:8px">
${document.querySelector('.tech-diagram').innerHTML}
</div>
</div>
`;
document.body.appendChild(modal);
const showModal = () => { modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; };
const hideModal = () => { modal.style.display = 'none'; document.body.style.overflow = ''; };
expandBtn.addEventListener('click', showModal);
modal.addEventListener('click', (e) => { if (e.target === modal) hideModal(); });
modal.querySelector('#closeDiagram').addEventListener('click', hideModal);
}
// Top details toggle button behaviour
const topDetails = document.getElementById('topDetails');
const topToggle = document.getElementById('toggleTopSection');
if (topDetails && topToggle) {
// initialize
topToggle.textContent = topDetails.open ? 'Collapse' : 'Expand';
topToggle.setAttribute('aria-expanded', topDetails.open);
topToggle.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
topDetails.open = !topDetails.open;
topToggle.textContent = topDetails.open ? 'Collapse' : 'Expand';
topToggle.setAttribute('aria-expanded', topDetails.open);
});
// keep button text in sync if user toggles summary directly
topDetails.addEventListener('toggle', () => {
const open = topDetails.open;
topToggle.textContent = open ? 'Collapse' : 'Expand';
topToggle.setAttribute('aria-expanded', open);
});
}
</script>
</body>
</html>