Clickbait Detector Frontend

🌟 Project Overview

Clickbait Detector is an innovative web application designed to help users identify and analyze potentially misleading news headlines. The frontend provides an intuitive interface for interacting with our machine learning-powered clickbait detection system.

🚀 Technologies Used

• Framework: Next.js
• UI Components: Shadcn UI
• Animations: Framer Motion
• Language: TypeScript
• Styling: Tailwind CSS

✨ Features

• Real-time clickbait headline analysis
• Sleek and responsive user interface
• Smooth animations and interactions
• Detailed prediction results
• Modern, mobile-friendly design

🔗 Backend Repository

Check out the backend application: Clickbait Detector Backend

🌐 Live API Endpoint

https://living-madella-gedeapriana-2f6e9d4d.koyeb.app/

📦 Installation

Prerequisites

• Node.js 16+
• npm or yarn

Steps

1. Clone the repository

git clone https://github.com/gdapriana/clickbait-detector-frontend.git
cd clickbait-detector-frontend

2. Install dependencies

npm install
# or
yarn install

3. Run the development server

npm run dev
# or
yarn dev

4. Open http://localhost:3000 in your browser

🖥️ Building for Production

npm run build
# or
yarn build

🗂️ Project Structure

/src
├── app/          # Next.js routes
├── components/   # Reusable UI components
└── lib/          # Utility functions 

🎨 UI Components

Utilizes Shadcn UI for consistent and accessible design components:

• Responsive layouts
• Interactive form elements
• Modular and customizable UI kit

🌈 Animations

Powered by Framer Motion to create:

• Smooth page transitions
• Engaging interactive elements
• Subtle and meaningful animations

🤖 How It Works

1. User enters a news headline
2. Frontend sends the headline to the backend API
3. Machine learning model analyzes the text
4. Results are displayed with prediction probability

🛡️ Contributing

Interested in contributing?

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

🔍 Support

For any questions or issues, please open an issue in the GitHub repository.

👥 Developed By

A passionate team of developers dedicated to creating intelligent web solutions.