Next.js Workshop Project

Running it locally

Download the latest version of node.js
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 Another way to get the File Path is by opening the folder and using the URL in file explorer and copying that. then typing in cd then right clicking to paste the copied url to the folder.

Run the development server:

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 with your browser.

Figma Design page:

The figma design

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 - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

4.1 KiB Raw Blame History Unescape Escape