a0.dev

Prompt

36 snippets

1. Setup Task Tracker App

Initialize a full-stack Task Tracker using Supabase for auth and DB.

Build a full-stack Task Tracker app using: - Next.js (frontend) - Supabase (auth + database) - Tailwind CSS (UI) Include user registration, login, and task management. Structure files for scalability.

Write Test for Adding a Task

Create a test that checks whether a task can be successfully added via the form.

Write a test for the task form using Jest or Playwright. Simulate entering a task title, submitting the form, and verifying the new task appears in the list.

Add User Registration and Login with Supabase Auth

Implement registration and login functionality using Supabase Auth.

Add authentication to the Task Tracker app using Supabase Auth. Create sign up and login forms. On successful login, redirect users to their dashboard. Persist session and include logout functionality.

Restrict Access to Authenticated Users Only

Ensure only logged-in users can access the dashboard or task features.

Restrict access to the task dashboard route. If user is not authenticated, redirect to the login page. Use Supabase session check on the frontend and SSR if needed.

Display User Tasks in a List

Render all tasks belonging to the logged-in user in a clean list UI.

Fetch and display all tasks belonging to the current logged-in user. Render each task as a list item with title and completion status. Include a message when there are no tasks.

Build a Form to Add New Tasks

Create a form in the UI to add new tasks and submit them to Supabase.

Create a form in the Task Tracker dashboard to add new tasks. Fields: task title. On submit, send data to Supabase and refresh the task list. Include loading and error handling states.

Create Supabase Table for Tasks

Design a `tasks` table in Supabase linked to each authenticated user.

Create a `tasks` table in Supabase with the following fields: - id (uuid) - user_id (uuid) - title (text) - completed (boolean) - created_at (timestamp) Add row-level security to ensure users can only access their own tasks.

Implement Task Completion Toggle

Allow users to mark tasks as complete or incomplete by clicking a checkbox or button.

Add a checkbox or button to each task item that lets users mark it complete/incomplete. Update the `completed` value in Supabase when toggled and refresh the list.

Set Up Axios Instance with Interceptors

Create a reusable Axios instance with interceptors for auth tokens and error logging.

I want to use Axios for API calls and handle auth tokens automatically. Set up an Axios instance with interceptors for: - Attaching Authorization headers - Handling 401 errors globally

Call Serverless Function from Frontend

Trigger a serverless function (e.g. Vercel, Netlify, Supabase) from the frontend code.

Help me call a serverless function from the frontend. Example: Vercel /api route or Supabase edge function. Show fetch logic with loading state and error handling.

Post Form Data to Backend

Send user-submitted form data to the backend using a POST request.

Here’s my form component: [Paste form code] Add the logic to send the form data to my backend endpoint via POST. Include error handling and success feedback.

Connect to REST API and Fetch Data

Set up a fetch call to get data from a REST API and display it in a component.

I want to fetch data from this REST API endpoint: [Paste endpoint URL] Show the full implementation using fetch or Axios. Render the data in a simple list or table component.

Handle API Errors Gracefully

Improve UX by catching API errors and showing user-friendly messages.

Improve error handling for this API request: [Paste API logic] Catch errors, log them, and show a helpful error message in the UI (not just console).

Add Google OAuth Login

Integrate Google login button and handle the OAuth flow securely.

Integrate Google OAuth login using a provider like Firebase, NextAuth, or Auth0. Show the full setup including client ID config and how to handle tokens after login.

Protect Routes Based on User Role

Ensure only authorized users with specific roles can access certain routes or components.

I want to protect this route based on user roles: [Paste route/component info] Only allow access if the user has a specific role (e.g., 'admin'). Redirect unauthorized users.

Set Up Email and Password Auth

Create an authentication form with email and password input fields and validate them properly.

Build a login form that accepts email and password. On submit, validate input and send credentials to the backend. Provide complete form component and basic validation logic.

Implement Session Persistence

Keep the user logged in by storing the session token securely and restoring it on page reload.

Make sure user stays logged in after a page reload. Persist token or session in a secure way (e.g. HTTP-only cookie or localStorage) Restore session on app load.

Analyze Slow Rendering List

Use virtualization or list chunking to speed up rendering for large lists.

