set up new trends site for fa24 (#355)

* set up

* prettier

* update links

* edit

versioned_docs/version-2024fa/introduction.md

@@ -0,0 +1,161 @@
+---
+id: introduction
+title: Syllabus
+---
+
+# INFO 1998: Trends in Modern Web Development
+
+### Fall 2024
+
+**Course Website**: [https://webdev.cornelldti.org/docs/introduction](https://webdev.cornelldti.org/docs/introduction)
+
+Learn to build and deploy scalable, modern full-stack web applications using best practices and the industry's most-used technologies. This is a student run course by [Cornell DTI](http://cornelldti.org/)
+
+**Faculty Advisor: Kyle Harms**
+
+Email: [kyle.harms@cornell.edu](mailto:kyle.harms@cornell.edu)
+
+## Instructors: TBD
+
+### Office Hours Schedule
+
+TBD
+
+## Credits and Credit Hour Options
+
+1.0-credits, S/U
+
+## Time and Location
+
+This course meets once a week for 9 weeks for a total of 9 lectures.
+
+We will meet weekly on Wednesdays, from **7:30pm to 8:45pm** in **Upson 216**. The start of the class will TENTATIVELY start on **Wednesday, September 25**.
+
+<!-- \*\*You can find our course calendar with lecture dates and times, TA office hours with locations, and assignment due dates at [this](https://calendar.google.com/calendar/u/1?cid=Y183OTJmZmZmM2E3OWNjYTI2M2UwNTE2OTNmZDQ0YjlmMDI1NGQ4Y2JjYjk5YzUwODcxMmJkYmNhNDQ4YjMyODdlQGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20) Google Calendar link. -->
+
+## Course Description
+
+This class will teach students about modern web development technologies,
+practices, and industry standards to better equip them for academic work,
+research, interviews, internships, and full-time employment. By the end of this
+course, you will gain key experience in designing systems on both the frontend
+and backend using today's popularly applied technologies, including TypeScript, React, Firebase, and more.
+
+## Pre/Co-requisites
+
+Formally, there are no pre-requisites for this course:
+
+**Pre/Corequisites: None.**
+
+However, we _highly_ recommend that you have taken CS 1110, or have equivalent programming experience.
+
+## Course Application
+
+Apply [here](https://forms.gle/kSq5Dcwt85VHx4eT6) by **September 23rd at Noon (12pm)**. It includes a general information questionnaire so we have the information necessary for enrollment, as well as a preassessment you must complete (see Pre-Course Assessment below).
+
+We will be distributing enrollment/permission pins soon after the application period closes.
+
+### Pre-Course Assessment
+
+Please complete the pre-assessment [here](https://webdev.cornelldti.org/assets/files/preassessment-b10fef745a7d911c1d56342a90e7076b.zip). It should take
+less than an hour! This is not meant as a test, but rather a way of ensuring
+that you are familiar with the foundational material in the course.
+
+Upload your submissions as a zip to your application [here](https://forms.gle/kSq5Dcwt85VHx4eT6).
+
+**This preassessment is mandatory; those who do not submit it will not be admitted in the course.**
+
+## Course Objectives
+
+By the end of the course, a student will be able to:
+
+1. Develop dynamic, interactive web applications using frontend frameworks and server side rendering
+2. Utilize standard API calls and traditional HTTP requests to transmit and retrieve data through the web
+3. Design and implement various data models and utilize data manipulation techniques to represent data in web applications
+4. Implement each aspect of a web application from frontend technologies to backend technologies and how to utilize middleware to communicate between the two
+5. Develop and implement proper authentication methods to encrypt user data
+
+## Course Materials
+
+We highly recommend that you have a computer capable of running a modern web browser and text editor, as well as access to a stable internet connection.
+
+## Assignments
+
+Assignments are released after each lecture! There are 5 assignments total, which includes a final project spanning the last few weeks of the class.
+
+You are allowed max 3 slip days (out of 6 total for all assignments and the final project) per an assignment.
+**Please note that you are NOT allowed to use slip days for the final submission of the final project.**
+
+The class is scheduled to finish well before finals week.
+
+| Assignment   | Topic                   | Due Date          |
+| ------------ | ----------------------- | ----------------- |
+| Assignment 1 | JavaScript Fundamentals | Oct 2 by 11:59pm  |
+| Assignment 2 | TypeScript Fundamentals | Oct 9 by 11:59pm  |
+| Assignment 3 | React Fundamentals      | Oct 23 by 11:59pm |
+| Assignment 4 | Frontend Capstone       | Oct 30 by 11:59pm |
+| Assignment 5 | Final Project           | Dec 3 by 11:59pm  |
+
+More details regarding the final project will be released upon starting the course.
+
+## Method of Assessing Student Achievement
+
+### Basis of Grade Determination
+
+First, we will determine your numerical grade. This will be done by the following:
+
+| Assignment           | Percentage of Grade                                                    |
+| -------------------- | ---------------------------------------------------------------------- |
+| Attendance           | 20% (based on weekly lecture quizzes, can miss 1 of 9 without penalty) |
+| Filling out Feedback | 10%                                                                    |
+| Final Project        | 30%                                                                    |
+| Assignments          | 40%                                                                    |
+|                      |
+
+Your final grade will be determined by your numerical grade calculated above:
+
+**Satisfactory (S)** - 70% or higher
+
+**Unsatisfactory (U)** - 69% or lower
+
+Keep in mind that the class is S/U, and that a numerical score of a C- (70%) or
+higher would allow you to pass with an S grade.
+
+### Grading Scale
+
+Web Development is a creative process, one that depends heavily on current technologies and how students decide to utilize them towards an end. Because of this, it is unnecessary to assign letter grades to students in this course. Rather, we will assign Satisfactory/Unsatisfactory grades. For a student to receive an Unsatisfactory grade, their numerical grade must be at or below 69% according to the numerical determination outlined above. Otherwise, they will receive a Satisfactory grade.
+
+## Course Management
+
+For the following sections, the word "us" refers to the course staff.
+
+When in contact with us, contact with either of the two primary instructors (Sarah Young and Sophia Pham) is sufficient to qualify as contact with us.
+
+The contact information can be found above in the "Instructors" section.
+
+### Academic Integrity
+
+**Each student in this course is expected to abide by the Cornell University Code of Academic Integrity:** [http://cuinfo.cornell.edu/aic.cfm](http://cuinfo.cornell.edu/aic.cfm)
+
+Under the provisions of the Code, anyone who gives or receives unauthorized assistance in the preparation of work at home or during tests in class will be subject to disciplinary action. A student's name on any piece of work is our assurance that they have neither given nor received any unauthorized help in its preparation. Students may assist each other on assignments by answering questions and explaining various concepts. However, one student should not allow another student to copy their work directly. All University policies with respect to cheating will be enforced. A student who is found to have cheated on an exam, or any other graded assignment, will receive a "U” in the course.
+
+### SDS Accommodations
+
+**Students with Disabilities:** Your access in this course is important to us! Please request your accommodation letter early in the semester, or as soon as you become registered with Student Disability Services (SDS), so that we have adequate time to arrange your approved academic accommodations.
+
+Once SDS approves your accommodation letter, it will be emailed to both you and us. Please follow up with us to discuss the necessary logistics of your accommodations using the contact information provided in this syllabus.
+If you are approved for exam accommodations, please consult with us at least two weeks before the scheduled exam date to confirm the testing arrangements.
+
+If you experience any access barriers in this course, such as with printed content, graphics, online materials, or any communication barriers, reach out to us or SDS right away.
+
+If you need immediate accommodation, please speak with us after class or send an email message to us and SDS at [sds_cu@cornell.edu](mailto:sds_cu@cornell.edu).
+
+If you have, or think you may have, a disability, please contact Student Disability Services for a confidential discussion: [sds_cu@cornell.edu](mailto:sds_cu@cornell.edu) or visit [sds.cornell.edu](http://sds.cornell.edu/) to learn more.
+
+### Mental Health and Well-being
+
+**Your health and wellbeing are important to us.**
+
+There are services and resources at Cornell designed specifically to bolster undergraduate, graduate, and professional student mental health and well-being. Remember, your mental health and emotional well-being are just as important as your physical health. If you or a friend are struggling emotionally or feeling stressed, fatigued, or burned out, there is a continuum of campus resources available to you: [https://mentalhealth.cornell.edu/get-support/support-students](https://mentalhealth.cornell.edu/get-support/support-students).
+
+Help is also available any time day or night through Cornell’s 24/7 phone consultation (607-255-5155). You can also reach out to me, your college student services office, your resident advisor, or Cornell Health for support.

versioned_docs/version-2024fa/setup-editor.md

@@ -0,0 +1,35 @@
+---
+id: setup-editor
+title: Setup your editor
+---
+
+# Install an Editor
+
+We recommend using [VSCode](https://code.visualstudio.com/), which is free for students. Install it from the website.
+
+Note: Course staff, instructors, and TAs will be using VSCode, so if you are using any other editors (such as [WebStorm](https://www.jetbrains.com/webstorm/)), you may need to do some extra work to get help from us.
+
+## Recommended VSCode Extensions
+
+To install extensions in VS Code, navigate to the left-hand sidebar, and click the building blocks icon near the bottom. This should take you to the Extensions marketplace.
+
+### ESLint
+
+Installing ESLint in VSCode will give you real-time linter feedback in any JavaScript code you write, allowing you to quickly pinpoint many problems and have readable, proper formatting.
+
+Once installed, add these lines to your VSCode Settings (refer to [this link](https://code.visualstudio.com/docs/getstarted/settings) if you need help getting there or alternatively open the command palette in VSCode with <kbd>CMD</kbd>/<kbd>CTRL</kbd> + <kbd>SHIFT</kbd> + <kbd>P</kbd> and search `settings.json`):
+
+```json
+  // Other settings ...
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.packageManager": "yarn"
+```
+
+### Prettier
+
+Prettier is a code formatter that will automatically format your code to be consistent with the rest of the class.
+
+Install it and it should automatically work!

versioned_docs/version-2024fa/setup-environment.md

@@ -0,0 +1,47 @@
+---
+id: setup-environment
+title: Setup your development environment
+---
+
+## Install Node.js
+
+Node is a JavaScript runtime that allows you to run JavaScript code outside of a browser! It powers all of web development today, and is critically necessary for this course.
+
+Go to [this website](https://nodejs.org/en/download/) and follow the instructions to install it on your workstation.
+
+For consistency, please use the latest Node LTS (currently, as of Fall 2023, this is Node 18).
+
+## Install Additional Packages
+
+We will be using a few additional packages to help us with development.
+
+#### Deno
+
+Deno is a drop-in replacement for Node that's faster, more secure, and critically -- supports TypeScript out of the box. We use it for its "REPL" (Read-Eval-Print-Loop) functionality, which allows us to run TypeScript code interactively during demos in class. Install it if you want to follow along with the demos.
+
+[Instructions](https://deno.land/manual@v1.36.1/getting_started/installation)
+
+#### Pnpm
+
+Pnpm is a package manager that is faster and more efficient than the default `npm` package manager.
+
+```bash
+npm install -g pnpm
+```
+
+## Making a React Project
+
+To make sure you've got everything set up correctly, `cd` into a directory of your choice and run:
+
+```bash
+pnpm dlx degit cornell-dti/trends-mono/frontend-starter your-project-name
+```
+
+This will create a new directory called `your-project-name` with a React project inside. `cd` into it and run `pnpm install` to install all the dependencies.
+
+Take a look around and edit the code if you'd like.
+
+When you're ready, run `pnpm dev` to start the development server. If everything works as it should, you should be able to navigate to `localhost:5173` and see a React app running!
+
+You can also use that command to create a new 'blank' React project at any time. Bookmark this page and come back to it!
+s

versioned_docs/version-2024sp/lecture7.md

@@ -256,21 +256,28 @@ This week's sample code starter can be found in the files under [this directory]
 ## Instruction to connect Firebase with demo code
 
 ### Create new Firebase webapp and database
+
 1. Login to [Firebase Console](https://console.firebase.google.com/u/2/) and _Add project_:
+
 - Add desired name for the project (ex: `trends-demo`)
 - Turn off Google Analytics for simplicity (can manually integrate later)
+
 2. Create new Webapp:
+
 - On landing page, click web icon (`</>`) OR click _Add app_ to create new webapp
 - Choose app nickname (ex: `lec7-demo`) then register
 - Use default choice in _Add Firebase SDK_ then continue to console
+
 3. Create new Database:
+
 - On left sidebar, under _Product categories_, expand _Build_, then choose _Firestore Database_
 - Click _Create database_, choose location in _United States_
 - Start in **test mode** (allow anyone to read and write, need to be changed when deployed)
 - Add some data to database for testing (collection -> document -> data fields)
 
 ### Connect your codebase to Firebase
-  This guideline specifically refers to this lecture's demo code
+
+This guideline specifically refers to this lecture's demo code
 
 1. On left sidebar, click Setting icon (next to _Project Overview_), then _Project settings_
 2. Choose _Service accounts_ tab, then _Generate new private key_ (do not expose this key on internet - ex: Git, each of the team members need to generate separate private key themselves)
@@ -279,9 +286,9 @@ This week's sample code starter can be found in the files under [this directory]
 5. Modify your `server/firebase.ts` to get database as bellow:
 
 ```typescript
-import { initializeApp, applicationDefault, cert } from "firebase-admin/app";
-import { getFirestore } from "firebase-admin/firestore";
-import serviceAccount from "./service_account.json";
+import { initializeApp, applicationDefault, cert } from 'firebase-admin/app';
+import { getFirestore } from 'firebase-admin/firestore';
+import serviceAccount from './service_account.json';
 
 const app = initializeApp({
   credential: cert(serviceAccount),
@@ -293,8 +300,6 @@ export { db };
 
 6. Import `db` wherever you need to interact with the database!
 
-``` typescript
-import { db } from "./firebase";
+```typescript
+import { db } from './firebase';
 ```
-
-

versioned_sidebars/version-2024fa-sidebars.json

@@ -0,0 +1,22 @@
+{
+  "docs": {
+    "Getting Started": [
+      {
+        "type": "doc",
+        "id": "version-2024fa/introduction"
+      },
+      {
+        "type": "doc",
+        "id": "version-2024fa/setup-editor"
+      },
+      {
+        "type": "doc",
+        "id": "version-2024fa/setup-environment"
+      }
+    ],
+    "Lectures": [
+    ],
+    "Assignments": [
+    ]
+  }
+}

versions.json

@@ -1,4 +1,5 @@
 [
+  "2024fa",
   "2024sp",
   "2023fa",
   "2023sp",