Next.js Workshop Project
Running it locally
-
Delete the
.nextfolder if you have one as there is an issue where it takes too long to build it that way. -
Download the latest version of node.js
-
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.
-
Run the development server:
npm i --legacy-peer-deps
npm run dev
Open http://localhost:3000 with your browser.
Figma Design page:
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.