Integrated Studio Project: Interactive Web Application
In StudyPal, you embark on a virtual study adventure, logging study hours to accumulate coins and experience points (XP). Document your study sessions and engage in friendly competition to earn coins to enhance your virtual experience by acquiring rooms, cosmetics, and various assets that enable personalization of your avatar!
While researching on what website to create, I took into account our assignment's main requirements: 1. Gamification, 2. API Implementation. Therefore, I thought about the API implementation, and decided that I wanted to attempt to use RestDB to create a simple signin account system. I decided to research some gamified websites for my idea, and remembered three apps that exploded in popularity back when I was in secondary school: Yeolpumta, Forest, and Bondee
Yeolpumta, a highly popular app during my study days, thrived due to its competitive edge. With peers vying to outdo each other in study hours, its gamification concept effectively motivated studying. Its group, country, and global leaderboards fueled daily study habits and healthy competition, making it an ideal fit for our student and school app.
In researching the app Forest, we were drawn to its productivity feature, which incentivizes users to set goals and earn rewards based on their productivity time. We integrated a similar system into our game to encourage user engagement and collaboration in studying, allowing users to set goals and study together with their preferred level of commitment.
A popular app, Bondee, developed by a Singapore-based tech firm, is widely used by both youths and adults. It's a virtual social networking platform known for its customizability and interactive features, facilitating connections and personalization within the metaverse. Inspired by its success, we've decided to incorporate a similar customization feature into our game to encourage daily logins for studying with friends and family.
Not to mention, the 3D room feature provided by Bondee greatly aligns with what we wanted to design for our 3D section of the assignment!
- Account Login
- Account Signup
- 3D Room
- 3D Avatar
- Level
- Navigation Bar
- Avatar Customisation
- Avatar Preview
- Avatar Purchase
- Room Customisation
- Room Preview
- Room Purchase
- Leaderboard (Top 5 + User)
- Start Study Session
- Preview Rewards Earned
- Timer till session end
- Timer Media Controls (Stop, Pause, Continue)
- Anti Focus Detector
- Cognify Logo
- Cognify Team (Name, Linkedin, Artstation, Github, Role)
- Text input fields for name, email, message
- Form Submission
- Change User
- Change Email
- View Statistics
-
Hypertext Markup Language (HTML)
- This project uses HTML to design the layout and format of the website
-
Cascading Style Sheets (CSS)
- This project uses CSS to style the website/HTML elements
-
Javascript
- This project uses Javascript to create interactive elements for the website
-
tailwindcss
- This project uses tailwindcss to aid in styling the website/HTML elements
-
three.js
- This project uses three.js to import and render 3D assets into the website
-
Autodesk Maya/Blender
- This project uses Autodesk Maya/Blender to model the 3D assets for the website
-
Adobe Substance 3D Painter
- This project uses Adobe Substance 3D Painter to texture and paint the 3D assets modelled
-
Adobe Photoshop/Illustrator
- This project uses Adobe Photoshop/Illustrator to create digital assets(logo, marketing material...etc)
-
Visual Studio Code
- This project uses Visual Studio Code as the main integrated development environment (IDE)
-
Figma
- This project uses Figma to plan and design the wireframe for the website during the planning stage
-
Jira
- This project uses Jira to track and manage project progress and team.
Teenagers/Students
Record Study Hours, Customise Avatar and Room, Compete with Others
- Cute and Customisation Avatar and Rooms!
- Leaderboard to compete with others!
- Friend system and virtual study sessions!
- As a student, I want to track my study hours and stay focused
- As a student, I want to compete with friends and rise in the leaderboard
- As a student, I want to customise and make my avatar and room look good
- Navigation Bar:
- Ensure padding and margins of all navigation items and logo is vertically centered and appropriate amount of margin space is given
- Try to click all the navigation items to ensure that all links to other pages is working
- Try to shrink the width of the window down below 900px to verify that navigation items disappear and the hamburger menu appears
- Try to click the hamburger menu to check that navigation items reappear in a column below
- Hamburger Menu (<920px)
- Varying/Phone Sceen Sizes/Aspect Ratios:
- Different Browsers (Compatibility)
- Contact Form:
- Products List Gallery (Grid layout and hover)
- Animations and Transitions
- Featured Products Slideshow
- Scroll Bar
- Footer
- Github Repository
- Github Pages
- RestDB Database
- Media Queries
- Font: Concert One