Technical Assessment - Next.js Full Stack Application

Overview

This technical assessment involves building a full-stack application using Next.js and Supabase. The base application includes user authentication, profile management, and a post creation system.

Project Description

• A simple blog platform with authentication
• User profile management system
• Post creation and display functionality
• Pre-built UI components that need proper implementation

What We're Looking For

• Clean and well-organized code structure
• Proper implementation of authentication flows
• Effective state management
• Understanding of Next.js 13+ features and server-side rendering
• Database modeling and management with Supabase
• TypeScript proficiency
• Form handling and validation
• Proper error handling
• Code maintainability and scalability
• Understanding of security best practices

You will be working with a starter codebase that includes basic UI components. Your task is to implement the full functionality, organize the code properly, and make any improvements you deem necessary.

Setup

Prerequisites

• Node.js 18+
• pnpm
• Docker (for local Supabase instance)

Project Installation

pnpm install
pnpm dev

Supabase Setup

Local Development

1. Setup Supabase CLI

pnpm add -g supabase

2. Start Local Supabase

supabase init
supabase start

This will spin up a Docker container with your local Supabase instance.

Database Migrations

• Create your migrations in supabase/migrations, use CLI supabase migration new MIGRATION_NAME
• Example migration file structure:

-- 000001_create_users_table.sql
create table public.profiles (
  id uuid references auth.users primary key,
  email text unique,
  phone text,
  date_of_birth date,
  address text,
  zip_code text,
  city text,
  updated_at timestamp with time zone
);

-- Enable RLS
alter table public.profiles enable row level security; (bonus)

Important Supabase Notes

• Your local instance runs at http://localhost:54321
• Studio UI available at http://localhost:54323
• Default credentials can be found in .env after supabase start
• Use migrations for all database changes
• Implement Row Level Security (RLS) policies (bonus)
• Document any additional tables or policies you create (bonus)

Remember to check Supabase Documentation for detailed information about:

• Authentication
• Database setup
• Storage (bonus)
• Row Level Security (bonus)
• TypeScript support

Requirements

Core Features

Authentication

• Implement complete authentication flow
• Login page with email/password
• Registration page with required fields:
• Email
• Password
• Phone
• Date of birth
• Address
• Zip code
• City
• Proper form validation using react-hook-form and zod
• Protected routes for authenticated users

Profile Management

• Display user information in a profile card
• Implement edit functionality
• Real-time form validation
• Update user information in Supabase
• Handle error states and loading states

Posts System

• Create posts with:
• Title
• Subtitle
• Content
• Image (optional)
• Display posts in a card layout
• Handle image upload to Supabase storage
• Basic CRUD operations
• Form validation

Technical Requirements

Next.js Implementation

• Use App Router
• Implement proper routing structure
• Utilize Server Components when relevant
• Handle client-side state management
• Implement proper error boundaries
• Loading states and suspense

Supabase Integration

• Set up proper database schema
• Implement Row Level Security (RLS)
• Handle authentication flow with Supabase Auth
• Set up proper storage rules for images
• Create necessary database migrations

Architecture & Code Quality

• Organize code into reusable components
• Implement proper TypeScript typing
• Follow React best practices
• Handle error cases gracefully
• Document key architecture decisions
• Clean and maintainable code structure
• Proper separation of concerns

Evaluation

Main Criteria

• Working authentication system
• Functional user profile management
• Working post creation and display
• Proper database structure and migrations
• Code quality and organization
• TypeScript implementation
• Error handling
• Form validations
• Security considerations

Bonus Points

• Comprehensive test coverage
• Advanced error handling
• Improved UI/UX from base design
• Performance optimizations
• Additional features that add value
• Comprehensive documentation

Submission Guidelines

• Fork this repository
• Create a new branch for your implementation
• Provide a complete README with:
• Setup instructions
• Development decisions
• Any additional features
• Include all necessary database migrations
• Submit via pull request
• Ensure all environment variables are documented
• Include any necessary screenshots or demonstrations

Important Notes

• Focus on code quality over quantity
• Commit regularly with clear messages
• Document your choices and tradeoffs
• Ensure the application runs locally without issues
• Test all features before submitting
• Don't hesitate to ask if you have technical questions
• Remember to handle edge cases
• Security should be a priority