Welcome

This is the source code for the Penn Design Senior Seminar Show for the Class of 2024. It is a Next.js project. Below are instructions on how to get it up and running.

What is NextJS?

NextJS is a popular framework for building web applications using React, a JavaScript library for creating user interfaces. It provides a set of features and tools that simplify the development process and enhance the performance of your application.

Understanding the Basics

NextJS builds upon the following technologies:

• HTML: The standard markup language for creating web pages.
• CSS: A stylesheet language used for describing the presentation of a web page.
• JavaScript: A programming language that adds interactivity and dynamic behavior to web pages.
• React: A JavaScript library for building reusable user interface components.

Why Use NextJS?

• Mainly for simplified development. NextJS abstracts away many complexities like image optimization, creating different pages, and deployment, allowing us to focus on writing the website code.

If you're familiar with HTML, CSS, and JavaScript and want to build modern web applications with React, NextJS is a powerful framework to consider.

Prerequisites

Before you begin, ensure that you have the following:

• A computer with an internet connection
• A web browser (e.g., Google Chrome)

Step 1: Install Visual Studio Code

1. Visit the Visual Studio Code website.
2. Click on the "Download" button for your operating system (Windows, macOS, or Linux).
3. Once the download is complete, run the installer and follow the installation wizard's instructions.

Step 2: Install Node.js and npm

1. Go to the Node.js website.
2. Click on the "Download" button for the LTS (Long Term Support) version.
3. Run the downloaded installer and follow the installation wizard's instructions.
4. To verify the installation, open a terminal or command prompt and run the following commands one at a time:

node --version
npm --version

If the installation was successful, you should see the version numbers for Node.js and npm.

Step 3: Download the Project Code

1. Go to the project repository on GitHub.
2. Click on the "Code" button and select "Download ZIP".
3. Extract the downloaded ZIP file to a directory of your choice.

Step 4: Install Project Dependencies

1. Open Visual Studio Code.
2. Click on "File" in the top menu and select "Open Folder".
3. Navigate to the directory where you extracted the project code and click "Open".
4. Open the integrated terminal in Visual Studio Code by clicking on "Terminal" in the top menu and selecting "New Terminal".
5. In the terminal, run the following command to install the project dependencies:

npm install

Wait for the installation to complete. This may take a few minutes.

Step 5: Run the Development Server

1. In the Visual Studio Code terminal, run the following command to start the development server:

npm run dev

2. Once the server is running, you will see a message in the terminal indicating the local development URL (e.g., http://localhost:3000).
3. Open your web browser and visit the local development URL.
4. You should now see the website project running in the browser.

Step 6: Make Changes and See Live Updates

1. With the development server running, you can make changes to the project files in Visual Studio Code.
2. NextJS automatically detects the changes and recompiles the project.
3. Refresh your browser to see the updated changes.

Congratulations! You have successfully set up and run a NextJS project from scratch. You can now start building your application and exploring the features of the website.

If you encounter any issues or have further questions, please email or text me!