docs: add comprehensive setup documentation and environment configuration

HackStyx · HackStyx · commit d3012928d6c9 · 2025-07-20T13:55:56.000+05:30
diff --git a/.env.example b/.env.example
@@ -0,0 +1,6 @@
+# Supabase Configuration
+VITE_SUPABASE_URL=your_supabase_project_url
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# API Configuration
+VITE_API_BASE_URL=https://portfolio-tracker-backend-y7ne.onrender.com/api 
diff --git a/EMAIL_TEMPLATES_SETUP.md b/EMAIL_TEMPLATES_SETUP.md
@@ -0,0 +1,202 @@
+# 📧 Email Templates Setup Guide
+
+This guide will help you implement the beautiful, aesthetic email templates for your Portfolio Tracker project in Supabase.
+
+## 🎨 Template Overview
+
+We've created three stunning email templates:
+
+1. **Confirm Signup** - Welcome new users with feature highlights
+2. **Reset Password** - Secure password reset with security tips
+3. **Magic Link** - Passwordless authentication with benefits showcase
+
+## 🚀 Implementation Steps
+
+### Step 1: Access Supabase Email Templates
+
+1. Go to your [Supabase Dashboard](https://supabase.com/dashboard)
+2. Select your Portfolio Tracker project
+3. Navigate to **Authentication** → **Email Templates**
+
+### Step 2: Configure Confirm Signup Template
+
+1. Click on **"Confirm signup"** template
+2. Replace the default content with the content from `email-templates/confirm-signup.html`
+3. **Important**: Replace `{{ .Email }}` with `{{ .Email }}` (Supabase uses this format)
+4. Replace `{{ .ConfirmationURL }}` with `{{ .ConfirmationURL }}`
+5. Click **Save**
+
+### Step 3: Configure Reset Password Template
+
+1. Click on **"Reset password"** template
+2. Replace the default content with the content from `email-templates/reset-password.html`
+3. Replace `{{ .Email }}` with `{{ .Email }}`
+4. Replace `{{ .ConfirmationURL }}` with `{{ .ConfirmationURL }}`
+5. Click **Save**
+
+### Step 4: Configure Magic Link Template
+
+1. Click on **"Magic link"** template
+2. Replace the default content with the content from `email-templates/magic-link.html`
+3. Replace `{{ .Email }}` with `{{ .Email }}`
+4. Replace `{{ .ConfirmationURL }}` with `{{ .ConfirmationURL }}`
+5. Click **Save**
+
+## 🎯 Template Features
+
+### ✨ Design Highlights
+
+- **Modern Gradient Headers**: Each template has a unique color scheme
+- **Responsive Design**: Works perfectly on mobile and desktop
+- **Brand Consistency**: Matches your Portfolio Tracker theme
+- **Professional Typography**: Clean, readable fonts
+- **Interactive Elements**: Hover effects and smooth transitions
+
+### 🔧 Customization Options
+
+#### Colors & Branding
+- **Confirm Signup**: Blue gradient (#3b82f6 to #1d4ed8)
+- **Reset Password**: Red gradient (#ef4444 to #dc2626)
+- **Magic Link**: Purple gradient (#8b5cf6 to #7c3aed)
+
+#### Content Sections
+- **Welcome Messages**: Personalized greetings
+- **Feature Highlights**: Showcase key benefits
+- **Security Information**: Important safety reminders
+- **Call-to-Action Buttons**: Clear, prominent CTAs
+- **Footer Links**: Support and social media
+
+## 📱 Mobile Optimization
+
+All templates are fully responsive and include:
+- Mobile-first design approach
+- Optimized typography for small screens
+- Touch-friendly button sizes
+- Proper spacing for mobile viewing
+
+## 🔒 Security Features
+
+### Built-in Security Elements
+- **Expiration Notices**: Clear time limits for links
+- **Security Warnings**: Alerts for unintended requests
+- **Privacy Information**: Data protection notices
+- **Support Contacts**: Easy access to help
+
+### Template Variables
+- `{{ .Email }}` - User's email address
+- `{{ .ConfirmationURL }}` - Secure confirmation link
+- `{{ .TokenHash }}` - Security token (if needed)
+- `{{ .SiteURL }}` - Your application URL
+
+## 🎨 Customization Guide
+
+### Changing Colors
+To modify the color scheme, update these CSS variables:
+
+```css
+/* Confirm Signup - Blue Theme */
+background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+
+/* Reset Password - Red Theme */
+background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+/* Magic Link - Purple Theme */
+background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+```
+
+### Updating Content
+- **Company Name**: Replace "Portfolio Tracker" with your brand
+- **Support Email**: Update `support@portfoliotracker.com`
+- **Social Links**: Add your actual social media URLs
+- **Features**: Customize the feature highlights for your app
+
+### Adding Your Logo
+Replace the SVG icon in the header with your actual logo:
+
+```html
+<div class="logo">
+    <!-- Replace with your logo -->
+    <img src="your-logo-url.png" alt="Your Brand" style="width: 32px; height: 32px;">
+</div>
+```
+
+## 📊 Testing Your Templates
+
+### 1. Enable Email Confirmations
+1. Go to **Authentication** → **Settings**
+2. Enable **"Enable email confirmations"**
+3. Set **Site URL** to your domain
+4. Add redirect URLs for your app
+
+### 2. Test Each Template
+1. **Signup Test**: Create a new account
+2. **Password Reset Test**: Use "Forgot Password" feature
+3. **Magic Link Test**: Enable magic link authentication
+
+### 3. Preview Templates
+Use Supabase's built-in preview feature to see how templates look before sending.
+
+## 🚨 Troubleshooting
+
+### Common Issues
+
+#### Template Not Loading
+- Check for syntax errors in HTML
+- Ensure all CSS is properly formatted
+- Verify template variables are correct
+
+#### Styling Issues
+- Test in different email clients
+- Use inline CSS for better compatibility
+- Avoid complex CSS animations
+
+#### Links Not Working
+- Verify `{{ .ConfirmationURL }}` is properly set
+- Check redirect URLs in Supabase settings
+- Test link expiration times
+
+### Email Client Compatibility
+- **Gmail**: Full support
+- **Outlook**: Good support (some CSS limitations)
+- **Apple Mail**: Full support
+- **Mobile Apps**: Responsive design works well
+
+## 📈 Best Practices
+
+### Content Guidelines
+- Keep subject lines under 50 characters
+- Use clear, action-oriented language
+- Include your brand name in subject lines
+- Test with different email addresses
+
+### Design Guidelines
+- Use high contrast for readability
+- Keep images under 1MB
+- Use web-safe fonts as fallbacks
+- Test on multiple devices
+
+### Security Guidelines
+- Never include sensitive data in emails
+- Use HTTPS for all links
+- Implement proper link expiration
+- Monitor for suspicious activity
+
+## 🎉 Success Metrics
+
+Track these metrics to measure template effectiveness:
+- **Open Rates**: Aim for 20-30%
+- **Click-Through Rates**: Target 2-5%
+- **Conversion Rates**: Measure signup completions
+- **Bounce Rates**: Keep under 5%
+
+## 📞 Support
+
+If you need help with the templates:
+1. Check the Supabase documentation
+2. Review email client compatibility guides
+3. Test with different email providers
+4. Contact Supabase support if needed
+
+---
+
+**🎨 Your Portfolio Tracker now has beautiful, professional email templates that will enhance user experience and build trust with your users!** 
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 [![Render](https://img.shields.io/badge/Render-46E3B7?style=for-the-badge&logo=render&logoColor=white)](https://portfolio-tracker-backend-y7ne.onrender.com/api)
 [![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
 [![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)
-[![MySQL](https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=mysql&logoColor=white)](https://www.mysql.com/)
+[![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white)](https://supabase.com/)
 [![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
 [![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://nodejs.org/)
 [![Finnhub](https://img.shields.io/badge/Finnhub-1B1B1B?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA2aDJsMTUgMk0xNyA2djE0TTcgMTZoMTAiLz48L3N2Zz4=)](https://finnhub.io/)
@@ -41,7 +41,7 @@
 
 - Node.js 14+
 - npm or yarn
-- MySQL
+- Supabase account
 - Finnhub API Key (get one at [finnhub.io](https://finnhub.io/))
 
 ### Frontend Setup
@@ -73,15 +73,18 @@ npm install
 
 2. Configure `.env`:
 ```env
-DATABASE_URL=mysql://user:password@localhost:3306/portfolio_tracker
+SUPABASE_URL=your_supabase_url
+SUPABASE_KEY=your_supabase_anon_key
 PORT=5000
-NODE_ENV=development
 FINNHUB_API_KEY=your_finnhub_api_key
 ```
 
-3. Run migrations and start:
+3. Set up Supabase:
+   - Follow the instructions in `backend/SUPABASE_SETUP.md`
+
+4. Test connection and start:
 ```bash
-npm run migrate
+npm run init-db
 npm start
 ```
 
@@ -142,8 +145,7 @@ Visit our [API Documentation](https://hackstyx.github.io/portfolio-tracker/)
 ### 🛠 Backend
 - **Runtime**: [Node.js](https://nodejs.org/) - JavaScript runtime
 - **Framework**: [Express](https://expressjs.com/) - Web framework for Node.js
-- **Database**: [MySQL](https://www.mysql.com/) - Open-source relational database
-- **ORM**: [Sequelize](https://sequelize.org/) - Modern TypeScript and Node.js ORM
+- **Database**: [Supabase](https://supabase.com/) - Open source Firebase alternative
 - **Market Data**: [Finnhub](https://finnhub.io/) - Real-time RESTful APIs for stocks
 - **API Documentation**: [Github Pages](https://hackstyx.github.io/portfolio-tracker/)
 
@@ -156,8 +158,8 @@ Visit our [API Documentation](https://hackstyx.github.io/portfolio-tracker/)
   - Containerized deployment
   - Automatic scaling
   - Built-in monitoring
-- **Database Hosting**: [Railway](https://railway.app/)
-  - Managed MySQL database
+- **Database Hosting**: [Supabase](https://supabase.com/)
+  - PostgreSQL database
   - Automated backups
   - High availability
 
diff --git a/SUPABASE_AUTH_SETUP.md b/SUPABASE_AUTH_SETUP.md
@@ -0,0 +1,124 @@
+# Supabase Authentication Setup
+
+This guide will help you set up Supabase authentication for the Portfolio Tracker application.
+
+## Prerequisites
+
+1. A Supabase account (sign up at [supabase.com](https://supabase.com))
+2. A Supabase project created
+
+## Setup Steps
+
+### 1. Create a Supabase Project
+
+1. Go to [supabase.com](https://supabase.com) and sign in
+2. Click "New Project"
+3. Choose your organization
+4. Enter a project name (e.g., "portfolio-tracker")
+5. Enter a database password
+6. Choose a region close to your users
+7. Click "Create new project"
+
+### 2. Get Your Project Credentials
+
+1. In your Supabase dashboard, go to Settings > API
+2. Copy the following values:
+   - **Project URL** (looks like: `https://your-project-id.supabase.co`)
+   - **anon public** key (starts with `eyJ...`)
+
+### 3. Configure Environment Variables
+
+1. Create a `.env` file in the root of your project
+2. Add the following variables:
+
+```env
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your_anon_key_here
+VITE_API_BASE_URL=https://portfolio-tracker-backend-y7ne.onrender.com/api
+```
+
+### 4. Configure Authentication Settings
+
+1. In your Supabase dashboard, go to Authentication > Settings
+2. Configure the following:
+
+#### Site URL
+- Set to `http://localhost:5173` for development
+- Set to your production URL for production
+
+#### Redirect URLs
+Add these redirect URLs:
+- `http://localhost:5173/dashboard`
+- `http://localhost:5173/`
+- Your production URLs when deployed
+
+### 5. Email Templates (Optional)
+
+1. Go to Authentication > Email Templates
+2. Customize the email templates for:
+   - Confirm signup
+   - Reset password
+   - Magic link
+
+### 6. Enable Email Confirmation (Recommended)
+
+1. Go to Authentication > Settings
+2. Enable "Enable email confirmations"
+3. This ensures users verify their email before accessing the app
+
+## Features Implemented
+
+### Authentication Functions
+- **Sign Up**: Users can create accounts with email, password, and name
+- **Sign In**: Users can sign in with email and password
+- **Sign Out**: Users can sign out and return to homepage
+- **Password Reset**: Users can request password reset emails
+- **Email Verification**: Users receive confirmation emails (if enabled)
+
+### Protected Routes
+- All dashboard routes (`/dashboard`, `/portfolio`, `/watchlist`, etc.) are protected
+- Unauthenticated users are redirected to the homepage
+- Loading states are shown during authentication checks
+
+### User Experience
+- Form validation and error handling
+- Loading states during authentication
+- Success/error messages
+- Automatic redirect to dashboard after successful login
+- Persistent sessions across browser refreshes
+
+## Testing the Setup
+
+1. Start the development server: `npm run dev`
+2. Navigate to `http://localhost:5173`
+3. Try creating a new account
+4. Try signing in with the created account
+5. Test the logout functionality
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Invalid API key" error**
+   - Check that your `VITE_SUPABASE_ANON_KEY` is correct
+   - Make sure you're using the "anon public" key, not the service role key
+
+2. **"Invalid redirect URL" error**
+   - Add your localhost URL to the redirect URLs in Supabase settings
+   - Make sure the URL matches exactly (including protocol and port)
+
+3. **Email not received**
+   - Check spam folder
+   - Verify email templates are configured in Supabase
+   - Check Supabase logs for email delivery issues
+
+4. **Authentication not working**
+   - Verify environment variables are loaded correctly
+   - Check browser console for errors
+   - Ensure Supabase project is active and not paused
+
+### Getting Help
+
+- Check the [Supabase documentation](https://supabase.com/docs)
+- Review the [Supabase Auth documentation](https://supabase.com/docs/guides/auth)
+- Check the browser console for detailed error messages 
diff --git a/USER_SETUP_INSTRUCTIONS.md b/USER_SETUP_INSTRUCTIONS.md
