Fullstack Todo App - Elmar Angao (3-5 Years)

[eangao]

Fullstack todo application with user authentication and CRUD operations built for the 3-5 years experience level
assessment.

Tech Stack

• Next.js 16 (App Router, Turbopack)
• TypeScript (strict mode)
• Tailwind CSS + shadcn/ui
• NextAuth.js v5 (Credentials provider)
• Prisma ORM + SQLite
• bcrypt for password hashing

Features Delivered

• ✅ User registration and authentication
• ✅ Protected routes with session management
• ✅ Create, read, update, delete todos
• ✅ Toggle completion status
• ✅ User data isolation (users only see their own todos)
• ✅ Responsive mobile-first design
• ✅ Loading states and error handling
• ✅ Input validation on all endpoints

Approach

Architecture: Chose a standard Next.js App Router pattern with API routes for the backend. Used server components by
default and client components only where necessary (forms, interactive elements).

Authentication: Implemented NextAuth.js v5 with credentials provider rather than OAuth to keep the setup simple and
self-contained. Passwords are hashed with bcrypt (10 salt rounds).

Database: Selected SQLite with Prisma ORM for zero-configuration setup. This makes it easy for reviewers to run the
app without external database dependencies.

UI Components: Used shadcn/ui instead of building from scratch. This saved time while maintaining a professional,
accessible design system.

State Management: Kept it simple with React useState and fetch API. Avoided Redux/Zustand since the app state is
straightforward (todo list + auth status).

Trade-offs

SQLite over PostgreSQL: Chose SQLite for simplicity and portability. In production, I would use PostgreSQL with proper
connection pooling.

JWT Sessions over Database Sessions: Used NextAuth's JWT strategy instead of database sessions. Faster but requires
token rotation strategy for production.

Client-side fetching over Server Actions: Used traditional fetch in client components instead of Next.js Server
Actions for clarity and broader compatibility.

No Optimistic UI: Chose to wait for server confirmation before updating the UI. This is safer but slightly slower UX.
Would add optimistic updates in production.

No pagination: Implemented a simple "load all todos" approach. Would add pagination/infinite scroll for production
with many todos.

Basic error handling: Used toast-style notifications instead of a full error boundary system to keep it simple.

Setup Instructions

cd fullstack
npm install
cp .env.example .env
npx prisma generate && npx prisma db push && npx prisma db seed
npm run dev

Demo credentials: demo@example.com / password123

Build Status

✅ TypeScript strict mode - passing
✅ Production build - passing
✅ ESLint - passing
✅ All features working

---

<img width="605" height="547" alt="Screenshot 2026-02-27 172028" src="https://github.com/user-attachments/assets/4589ac1c-f3dd-4811-9faa-0177967870d0" />
<img width="887" height="633" alt="Screenshot 2026-02-27 171427" src="https://github.com/user-attachments/assets/7c90cb0c-e750-421f-899f-1873ee1ba07b" />
<img width="999" height="717" alt="Screenshot 2026-02-27 171931" src="https://github.com/user-attachments/assets/9ee9f288-5b0c-47bf-99bb-653d60b27209" />
<img width="950" height="585" alt="Screenshot 2026-02-27 171955" src="https://github.com/user-attachments/assets/5dae258c-40cb-4da2-998f-cb9276983f69" />



Submission by: Elmar Angao
Level: 3-5 Years Experience
Date: February 27, 2026