-
Notifications
You must be signed in to change notification settings - Fork 1
Application flow
The typical path a user follows through the app is the following:
- Homepage
- Story select
- Story (Room)
- Crafting tips
- Share
- Snipper detail
Homepage is where the application starts, it gives some basic information and has the entry point to the core feature, the story.
Story select is where the user is able to choose one of the given stories and experience it. This uses a fetch that gets all the stories and then just randomizes 3 out of it.
Once a story is chosen a room is created. Within this room the story can be experienced. The concept of rooms was added so that multiple users can collaborate on the same story. The story object is comprised of "modules" these are small blocks of content that may be interactive (QuizModule, ImageQuizModule, ...). They are available in src/components/modules.
Changes in the room are reflected to all users connected to that room by listening to a Firebase event. Every time a module is modified (i.e. a quiz is answered) this is updated to Firebase. This way users can work together and get visual feedback on who (from the users) answered a question.
Crafting tips is mainly a informative page, it just maps over craft suggestions and displays them in expandable cards.
Share is where the users can upload their own "snipper" (the term we use for a craft, upload, creation, ...). This page uses the UploadBox component. Inside this component all logic related to file uploads can be found (src/components/uploadbox). The UploadBox component has receives 2 functions as props: uploadFile and sendCreation. uploadFile uploads the given file and sendCreation adds the creation data to the database. The upload happens separately to get a preview on the Share page of what the upload looks like. This currently works for videos and images. Uploading other filetypes is not supported. After sending in their creation they get a button to go to the detail page of their snipper.
The snipper detail page is where a snipper has its own place. It gives some information about the snipper and gives some share options to the user. There is a button on this page takes the user to the story the snipper was made about.