UTDesign EPICS Next.js Template Project

This project is the template used for all EPICS CS projects. The core technologies used are:

• Next.js: A full stack web development framework
• Prisma: A database ORM used to connect Next.js to a database
• PostgreSQL: An open source SQL database

Table of Contents

• Getting Started
• Prerequisites
  • Installing Node
    • Node for Windows
    • Node for Mac/Linux
  • Installing Docker
  • Installing pnpm (recommended/optional)
• Running This Project
• Learn More
  • Learn HTML, CSS, JavaScript, and TypeScript
    • HTML
    • CSS
    • JavaScript
    • TypeScript
  • Learn Next.js
  • Learn Prisma
• Deploying This Project

Getting Started

1. The first thing to do is edit this file. The title and description of the project should reflect your project, the organization it is for, and the target functionality.
2. Setup your development environment to ensure you have everything installed to run the project (see the prerequisites section).
3. Run your project (see the [running the project section].(#running-your-project))
4. Start coding!

Prerequisites

In order to run this project, a few technologies are required:

• Node.js
• Docker

If you have these installed already, you can skip to running this project.

Node.js is what allows us to write all our applications in JavaScript. Usually, JavaScript is run only in a web browser. By building on top of Node.js, we can write code that is executed on the server, simpler to write, and/or more secure.

Docker is a container framework. Containers allow us to standardize the environment that software runs on. In the case of this project, we use Docker to run the PostgreSQL database. By running the database in a container, the database of every person on the team will be configured exactly the same way. Since databases are quite complex applications, this greatly reduces the likelihood of experiencing issues with the database.

Installing Node

Node for Windows

On windows, you can install node from the Node.js downloads page. Make sure you install the LTS (long-term support) version! Download and run the installer.

⚠️ If shown a check box to install "tools for native modules" make sure you check the box before clicking next ⚠️

Once the installation is finished (and you have restarted you computer if prompted), you can continue to installing Docker.

Node for Mac/Linux

It is recommended to use node version manager (nvm) to install and run node on Mac/Linux. You can install is by using the command found here in your terminal application. Alternatively, you can follow the installation instructions in the windows instructions.

Once you have installed node version manager installed, run the following commands in your terminal:

nvm install --lts # Install latest version of Node.js
nvm install-latest-npm # Update npm to latest version

These commands do the following:

1. Install the long-term support (LTS) version of Node. The LTS version is the version of Node that will receive security updates the longest.
2. Update the node package manager (npm) to the latest version.

This completes your installation of Node!

Installing Docker

Docker Desktop is the recommended way to install Docker. If you choose to install Docker another way, there is no guarantee that you will have everything installed correctly. To install docker desktop download and run the installer from Docker's Getting Started Page.

Installing pnpm (recommended/optional)

pnpm is an improved version of the Node Package Manager (npm). Though not required, it is highly recommended that you install it. You can install it using the following command in your terminal/powershell after node has been installed

npm install -g pnpm

If you choose to install pnpm, then you can substitute all usage of 'npm' with 'pnpm' and all usage of 'npx' with 'pnpx'. Additionally, you can create an alias in your .bashrc (Linux) or .zshrc (Mac) files. This will mean that when you type in npm or npx, pnpm and pnpx will be substituted. Use the following commands to add the aliases to the corresponding file:

# Linux
echo 'alias npm="pnpm"' >> .bashrc

# Mac
echo 'alias npm="pnpm"' >> .zshrc

Running This Project

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open 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 to automatically optimize and load Inter, a custom Google Font.

Learn More

Learn HTML, CSS, JavaScript, and TypeScript

HTML

Websites are built using HTML, CSS, and JavaScript. HTML, or Hypertext Markup Language, is a markup language for the web that defines the structure of web pages¹. Examples of these structures include paragraphs, headings, headers, footers, lists, navigation, and images. Each one of these components is defined in an HTML file for every website you visit.

CSS

JavaScript

TypeScript

Learn Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Official Next.js Examples
• Official Next.js with Prisma Example

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Learn Prisma

To learn more about Prisma, take a look at the following resources:

• Prisma Documentation
• Learn Prisma
• Official Prisma Examples

Deploying This Project

Footnotes

1. What is HTML - Definition and Meaning of Hypertext Markup Language by freeCodeCamp ↩