Listly

Listly is a modern, premium web application designed for seamless item exploration and list management. Built with a focus on aesthetics and user experience, it leverages the latest web technologies to provide a smooth, interactive interface.

🚀 Features

• Premium UI/UX: A visually stunning interface with glassmorphism, smooth animations (Framer Motion), and a curated color palette.
• Authentication: Secure user login and registration powered by NextAuth.js.
• Dynamic Home Page:
  • Hero Section: Interactive entry point.
  • Stats & Features: Clear overview of platform capabilities.
  • Testimonials & FAQ: Building trust and providing quick support.
• Item Discovery: Browse items through a responsive grid of elegant cards.
• Detailed View: Access comprehensive information for any specific item.
• Responsive Design: Optimized for everything from mobile phones to high-resolution desktops.
• Dark Mode Support: Seamlessly switch between themes for comfortable viewing.

🛠️ Tech Stack

• Framework: Next.js (App Router)
• Styling: Vanilla CSS with Tailwind CSS
• Components: Radix UI (Primitives)
• Animations: Framer Motion
• Auth: NextAuth.js
• Icons: Lucide React

🏁 Setup & Installation

Prerequisites

• Node.js (v18.x or later)
• npm, yarn, pnpm, or bun

Step-by-Step Guide

1. Clone the repository:

   git clone <repository-url>
   cd listly

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env file in the root directory and add any necessary environment variables (e.g., NextAuth secret, API endpoints).

4. Run the development server:

   npm run dev

5. Open the app: Navigate to http://localhost:3000 in your browser.

🗺️ Route Summary

Route	Description
/	Home Page: Interactive landing page with feature overviews.
/login	Login: Secure user authentication.
/register	Registration: New user account creation.
/items	Item List: Browse all available items.
/items/[id]	Item Details: Detailed information for a specific item.

📖 Feature Explanations

• Authentication System: Utilizes NextAuth with CredentialsProvider for secure, session-based authentication. Forms are built with modern validation patterns.
• Component-Driven Home Page: The landing page is composed of modular, reusable components like Stats, FAQ, and Testimonials, ensuring maintainability and a consistent design language.
• Dynamic Routing: Leverages Next.js dynamic routes (/items/[id]) to fetch and display specific item data efficiently.
• Advanced Animations: Uses framer-motion for page transitions and micro-interactions, making the app feel alive and responsive.