Live Demo: [Coming Soon on Render]
Take a deep breath and relax with inspirational quotes, calming GIFs, wholesome memes, and guided breathing exercises. Your personal stress relief companion, built with Flask and Bootstrap.
- 🌟 Daily Inspirational Quotes - Uplifting wisdom from free quote APIs
- 🎬 Calming GIFs - Peaceful visuals from Giphy API
- 😊 Wholesome Memes - Light-hearted content to make you smile
- 🧘 Breathing Exercises - Guided meditation with visual animations
- 🌓 Dark Mode Support - Works perfectly with Dark Reader extension
- 📱 Fully Responsive - Works on all devices
- ♿ Accessible - ARIA labels, keyboard navigation, and semantic HTML
- 🔒 Privacy-First - No data collection or storage
- Flask - Python web framework
- Gunicorn - Production WSGI server
- Requests - HTTP library for API calls
- UV - Modern Python package manager
- HTML5 - Semantic markup
- Bootstrap 5 - Responsive UI framework
- jQuery - DOM manipulation and AJAX
- CSS3 - Custom styling with gradients and animations
- Quotable API - Random inspirational quotes
- ZenQuotes API - Backup quote source
- Giphy API - Random calming GIFs
- Meme API - Wholesome memes from Reddit
- Render - Cloud hosting platform
- Python 3.9 or higher
- UV package manager (install with:
pip install uv)
-
Clone the repository
git clone https://github.com/Life-Experimentalists/Relax.git cd Relax
-
Install dependencies
uv sync
-
Setup environment variables (optional but recommended)
Option A: Using .env file (easier)
# Copy the example file Copy-Item .env.example .env # Edit .env and add your Giphy API key notepad .env
Option B: Set directly in terminal
# Get a free API key from https://developers.giphy.com/ $env:GIPHY_API_KEY = "your_giphy_api_key_here"
📘 See ENV_SETUP.md for detailed instructions
-
Run the application
uv run app.py
-
Open in browser
http://localhost:5000
Relax/
├── app.py # Main Flask application
├── pyproject.toml # UV package configuration
├── uv.lock # UV lock file
├── render.yaml # Render deployment config
├── .env.example # Environment variables template
├── ENV_SETUP.md # Environment setup guide
├── templates/ # HTML templates
│ ├── index.html # Main page
│ ├── 404.html # Not found page
│ └── 500.html # Error page
├── static/ # Static assets
│ ├── css/
│ │ └── style.css # Custom styles
│ ├── js/
│ │ └── script.js # Frontend logic
│ └── images/ # Image assets
├── specs/ # Project documentation
└── README.md # This file
💡 Note: After cloning, copy
.env.exampleto.envand add your Giphy API key for better GIF quality!
-
Create a Render account at render.com
-
Create a new Web Service
- Connect your GitHub repository
- Select the
Relaxrepository
-
Configure the service
- Name:
relax-stress-bust(or your choice) - Environment:
Python 3 - Build Command:
pip install uv && uv sync - Start Command:
uv run gunicorn app:app
- Name:
-
Add environment variable (optional but recommended)
- Go to "Environment" tab
- Click "Add Environment Variable"
- Key:
GIPHY_API_KEY - Value: Your Giphy API key (get free key at https://developers.giphy.com/)
- Click "Save Changes"
-
Deploy!
- Render will automatically build and deploy your app
- Your app will be live at
https://your-app-name.onrender.com - Render automatically loads environment variables - no code changes needed! ✨
📘 Detailed Environment Setup: See ENV_SETUP.md for step-by-step instructions
| Variable | Description | Required |
|---|---|---|
GIPHY_API_KEY |
Giphy API key for GIF generation | No (falls back to hardcoded GIFs) |
PORT |
Port for Flask to run on | No (defaults to 5000, Render sets automatically) |
FLASK_ENV |
Flask environment (development/production) | No (defaults to production) |
Edit app.py and modify the get_quote() function to use different APIs or add more fallback sources.
Modify the tag parameter in app.py get_gif() function:
'tag': random.choice(['calming', 'relaxing', 'peaceful', 'nature', 'meditation'])In static/js/script.js, modify the timing:
// Change from 4 seconds to your preference
setTimeout(() => {
// Breathe In duration
}, 4000);- Open the app in your browser
- Click "I Need Relief" button
- Verify random selection of GIF/Meme/Breathing exercise
- Test dark mode toggle
- Test quote refresh button
- ✅ Chrome/Edge (Chromium)
- ✅ Firefox
- ✅ Safari
- ✅ Mobile browsers
- ✅ System dark mode preference
- ✅ Manual toggle button
- ✅ Dark Reader extension compatibility
Returns the main application page.
Returns a random inspirational quote.
Response:
{
"text": "Breathe. This too shall pass.",
"author": "Anonymous",
"source": "quotable"
}Returns a random calming GIF URL.
Response:
{
"url": "https://media.giphy.com/media/...",
"source": "giphy"
}Returns a random wholesome meme.
Response:
{
"url": "https://i.redd.it/...",
"title": "Wholesome content",
"source": "reddit"
}Health check endpoint.
Response:
{
"status": "healthy",
"timestamp": "2025-10-07T12:00:00",
"version": "1.0.0"
}Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
VKrishna04
- Website: vkrishna04.me
- GitHub: @VKrishna04
- Organization: Life Experimentalists
- Quote APIs: Quotable & ZenQuotes
- GIF API: Giphy
- Meme API: Meme API
- Icons: Bootstrap Icons
- UI Framework: Bootstrap
- ✅ Semantic HTML5 tags
- ✅ Meta tags for SEO (Open Graph, Twitter Cards)
- ✅ Structured data (Schema.org)
- ✅ ARIA labels for accessibility
- ✅ Keyboard navigation support
- ✅ Mobile-first responsive design
- ✅ Fast loading times (<2s)
- ✅ Dark mode support
None at this time. Please report issues on the GitHub Issues page.
- User preferences storage (localStorage)
- More breathing exercise patterns
- Sound effects/ambient music
- Share quotes on social media
- Multi-language support
- PWA (Progressive Web App) support
- Analytics dashboard
Made with ❤️ by VKrishna04 | View on GitHub