Online Reading Platform

An online reading platform designed specifically for children to enjoy graphic stories in an engaging and interactive way. It also serves as a publishing space for creators to upload, design, and share their own visual stories.

Online Reading Platform

Project Overview

Phantasia is an online reading platform designed specifically for children to enjoy graphic stories in an engaging and interactive way. It also serves as a publishing space for creators to upload, design, and share their own visual stories. The platform combines interactive UI, animation, and database features to provide both educational and creative experiences.

I was primarily responsible for the front-end development of major product and user-facing features, including the product listing page with carousel, scroll bar, and data rendering; designing and implementing the book detail page; building the reading interface structure with animated effects; integrating product database logic with backend data; developing the review system and optimizing the UI/UX flow; and creating a 3D book animation using CSS3D.

Tools Used

Vue.js
Vue Router
Pinia
SASS
CSS 3D
JavaScript
jQuery
GSAP
Parallax.js
jQueryRipples.js
Textillate
Three.js
Node.js
Express
Firebase
Firestore
Storage
Authentication
Axios
Ajax
Mitt

Key Features

  • User authentication and authorization
  • Product catalog with search and filtering
  • Interactive product pages with carousel and scroll bar functionality
  • Detailed book information pages with metadata and user reviews
  • Immersive reading page with animated transitions and sliding navigation
  • User review system with comment submission and real-time display
  • 3D animated book display
  • Responsive design for all devices
  • Integrated backend for story and product management using Firebase
  • Creator input features for submitting stories and visual content