initial conversion to nextjs

.dockerignore

@@ -0,0 +1,2 @@
+/node_modules
+/lib/wss/node_modules

.env

@@ -9,5 +9,7 @@ REACT_APP_BACKEND=nextjs
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
 DATABASE_URL="postgresql://admin:admin@localhost:5432/postgres?schema=public"
+POSTGRES_PRISMA_URL="postgresql://admin:admin@localhost:5432/postgres?schema=public"
 # For authentication when calling the data refresh endpoints
-ACCESS_KEY="secret"
+ACCESS_KEY="secret"
+WSSPORT=1738

.github/workflows/frontend.yaml

@@ -10,7 +10,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v1
         with:
@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v1
         with:
@@ -50,7 +50,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v1
         with:

.github/workflows/populate-courses.yaml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v2
         with:
@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v2
         with:

.github/workflows/populate-textbooks.yaml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v2
         with:
@@ -43,7 +43,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v2
         with:

.github/workflows/upsert-courses.yaml

@@ -10,7 +10,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v2
         with:
@@ -32,7 +32,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 18.19.0
       - name: Cache npm dependencies
         uses: actions/cache@v2
         with:
@@ -42,5 +42,10 @@ jobs:
             npm-
       - name: Install dependencies
         run: npm ci --ignore-scripts --no-audit --no-progress
+        # TODO: now its complaining about the prisma client, find a way to install all of these machine dependencies better
+      - name: Install ts-node globally
+        run: npm install -g ts-node@10.2.1
+      - name: Install prisma client globally
+        run: npm install -g @prisma/client@5.4.2
       - name: Execute Script
         run: ts-node ./scripts/upsert/courses.ts ${{ github.event.inputs.term }} ${{ github.event.inputs.registrationDate }} ${{ github.event.inputs.dropDate }}

.gitignore

@@ -1,8 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-.env
-
 # dependencies
+/lib/wss/node_modules
 /node_modules
 /.pnp
 .pnp.js

.nvmrc

@@ -1 +1 @@
-v14.18.2
+v18.19.0

README.md

@@ -47,10 +47,10 @@ You will require the following to run this application locally:
    npx prisma migrate deploy && npx prisma db seed
    ```
 
-   - This will run migrations to apply the latest schema changes to the database as well as seed the database with the latest course data.
+   - This will run migrations to apply the latest schema changes to the database as well as seed the database with the latest term
 
 6. Start the application using `npm run dev` (or `yarn dev`)
-   - This will start the Next.js server.
+   - This will start the Next.js server in development mode.
 
 You will now be able to develop the application. Any changes made to the code will hot-reload upon save.
 
@@ -98,6 +98,32 @@ The website uses the npm package [`uvic-course-scraper`](https://github.com/Vike
 
 The motivation of [`uvic-course-scraper`](https://github.com/VikeLabs/uvic-course-scraper) is to abstract away the parsing and scraping required to obtain data. It is not designed to do anything else.
 
+## Conversion to Next.js
+
+The original version of CourseUp is built using [CRA](https://create-react-app.dev/), with the backend being an Express server with a Firebase database. The plan is to convert the application to use Next.js with a PostgreSQL database.
+This will allow us to use [Prisma](https://www.prisma.io/) as an ORM, which will make it easier to interact with the database and make more complex queries.
+
+The branch `hello-nextjs` should be treated as the "main" branch, where all development for the migration is taking place. It is very much a work-in-progress right now, with a double stack (CRA + Next.js) setup.
+The `main` branch will be kept as-is for production release until the Next.js version is ready to be deployed.
+
+### CRA vs Next.js Folders
+
+Because of the double stack setup, there are a mix of folders:
+
+CRA + Firebase
+
+- `src` - CRA source code (React components, etc. - slowly being modified to work with Next.js)
+- `public` - CRA public folder (static assets, etc.)
+- `functions` - Firebase functions (backend)
+
+Next.js
+
+- `pages` - Next.js /pages router
+- `components` - Next.js components for new UI
+- `prisma` - Prisma schema, migrations, and seeders
+
+Other folders usually are shared between the two stacks, like `lib` and `public`
+
 ## VikeLabs
 
 This project was developed by students at the [University of Victoria](https://www.uvic.ca) as part of [VikeLabs](https://vikelabs.ca), which is a student-led software development club.

components/explore/ExplorePage.tsx

@@ -0,0 +1,45 @@
+import { Box, Flex, Heading } from '@chakra-ui/react';
+
+import { Term } from 'lib/fetchers';
+import { getReadableTerm } from 'lib/utils/terms';
+
+type Props = {
+  term: Term;
+  subjects: {
+    subject: string;
+    title: string;
+  }[];
+};
+
+export default function ExplorePage({ term, subjects }: Props) {
+  return (
+    <Flex wrap="wrap" gap={6}>
+      {subjects && subjects.length > 1 ? (
+        subjects.map((subject) => (
+          <Box
+            as="a"
+            href={`/explore/${term}/${subject.subject}`}
+            key={subject.subject}
+            minW={200}
+            w="20%"
+            minH={100}
+            flexGrow={1}
+            p={6}
+            borderRadius="lg"
+            shadow="md"
+            transition="0.5s"
+            _hover={{ shadow: 'xl' }}
+          >
+            <Heading size="md" color="black">
+              {subject.title}
+            </Heading>
+          </Box>
+        ))
+      ) : (
+        <Box minW={200} w="20%" minH={100} flexGrow={1} p={6} borderRadius="lg" transition="0.5s">
+          <Heading size="md">No subjects found for {getReadableTerm(term)}</Heading>
+        </Box>
+      )}
+    </Flex>
+  );
+}

courseup/.env.example

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="postgresql://admin:admin@localhost:5432/postgres?schema=public"

courseup/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

courseup/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

courseup/.nvmrc

@@ -0,0 +1 @@
+v18.19.0

courseup/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

courseup/docker-compose.yml

@@ -0,0 +1,31 @@
+version: '3'
+services:
+  # Container name "database"
+  postgresql:
+    # Official Postgres image from DockerHub (we use the last version)
+    container_name: postgresql
+    build:
+      context: .
+      dockerfile: postgres.Dockerfile
+    ports:
+      - 5432:5432
+    volumes:
+      - db-data:/var/lib/postgresql/data
+      # the default PostgreSQL data path.
+      # It means that every time the repository is modifying the data inside
+      # of `/var/lib/postgresql/data/`, automatically the change will appear in `db-data`.
+      # You don't need to create the `db-data` folder. Docker Compose will do it for you.
+      # - ./tmp/postgresql/:/var/lib/postgresql/data/
+  wss:
+    container_name: wss
+    depends_on:
+      - postgresql
+    ports:
+      - 1738:1738
+    env_file:
+      - ./.env
+    build:
+      context: .
+      dockerfile: wss.Dockerfile
+volumes:
+  db-data:

courseup/lib/banner/fetch.ts

@@ -0,0 +1,5 @@
+import makeFetchCookie from 'fetch-cookie';
+
+const _ = makeFetchCookie(fetch);
+
+export type Fetch = typeof _;