Person Search is a Next.js application that demonstrates how to implement a search functionality using Next.js Server Actions and react-select's AsyncSelect component. Users can search for people from a pre-populated list and view detailed information about the selected person.
- Asynchronous search functionality
- Server-side filtering of user data
- Detailed user information display
- Responsive design using Tailwind CSS
- Accessibility-focused UI components from Radix UI
- Custom fonts (Geist Sans and Geist Mono)
- Dark mode support
- Single-file implementation for easy understanding and deployment
- Next.js 14.2.11 - React framework for building web applications
- React 18 - JavaScript library for building user interfaces
- TypeScript - Typed superset of JavaScript
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Collection of accessible, unstyled UI components
- Lucide React - Library of open source icons
- React Hook Form - Performant, flexible forms library
- Zod - TypeScript-first schema declaration and validation library
- React Select - Flexible Select Input control for ReactJS
- Next Themes - Abstraction for themes in Next.js projects
- Recharts - Composable charting library built on React components
- date-fns - Modern JavaScript date utility library
- Embla Carousel - Lightweight carousel library
- Sonner - Opinionated toast component for React
- Node.js 14.6.0 or newer
- npm
- Clone the repository:
git clone https://github.com/gocallum/person-search.git
cd person-search
- Install the dependencies:
npm install
- Create a
.env.local
file in the root directory and add any necessary environment variables.
npm run dev
person-search/ ├── app/ │ └── page.tsx ├── public/ ├── .eslintrc.json ├── next.config.js ├── package.json ├── README.md ├── tailwind.config.ts └── tsconfig.json
- The application uses a simulated server action to filter user data based on the input query.
- The
AsyncSelect
component from react-select is used to provide an asynchronous search experience. - When a user is selected, their details are displayed in a
UserCard
component. - The UI is built using Radix UI components and styled with Tailwind CSS.
- The application uses Next.js App Router for routing and layout management.
- Dark mode is supported using the next-themes library.
- All components (Navbar, Footer, UserSearch, and UserCard) are implemented in a single file for simplicity.
- To modify the pre-populated user data, edit the
users
array in thepage.tsx
file. - To change the styling, you can modify the Tailwind classes in the components.
- To add or remove fields from the user data, update the user objects in the
users
array and modify theUserCard
component accordingly.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is open source and available under the MIT License.
- Next.js team for the excellent framework
- Vercel for the deployment platform
- Radix UI for the accessible UI components
- All contributors and supporters of the open-source libraries used in this project
Callum Bir - @callumbir
Project Link: https://github.com/gocallum/person-search