Skip to content

Frontend Assignment - Proxie Studio.md

Latest commit

 

History

History
169 lines (110 loc) · 3.76 KB

Frontend Assignment - Proxie Studio.md

File metadata and controls

169 lines (110 loc) · 3.76 KB

Frontend Intern Assignment: Task Management Application

Duration: 7 Days Tech Stack: SvelteKit, Shadcn Svelte, Supabase

Project Overview

Build a simple task management application where users can authenticate, create tasks, and view their task list. This assignment tests your understanding of modern frontend development, authentication flows, and database integration.

Requirements

1. Authentication

Create a new supabase project and Implement user authentication using Supabase:

Sign Up Page

  • Email and password registration
  • Form validation (email format, password strength)
  • Error handling for existing users

Login Page

  • Email and password login
  • “Remember me” functionality
  • Password reset link (can be placeholder)

Protected Routes

  • Redirect unauthenticated users to login
  • Persist session across page refreshes

Logout Functionality

  • Clear session and redirect to login

2. Task Management Form

Create a form to add new tasks with the following fields:

  • Title (required, text input, max 100 characters)
  • Description (optional, textarea, max 500 characters)
  • Priority (required, select dropdown: Low, Medium, High)
  • Due Date (required, date picker)
  • Status (default: “Pending”, options: Pending, In Progress, Completed)

Form Requirements

  • Client-side validation
  • Display validation errors clearly
  • Submit button should be disabled while submitting
  • Show success/error messages after submission
  • Clear form after successful submission

3. Task List Display

Display all tasks created by the logged-in user:

Task Cards/List Items showing:

  • Title
  • Description (truncated if too long)
  • Priority (with color coding)
  • Due date (formatted nicely)
  • Status badge

Features:

  • Sort by: Due date, Priority, Created date
  • Filter by: Status, Priority
  • Search by title
  • Empty state when no tasks exist

Actions:

  • Edit task (inline or modal)
  • Delete task (with confirmation)
  • Mark as complete/incomplete

4. UI/UX Requirements

  • Use shadcn-svelte components throughout
  • Responsive design (mobile, tablet, desktop)
  • Loading states for async operations
  • Consistent color scheme and spacing

5. Technical Requirements

SvelteKit Features:

  • Use sveltekit’s form actions for submissions (Required)
  • Implement proper load functions
  • Handle errors gracefully

Supabase Setup:

  • Create tasks table with proper RLS policies
  • User-specific data access (users see only their tasks)
  • Real-time subscriptions (optional bonus)

Code Quality:

  • Clean, readable code with comments
  • Proper component structure
  • TypeScript types (bonus)
  • Error boundaries

Submission Guidelines

1. GitHub Repository

Create a public repository. Include a comprehensive README with:

  • Setup instructions
  • Environment variables needed
  • Screenshots of the application
  • Any assumptions or design decisions

2. Live Demo (Optional but Recommended)

  • Deploy on Vercel/Netlify
  • Provide demo credentials if needed

3. Documentation

  • Comment complex logic
  • Document any third-party libraries used
  • List any known issues or limitations

Bonus Points

  • Real-time updates when tasks are added/updated
  • Dark mode toggle
  • Task categories/tags
  • Task due date reminders
  • Collaborative tasks (share with other users)

Resources

  • SvelteKit Documentation
  • shadcn-svelte Components
  • Supabase Documentation
  • Supabase Auth with SvelteKit
  • Zod Validation
  • Superforms for Sveltekit

Note: Focus on building a functional MVP first, then enhance with additional features if time permits. Use Sveltekit’s form actions and other validation tools as needed.