Fix/blank screen on missing config#1
Open
taksh-nahata wants to merge 20 commits into
Open
Conversation
The application was showing a blank screen if the Supabase
environment variables (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY)
were not set.
This commit introduces the following changes:
1. Modifies `src/lib/supabase.ts` to:
- Log an error to the console if Supabase env vars are missing,
instead of throwing an error that halts script execution.
- Export `isSupabaseConfigured` (boolean) to indicate if Supabase
is properly configured.
- Export `supabase` as `null` if not configured.
2. Modifies `src/App.tsx` to:
- Check `isSupabaseConfigured` on startup.
- Display a user-friendly full-page error message if Supabase is
not configured, guiding you to check your .env file or
environment settings.
3. Modifies `src/contexts/AuthContext.tsx` to:
- Check `isSupabaseConfigured` before attempting to use the
`supabase` client.
- Prevent calls to Supabase methods (e.g., `signUp`, `signIn`,
`signOut`, `onAuthStateChange`) if Supabase is not configured.
- Log console warnings/errors if auth functions are called without
a configured Supabase client.
These changes ensure the application remains partially functional (by displaying an error page) and provides clear feedback to you or the developer when critical configuration is missing, rather than failing silently with a blank screen.
This commit encompasses a major refactor including migration from Vite/React to Next.js and a UI/UX overhaul for public and authentication pages.
**Phase 1: Next.js Migration & Initial Setup**
- **Project Initialization:** I set up Next.js with App Router and configured Tailwind CSS.
- **Supabase Integration:**
- I configured Supabase for Next.js (client, server, middleware).
- I updated .env.local with new Supabase credentials.
- **Core Component Migration:**
- I migrated Home, Login, SignUp, Dashboard pages and Navbar component.
- I replaced react-router-dom with Next.js file-system routing and Link components.
- **Authentication:**
- I migrated AuthContext to Next.js, using new Supabase client utilities.
- I ensured basic sign-up, sign-in, and sign-out functionality.
- **Original Issue Fix:** I addressed the blank screen issue from missing Supabase config in the old Vite setup by making error handling more robust (now superseded by Next.js patterns).
**Phase 2: UI/UX Overhaul (Home, Sign Up, Login Pages)**
- **Global Styling System (Tailwind CSS):**
- I defined a new color palette (primary blue, secondary rose, neutrals).
- I implemented a system font stack for `font-sans`.
- I created base styles for `.btn-primary`, `.btn-secondary`, `.btn-accent`, `.card`, `.card-content`, and `.input` in `globals.css` for consistency.
- **Home Page (`app/page.tsx`):**
- I refactored layout, updated background, improved spacing and typography.
- I applied new global styles for cards, buttons, and text.
- I enhanced animations with `framer-motion` (staggered card entry, refined hover effects).
- **Sign Up Page (`app/signup/page.tsx`):**
- I aligned with global styles for a consistent look and feel.
- I improved form layout, spacing, and error message styling (including icon).
- I added micro-interactions: form card entry animation, button loading spinner.
- I verified responsiveness.
- **Login Page (`app/login/page.tsx`):**
- I mirrored Sign Up page improvements for consistency.
- I applied global styles, refined layout, error messages, and added Sign Up link.
- I added micro-interactions: form card entry animation, button loading spinner.
- I verified responsiveness.
The application foundation is now on Next.js, and the initial public-facing and authentication pages (Home, Sign Up, Login) have a significantly improved, modern, and consistent UI/UX.
taksh-nahata
force-pushed
the
fix/blank-screen-on-missing-config
branch
from
975f1a3 to
efb5fe2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.