FortuneStick

Overview

FortuneStick is an online fortune stick (เซียมซี) web app that lets users draw a virtual stick to reveal a fortune message. Each draw provides a unique prediction, making the experience fun, surprising, and engaging. This project was featured during the SMO election to attract students with an interactive activity, blending tradition with modern digital interaction. Using Lottie animations, the app simulates the motion of shaking a fortune stick and presents the results in a lively and visually appealing way.

Feature	Description	Impact
Digital Fortune Stick	Simulates traditional fortune stick drawing	Preserves cultural experience in a modern form
Randomized Results	Unique fortunes for each draw	Keeps the experience fresh and exciting
Engaging Animations	Lottie-powered shake and reveal motion	Enhances realism and user enjoyment
Clean UI	Simple design for quick interaction	Ensures accessibility for all users
Campaign Integration	Used for SMO election booth activity	Boosted participation and engagement

Technologies Used

Tech Stack

Technology	Purpose	Benefit
React	Frontend framework	Efficient and reusable UI components
TypeScript	Type safety	Minimizes bugs and improves maintainability
Vite	Build tool	Fast development and optimized builds
Tailwind CSS	Styling	Quick and consistent UI design
HeroUI	UI components	Professional pre-styled elements
Lottie	Animations	Smooth and high-quality motion effects
Cloudflare Pages	Static Site Hosting	Easy deployment and management

Live Website

You can try it here: fortunestick.kiznick.me

Overview

Project Flow

1. Drawing the Fortune Stick

2. Revealing the Fortune

Key Features

Technologies Used

Live Website

Overview

Project Flow

1. Drawing the Fortune Stick

2. Revealing the Fortune

Key Features

Technologies Used

Live Website