Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/oracle/llms.txt

Use this file to discover all available pages before exploring further.

​
The Apothecary

Oracle’s Projects page is dressed as a mystical apothecary. Three glowing potion bottles rest on a wooden shelf — each one representing a distinct project, color-coded by its nature. Clicking a bottle tips it and pours its contents into a cauldron below; as the liquid swirls in, the project’s details materialize in the space above the cauldron, fading in with a Framer Motion entrance animation. Clicking a different bottle drains the cauldron and refills it with the new brew.

E-Commerce Hex

Type: Frontend BrewA lightning-fast storefront built with Next.js and Framer Motion. Features seamless cart transitions and enchanted product galleries.Tech Stack
  • React
  • Next.js
  • Tailwind
  • Framer Motion

Data Scrying Orb

Type: Fullstack ElixirReal-time analytics dashboard that visualizes complex data streams into scannable, beautiful charts.Tech Stack
  • TypeScript
  • Node.js
  • PostgreSQL
  • Recharts

Auth Ward

Type: Security PotionA robust authentication microservice providing impenetrable wards against unauthorized access.Tech Stack
  • Go
  • Redis
  • JWT
  • OAuth2

​
Interaction Design

The apothecary shelf is powered by a combination of SVG illustrations and Framer Motion spring animations. Potion bottle selector Each bottle is an SVG component whose liquid fill color matches the project’s accent color (#1de9b6 for E-Commerce Hex, #e8c468 for Data Scrying Orb, #ff5252 for Auth Ward). On hover, inactive bottles lift smoothly upward via a y spring. On click:
  1. A tilt animation tips the bottle ~15 degrees and raises it via a combined rotate: 15 + y: -20 spring.
  2. The liquid fill path morphs upward using an animated d attribute (the fill line rises in the SVG), and its opacity reduces as the brew “pours out.”
  3. A narrow glowing stream — a w-2 rounded-full div in the project’s accent color — animates its height from 0 to 100 between the bottle and the cauldron.
  4. The project detail panel above the cauldron fades and slides in via opacity + y variants.
State management The active project index is stored in a single React useState hook. Each bottle’s click handler updates this index, which drives both the cauldron color and the visible detail panel — no external state library required.

​
Tech Stack Breakdown

​
E-Commerce Hex

LayerTechnology
FrameworkNext.js (App Router)
UI ComponentsReact 18
StylingTailwind CSS
AnimationsFramer Motion
A statically generated product catalog with incremental static regeneration (ISR) keeps pages blazing fast. Framer Motion’s AnimatePresence drives the cart slide-in drawer and product image gallery crossfades.

​
Data Scrying Orb

LayerTechnology
LanguageTypeScript
BackendNode.js
DatabasePostgreSQL
ChartingRecharts
A fullstack application where a Node.js REST API aggregates time-series records from PostgreSQL and streams them to the React frontend. Recharts renders responsive LineChart and AreaChart components that update in real time via WebSocket.

​
Auth Ward

LayerTechnology
ServiceGo
Session CacheRedis
Token FormatJWT (RS256)
FederationOAuth2
A standalone microservice written in Go that issues signed JWTs and validates them on every protected route. Redis stores refresh-token metadata with TTL-based expiry, and OAuth2 provider integration supports Google and GitHub as external identity sources.

Build docs developers (and LLMs) love

Get started for freeTalk to us