Monsterpedia is a web application built with Next.js that allows users to manage a list of monsters. Users can view monster details, add new monsters, edit existing monsters, and delete monsters.
- Monster List: View a list of all monsters with their names and images.
- Monster Details: Click on a monster to view detailed information.
- Add Monster: Add new monsters to the list with a form to input all necessary details.
- Edit Monster: Modify existing monster information using a pre-filled form.
- Delete Monster: Remove monsters from the list.
- User Authentication: Securely sign in and sign out using NextAuth.
- Next.js: A React framework for building server-side rendered and static web applications.
- React: A JavaScript library for building user interfaces.
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- Radix UI: A set of unstyled, accessible UI primitives for building high-quality user interfaces.
- Shadcn/ui: A collection of re-usable components built on top of Radix UI and Tailwind CSS.
- NextAuth.js: An authentication library for Next.js applications.
- Zod: A TypeScript-first schema declaration and validation library.
- React Hook Form: A library for managing forms in React with ease.
- React Toastify: A library for displaying toast notifications.
- Lucide React: A library of consistent, simple and beautiful icons.
The application follows a modern and clean design with the following style guidelines:
- Primary Color:
#2563eb(Blue) - Secondary Color:
#f3f4f6(Light Gray) - Font: System Default
- Component Library: Shadcn/ui