Motiva

A motivational quote application built with Vue.js and Supabase. Discover inspiring quotes, save your favorites locally, and optionally synchronize them to your personal collection across devices through a clean, responsive interface.

Features

Quote Experience

• Browse motivational quotes fetched from API Ninjas.
• Save favorite quotes to your personal collection, initially stored locally in your browser.
• Remove saved quotes from your collection.
• Copy quotes to your clipboard.
• Responsive interface built with Vue.js.
• Fast client-side navigation.

Cloud Synchronization (Optional)

• User authentication (sign-up, sign-in, sign-out) powered by Supabase Auth.
• Synchronize your saved quotes to the cloud for access across multiple devices.
• The login modal supports sign-up and sign-in. On sign-in, local favorites are merged with cloud quotes (deduplicated) and then kept in sync on every save/remove/delete. Signing out stops cloud sync, but local quotes remain available.
• The sync status is reflected in the UI (e.g., a "Synced" pill with a purple dot when signed in, and footer text updates).

Backend Services

• Supabase Edge Functions (Deno) for fetching random quotes from API Ninjas.
• PostgreSQL database for storing user-specific saved quotes, managed by Supabase.
• Version-controlled database migrations.
• Secure communication leveraging the Supabase platform.

Tech Stack

Area	Technologies
Frontend	Vue 3, Vite, JavaScript
Backend	Supabase Edge Functions (Deno), API Ninjas
Database	Supabase PostgreSQL, SQL Migrations
Architecture	Vue Client → Supabase Edge Function (API Ninjas) → Supabase PostgreSQL

Project Structure

motiva_app/
├── public/
│   ├── motiva_og.png
│   └── quote.png
├── src/
│   ├── components/
│   ├── composables/
│   ├── lib/
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── supabase/
│   ├── functions/
│   ├── migrations/
│   └── config.toml
├── package.json
├── vite.config.js
└── README.md

Getting Started

Prerequisites

• Node.js 20+
• npm
• Supabase CLI

Environment Variables

Create a .env file in the root of the project (motiva_app/) and add the following variables:

VITE_SUPABASE_URL="YOUR_SUPABASE_PROJECT_URL"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"
API_NINJAS_KEY="YOUR_API_NINJAS_KEY"

• VITE_SUPABASE_URL: Your Supabase project URL.
• VITE_SUPABASE_ANON_KEY: Your Supabase public anon key.
• API_NINJAS_KEY: Your API Ninjas API key for fetching quotes. This key is used by the Supabase Edge Function.

Installation

Clone the repository:

git clone <repository-url>
cd motiva_app

Install dependencies:

npm install

Start the development server:

npm run dev

Supabase Setup

1. Run database migrations (using the Supabase Dashboard SQL editor or CLI):

   supabase db push

2. Deploy the Edge Function and set the API key secret:

   supabase functions deploy random-quote
   supabase secrets set API_NINJAS_KEY=your-api-ninjas-key

3. Enable Email authentication in your Supabase Dashboard: Navigate to Authentication → Providers and enable Email.

Build

Create a production build:

npm run build # outputs to dist/

Preview the production build:

npm run preview

License

This project is licensed under the MIT License.