This is a T3 Stack project built for an interview challenge, featuring an Address Book application that fetches and displays user data with interactive filtering, sorting, and search capabilities.
🚀 Live Demo: https://interview-eight-rosy.vercel.app/
The goal is to create an Address Book app that:
- Fetches user data from https://dummyjson.com/users
- Displays users in a clean, structured layout
- Enables interactive filtering, sorting, and search functionality
- Emphasizes type safety, clean architecture, and maintainability
- React - UI framework
- Next.js - Full-stack React framework
- TypeScript - Type safety throughout
- tRPC - End-to-end typesafe APIs
- Prisma - Database ORM
- SQLite - Database
- Tailwind CSS - Styling
- Zod - Runtime type validation
- ✅ Fetches and validates user data from external API
- ✅ Clean, responsive card-based layout
- ✅ Search functionality (name and email)
- ✅ Filtering by gender and other user properties
- ✅ Sorting by name, age, and other fields
- ✅ Loading and error state handling
- ✅ Type-safe data validation with Zod
- ✅ Clean component architecture
- ✅ Responsive design
- Clone the repository:
git clone https://github.com/andrashejj/interview
cd interview- Install dependencies:
pnpm install- Set up the database:
pnpm db:push- Start the development server:
pnpm devOpen http://localhost:3000 to view the application.
src/
├── app/
│ ├── _components/
│ │ ├── challenge.tsx # Challenge description component
│ │ └── address-book/ # Address book components
│ └── page.tsx # Main page
├── server/
│ └── api/ # tRPC API routes
└── trpc/ # tRPC configuration
To learn more about the T3 Stack, take a look at the following resources:
- Documentation
- Learn the T3 Stack — Check out these awesome tutorials
You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!
This application is deployed on Vercel. For more deployment options, see the T3 deployment guides.