me

TDW 2026/27 – Class script P02

exercise
/ September 21st, 2026 • 4 mins read

1) Local environment setup

1.1) Installing an IDE

1.2) Install Git

git-scm.com, preferably v2.55.0 or newer.

1.3) Install Node & NPM

nodejs.org — install the current LTS, v24.21.0.

Once installed, check both are available:

node -v
npm -v

2) Create a repository on GitHub

  1. If you don't already have one, create a GitHub account.
  2. Create a repository in the organisation with a name for the TDW practical classes project.
  3. Create a folder on your computer where you keep your class projects.
  4. Clone the repository into that folder — the clone creates a subfolder named after the repository, so you don't need to create it yourself.

3) Initial project setup

Open a command line and navigate to the location where you created the folder for the class. To move around the file system in the terminal you can use:

  • pwd — show the path to the folder where you are
  • ls — list files and folders
  • cd abc — navigate to a folder called "abc"
  • cd .. — navigate out of a folder

Some useful links:

Create a new Next.js project with the following command (you may need to install the package):

npx create-next-app@latest

When asked for the project name, write tdw-your-name. For now let's keep it simple and answer No to any additional extensions (e.g. ESLint or Tailwind) — Part 6 starts from a project without a linter.

Navigate to the folder and check its contents:

ls -la

Then run:

npm run dev

In a browser, navigate to http://localhost:3000/. Congratulations, you have completed the initial setup! Open the project folder in your IDE and explore its contents.

4) Add the project to GitHub

First, check the version and status of git in your project:

git -v
git status
  1. Add a change to the project.
  2. Commit it.
  3. Push to the remote repository.

5) Create a new page

First, check if the local repository is up to date:

git pull

Create a local git feature branch to develop a new page for the application. You can check the existing branches with git branch — see the feature branch workflow.

  1. In the new branch, create a new page for your application and add some content to it. The content itself is not particularly important; it could be anything: a paragraph of text, an image, etc.
  2. Check for the existence of two branches.
  3. Switch to the selected branch.
  4. Create a commit on the same branch with your changes, including a message describing what you did.
  5. Push your branch to the remote repository — the new one will need to be created in the remote repository.
  6. From that branch, open a pull request with your changes — GitHub's name for what GitLab calls a merge request.
  7. Merge these changes.
  8. Delete the temporary branch, if it is a feature you will no longer be working on.

Some useful links:

6) Create a pipeline for merging

The project you created does not have a command that you can run to execute a linter — a way of analysing code to flag syntax errors and bugs.

Find out how to create a project with a linter, or how to add a linter to your project. After that, you will be able to run it with:

npm run lint

Investigate how to create a pipeline in GitHub so that this command is executed every time you make a change to part of the process.

Some useful links:

António Santos | David Oliveira

;