Skip to content

Frontend Repository for Futurepreneurs that hosted over 1800 participants

Notifications You must be signed in to change notification settings

kv8gh/FuturePreneurs-22

 
 

Repository files navigation

FuturePreneurs 8.0

Entrepreneurship Cell, VIT brings to you Futurepreneurs 8.0, its business simulation competition.

drawing

About

This front-end platform for FuturePreneurs 8.0, hosted over 1800 participants for a multitude of different adventures. For over a month in production, with more than 600 commits in toll, this virtual arena incorporates a legion of features including realtime drag and drop gameplay, and synchronous, all-inclusive team formation. From uniquely structured RPG game rounds to a melange of quiz-based bouts, it handled every activity in succession, for the journey of this event. Explore the whole project here!

Checkout the back-end for this application at --> https://github.com/ecellvit/FuturePreneurs-22-Backend

Tech Stack Used

NodeJS React Next JS Vercel CSS3 HTML Git GitHub

Team Creation and Joining Phase

Here the user can either choose to create a team as shown below: demo6

  • Once a team is created by the user,he/she has the full control of the team(accept/decline user join requests, remove existing members, delete the team, invite users by sending them invite link) demo8

  • Here the user is joining a team through an invite link shared by the leader of the team. demo9

OR


The user can join an existing team by sending a joining request to the respective team leader by searching the desired team.
  • On approval by the team leader,the user will automatically join the team.
  • The leader can also choose to decline the request.
  • Each user can send only 4 requests at a given time,
    • If they wish to send requests to more that 4 teams,they can easily delete their previously sent requests and then send in new requests.

demo7

Round 0

Round 0 Or Qualifying Round was a round to filter out top teams. It was a quiz based round where team leader could answer the questions based on his team's behalf. gif5

Quiz Round Features

  • Timer Enabled

  • Auto Submit

  • MultipleChoiceQuestions Enabled

  • SingleCorrectAnswer Enabled

  • MultipleCorrectAnswer Enabled

  • DescriptiveQuestions Enabled

  • QuestionsWithImages Enabled

  • CaseStudyQuestions Enabled

  • Questions were fetched and answers were stored in the backend successively

  • There was no free navigation in the quiz, once the user moves to the next question, they weren't allowed to move back.

  • If one wasn't to solve all the questions in the given time period, answered questions will be auto saved and submitted.

Workflow of the Quiz Portal 😊

image

When the quiz instructions page loads, a callback is triggered to check whether the user has logged in and whether is a team leader, if the above conditions are fullfilled...the user is allowed to attempt quiz give the user has not previously submitted the quiz.


gif1


Questions from backend consisted of multiple answer correct and single answer correct.Questions from backend may or may not contain Images. These type of Multiple choice questions are recieved from backend in response to a fetch call

  • Multiple Answer Correct Match the following

  • Single Answer Correct Match the following gif3

  • Single Answer Correct Case Study

  • Multiple Answer Correct Case study gif6

  • Descriptive Question Answers image




  • For descriptive type questions: One can type the answers. There is no word limit. -:last

  • For Match the following type questions:
    First select the question and then its corresponding answer. Both the entities will be highlighted with the same colour after this is done. Repeat the process for all the options in the question. If you want to deselect your choice in Match the following type, click on that particular question. image

  • To answer any question regarding a case study, read through the case study thoroughly. -:gif6

  • One can use the clear all button, to deselect all the options incase you face any ambiguity.

  • For moving to the Next Question ,one can click on Next Button to view next Question. Everytime user clicks on new button , answer of previous question from user will be send to backend and new question will appear on the user's Screen from backend.

  • Once all the questions are finished, then a finish button will appear and once submitted, user will be directed to Thank You Page. image

☑️ Marking scheme for multiple options correct from Backend :

image

  • If and only if all the correct options are selected, you'll be awarded 4 points.
  • If even one incorrect option is selected, the team will lose 1 point.
  • No points will be awarded if the question is left unanswered.

☑️ Marking scheme for Single options correct from Backend :

image

  • 4 points will be awarded if the correct option is selected.
  • Team will lose 1 point if any incorrect option is selected.
  • No points will be awarded if the question is left unanswered.

Round 1.1

Here the user had to choose between five locations to place the resort into.

round-one

Beach beach

Hospital hospital

Tech Park tech

Temple temple

School school

we display time on top time

These are the 5 locations:

Round 1.2

In this round we let the player choose where exactly do they want to place the resort. The green squares are the available places and the brown ones are the ones where your competetor has already placed one!

round

round

round

After every round we redirect to a dynamically rendered instructions page

Round 1.3 - Placing Amenities Using Drag And Drop

In This Round The User Has To Place 10 Amenities From A Given Set of 30 Amenities. Each Time A User Drags And Drops The Amenity A Request Is Made To The Backend. The Backend On Initial Start Request Sends Us-Initial Balance,30 Amenities. Each Amenities Price and isLeft Property is also recieved from the Backend.

Placing An Amenity

normaldrop

As we place an amenity directed in the gif above a request to the backend is made. In the backend the amenity is added to the user list and the updated balance is sent back.

dropbalanceexceed

In case of placing an amenity if the balance is not sufficient than an error popup will be showed.

Removing An Amenity

normalremove

As we remove an amenity directed in the gif above a request to the backend is made. In the backend the amenity is remove from the user list and the updated balance is sent back. lefttorightplace

If we remove the Amenity which was orignally at left side and place it at right side or vice versa than it will be automatically handled and placed to its orignal position. This is a frontend implementation and makes use of isLeft property sent from backend for each amenity in the beginning.

Swapping An Amenity

normalswap

If we swap an amenity with a new amenity ,two requests to the backend are made.One for removing the existing amenity and another for adding the new amenity.The balance is calculated respectively and sent back.

preexistingswap

If we swap two position of two pre-existing amenity than there positionis switched on the frontend.No call to the backend is made. balancecheckswap

If we swap an amenity with a new amenity. In this if the balance of the new amenity can be achieved after removing the old one than only it will be placed else an error popup will be showed.

About

Frontend Repository for Futurepreneurs that hosted over 1800 participants

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 67.6%
  • CSS 32.4%