A modern React application that simulates a casting experience directly in the browser. Each randomized cast produces:

• A symbolic identifier and interpretation
• A yes/no/maybe outcome
• A set of four virtual tokens with smooth animations

Users can log in, save their casts, edit details, and revisit past results. Originally prototyped in Swift with Core Data, the project was reimagined in React, TailwindCSS, and Firebase to demonstrate responsive design, real-time data handling, and full-stack deployment.

🔗 Live Demo: obi-project-397801.web.app

I set out on this coding endeavor to learn how to use ReactJS, Vite, Figma, OAuth, and TailwindCSS.

Before you begin, ensure you have the following installed:

• Node.js
• npm
• Firebase CLI (npm install -g firebase-tools)
• A Firebase project created in the Firebase Console

"firebase": "^12.6.0",
"framer-motion": "^10.16.4",
"react": "^19.2.1",
"react-dom": "^18.2.0",
"react-firebase-hooks": "^5.1.1",
"react-icons": "^4.11.0",
"uid": "^2.0.2",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.2",
"vite": "^7.2.4"

• Node.js: 20.19.5

• npm: 11.6.2

• Firebase CLI: firebase-tools (used for deployment) — install with npm i -g firebase-tools

• Linting: ESLint with the provided workspace config (npm run lint)

npm run dev      # start Vite dev server
npm run build    # build for production
npm run preview  # preview production build
npm run lint     # run ESLint checks

git clone https://github.com/quinise/OnlineObi.git
cd OnlineObi

npm install

Create a firebase.config.tsx file in the root of your project and add your Firebase project keys from the Firebase Console.

Example:

// firebase.config.tsx
export const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

npm run dev

3. Navigate to http://localhost:5173

• Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) — provides autocomplete, linting, and class inspections for Tailwind projects. The workspace recommends this extension in .vscode/extensions.json.
• Workspace CSS setting: this project adds a workspace setting to suppress "Unknown at rule" diagnostics for PostCSS/Tailwind directives (.vscode/settings.json). Install the Tailwind extension for full IntelliSense and then you can remove or keep the setting as desired.

npm run build
firebase deploy

Homepage – Generate Result button with animations

History – Saved casts with edit & delete options

Details – Expanded view of a single cast

Demo – Short animation of generating a cast

Issues, and feature requests are welcome!

This project is licensed under the MIT License.