Next.js Workshop Project

running it locally

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

• run the development server:

npm i --legacy-peer-deps
npm init
npm run dev

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.