Skip to content

alfrdkang/StudyPal

Repository files navigation

StudyPal

Github Repository

Introduction

Integrated Studio Project: Interactive Web Application

Overview

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!

Research

Gamified Websites

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

Inspiration

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!

Features

Existing Features

Login Signup Pages

  • Account Login
  • Account Signup

Home/Main Page

  • 3D Room
  • 3D Avatar
  • Level
  • Navigation Bar

Avatar Customisation Page

  • Avatar Customisation
  • Avatar Preview
  • Avatar Purchase

Room Customisation Page

  • Room Customisation
  • Room Preview
  • Room Purchase

Leaderboard Page

  • Leaderboard (Top 5 + User)

Studying Page

  • Start Study Session
  • Preview Rewards Earned
  • Timer till session end
  • Timer Media Controls (Stop, Pause, Continue)
  • Anti Focus Detector

Contact Page

  • Cognify Logo
  • Cognify Team (Name, Linkedin, Artstation, Github, Role)
  • Text input fields for name, email, message
  • Form Submission

Dashboard Page

  • Change User
  • Change Email
  • View Statistics

Features Left to Implement

Friends/Social Page

Study Together Page

Design Process

Technologies

  • 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.

Design

Wireframe (Figma)

Target Audience

Teenagers/Students

Objective

Record Study Hours, Customise Avatar and Room, Compete with Others

Why StudyPal?

  • Cute and Customisation Avatar and Rooms!
  • Leaderboard to compete with others!
  • Friend system and virtual study sessions!

User Stories

  • 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

Testing

Tests

  1. Navigation Bar:
    1. Ensure padding and margins of all navigation items and logo is vertically centered and appropriate amount of margin space is given
    2. Try to click all the navigation items to ensure that all links to other pages is working
    3. Try to shrink the width of the window down below 900px to verify that navigation items disappear and the hamburger menu appears
    4. Try to click the hamburger menu to check that navigation items reappear in a column below
  2. Hamburger Menu (<920px)
  3. Varying/Phone Sceen Sizes/Aspect Ratios:
  4. Different Browsers (Compatibility)
  5. Contact Form:
  6. Products List Gallery (Grid layout and hover)
  7. Animations and Transitions
  8. Featured Products Slideshow
  9. Scroll Bar
  10. Footer
  11. Github Repository
  12. Github Pages
  13. RestDB Database
  14. Media Queries

Credits

Acknoledgements

Fonts/Typography