This list renders thousands of items and causes slow performance: [Paste list rendering code] Help me implement virtualization or optimize the list rendering efficiently.

Improve Initial Page Load Time

Delay non-critical scripts and reduce blocking resources for faster load.

The initial page load is slow. Analyze possible performance bottlenecks. Suggest how to lazy-load non-critical resources and optimize bundle size.

Optimize React Component Re-renders

Reduce unnecessary re-renders by using memoization or callback optimizations.

This component is re-rendering too often and slowing down performance: [Paste component code] Analyze it and optimize with memo, useMemo, or useCallback where appropriate.

Use Lazy Loading for Images

Load images only when they enter the viewport to reduce initial payload.

Optimize image loading using lazy loading. Example: Replace standard <img> with a lazy-loading implementation that supports placeholder blur and responsive behavior.

Debounce Expensive Input Operations

Prevent performance issues by debouncing input-related tasks like filtering or API calls.

I have an input field that triggers an expensive operation on every keystroke: [Paste input or component code] Add a debounce mechanism so it only triggers after the user stops typing.

Improve Form UX with Validation Feedback

Show validation messages and inline error states when user input is incorrect.

Add validation feedback to this form: [Paste form code] Display inline errors on blur or submit. Use red border styling and error messages under fields.

Improve Form Input Accessibility

Enhance form inputs with proper labels, ARIA tags, and keyboard navigation.

Improve the accessibility of this form: [Paste form code] Add proper label associations, ARIA attributes, and ensure all inputs can be accessed via keyboard.

Make Layout Mobile Responsive

Convert a desktop layout into a responsive design that works well on mobile devices.

Here’s my layout: [Paste layout code or component structure] Make it mobile-responsive with appropriate breakpoints and layout shifts using CSS media queries or Tailwind utilities.

Add Hover Animations to Buttons

Create a smooth hover transition for buttons using CSS or styled components.

Add hover effects to these buttons: [Paste button code] Use a subtle scale or background color animation. Make sure it looks good in both light and dark themes.

Enhance Empty States with UI

Design helpful, visually appealing UI for when data is missing or lists are empty.

Add a user-friendly empty state for when a list or view has no data. Use text, icons, and optional CTA to guide the user. Example use case: a dashboard with no entries yet.

Create Modal for New Item

Create a modal that opens when a button is clicked and contains a form to submit new items.

I need a modal that opens when a button is clicked. Inside the modal should be a form with input fields. On submit, log the data or update local state. Use accessible modal and provide full component code.

Add Pagination to List

Paginate a long list of items with navigation buttons and dynamic page numbers.

Add pagination to this list of items: [Paste list or API logic] Support next/previous buttons and numbered page navigation. Bonus: highlight current page.

Build Sidebar Navigation

Add a collapsible sidebar with nav links that highlights the current route.

Create a collapsible sidebar with navigation links. Current route should be visually highlighted. Links should use a routing library like Next.js or React Router. Add toggle logic for collapse/expand.

Add Dark Mode Toggle

Implement a dark mode toggle using context or state, and store the user's preference.

I want to add a dark mode toggle in my app. Use a toggle button to switch between light and dark themes. Persist the user’s preference using localStorage or similar. Provide the full code including context/provider if needed.

Implement Search Functionality

Add a search bar that filters a list of items in real-time.

Add a search input to filter the following list in real-time: [Paste list or array structure] Provide full implementation with React hooks and optimized filtering logic.

Resolve State Not Updating Issue

State seems to update but UI does not reflect the change.

The UI doesn’t update when I change the state. Here’s my component: [Paste relevant code] Can you find out why the state change isn’t reflected in the rendered output?

Fix “undefined is not a function” Error

A typical JS bug when a method or callback isn’t properly defined.

I’m getting “undefined is not a function” when calling this method: [Paste code and error] Why is this happening, and how can I fix it?

Identify Root Cause from Error Trace

Use this prompt when you encounter an unfamiliar error message or crash in your app.

Here’s the error trace from my console: [Paste error trace or stack trace] Based on this output, what is the most likely root cause and which file or function should I inspect first?

Fix a Non-Working Button

A button appears in the UI but doesn’t trigger any action.

This button renders but doesn’t respond to clicks. Here’s the component code: [Paste button component] Can you help debug why the `onClick` isn't firing or working properly?