A premium personal quote collection app with beautiful glassmorphism design. Collect, organize, and discover meaningful quotes that inspire you daily.
- 📚 Quote Collection: Save and organize your favorite quotes
- 🎨 Beautiful Design: Glassmorphism UI with dark/light theme support
- 📱 Responsive: Perfect experience on desktop and mobile
- 🔍 Smart Search: Find quotes by content, author, or tags
- 💌 Daily Newsletter: Receive daily inspiration via email
- 📤 Share Quotes: Generate beautiful quote images to share
- 🔐 Secure Authentication: User accounts with Supabase backend
- ⭐ Favorites: Mark and organize your most cherished quotes
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS, shadcn/ui components
- Backend: Supabase (Database, Auth, Edge Functions)
- State Management: TanStack Query
- Routing: React Router
- Theme: next-themes for dark/light mode
- Icons: Lucide React
- Node.js (v18 or higher)
- npm or yarn
# Clone the repository
git clone <your-repo-url>
cd q-quote-library
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Add your Supabase URL and API key to .env
# Start development server
npm run devCreate a .env file in the root directory:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keynpm run dev- Start development servernpm run build- Build for productionnpm run build:dev- Build for developmentnpm run lint- Run ESLintnpm run preview- Preview production build
The app uses Supabase with the following main tables:
- quotes - Store user quotes with metadata
- users - User profiles and preferences
- quote_favorites - User favorite quotes
- newsletter_subscriptions - Email newsletter management
- Push your code to GitHub
- Connect your GitHub repo to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically
- Build the project:
npm run build - Deploy the
distfolder to Netlify - Configure environment variables
The app uses a custom design system built on:
- Colors: HSL-based color tokens in
index.css - Components: Customized shadcn/ui components
- Typography: Inter font family
- Glassmorphism effects: Custom CSS with backdrop-blur
- Responsive breakpoints: Tailwind CSS defaults
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Lovable - AI-powered development platform
- UI components from shadcn/ui
- Backend powered by Supabase
- Icons by Lucide
Q. - Where meaningful quotes find their home. ✨