# Next.js Workshop Project

## Running it locally

- Download the latest version of [node.js](https://nodejs.org/en)
- Once node js is installed open the local folder that you have downloaded in terminal, this can be done by clicking right click on empty space in the folder and clicking on open in terminal, if you dont get that option and you are on windows 11 click on show more options and open in powershell.
- Open the nodeJS command prompt ( you can find this in the windows application search box when you search for it after installing nodeJS )
- navigate to your directory as to where you downloaded the .zip file for this project, extract the zip file and copy the path to the folder

##### If you had downloaded this folder to your downloads folder and extracted it there it should be 
``
cd C:\Users\ [Your windows user] \Downloads\peworkshop-master
``



- Run the development server:

```bash
npm i --legacy-peer-deps
npm run dev
```

- Delete the `.next` folder if you have one as there is an issue where it takes too long to build it that way.




Open [http://localhost:3000](http://localhost:3000) with your browser.

## Figma Design page:
[The figma design](https://www.figma.com/design/aD2uqt6nOnxRnH8LhOzztD/PE-Treasure-Hunt-Design?node-id=0-1&t=qVGjYO9k4xWNhjuw-1)

## Tasks that are done
- Record team names – Must have.
- Record names of team members – Could have.
- A start button to initiate the treasure hunt, which remains disabled until activated by an
  admin or a specific time – Could have.
- Disable all interactions after the allotted time expires – Could have.
- Store a minimum of 10 and a maximum of 20 clues centrally, to be displayed in the app –
  Could have.
- Display the number of clues completed, remaining clues, and time left throughout the hunt
  – Could have.
- Store the captured value with a timestamp – Could have.
- Show a summary of completed clues, QR codes, and total time taken at the end of the hunt
  – Could have.
- Display an alert and prompt users to return to the venue if time runs out – Should have.
- Enable the CSM induction team to monitor the progress of all teams centrally – Could have.


## Tasks that need to be done

- Display treasure hunt clues sequentially once started – Must have.
- For each clue, provide options to mark as "Found" (QR code located) or "Pass" (QR code not
  found) - Should have.
- Allow QR code scanning, retrieve and display the associated value – Must have.

# Expected features for the app.

- Record team names – Must have.
- Record names of team members – Could have.
- A start button to initiate the treasure hunt, which remains disabled until activated by an
  admin or a specific time – Could have.

- Display treasure hunt clues sequentially once started – Must have.
- Store a minimum of 10 and a maximum of 20 clues centrally, to be displayed in the app –
  Could have.

- For each clue, provide options to mark as "Found" (QR code located) or "Pass" (QR code not
  found) - Should have.
- Allow QR code scanning, retrieve and display the associated value – Must have.
- Store the captured value with a timestamp – Could have.
- Display the number of clues completed, remaining clues, and time left throughout the hunt
  – Could have.
- Show a summary of completed clues, QR codes, and total time taken at the end of the hunt
  – Could have.
- Display an alert and prompt users to return to the venue if time runs out – Should have.


- Disable all interactions after the allotted time expires – Could have.

- Enable the CSM induction team to monitor the progress of all teams centrally – Could have.


- Allow the CSM induction team to send messages to the winning teams, including rankings
  and congratulatory notes for the top three teams – Could have. -- thinking of not actually having it... way too much work.

- Allow the CSM induction team to configure the treasure hunt parameters centrally – Could
  have. -> no clue what this means???



# Admin Account
The admin login for this currently is:

username: `administrator`

password: `admin`


## To learn next.js

Next.js documentation:

- [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.