Tweet-Sentiment-Analysis Tailwind Templates

Tweet Sentiment Analysis

A real-time sentiment analysis tool for tweets, built with Next.js, TypeScript, and Tailwind CSS. This project uses Natural Language Processing (NLP) to analyze the sentiment of tweets and classify them as Positive, Negative, or Neutral.

✨ Tweet Sentiment Analysis

A real-time sentiment analysis tool for tweets, built with Next.js, TypeScript, and Tailwind CSS. This project uses Natural Language Processing (NLP) to analyze the sentiment of tweets and classify them as Positive, Negative, or Neutral.

šŸš€ Features

  • Real-Time Sentiment Analysis: Analyze tweet sentiments instantly using NLP models.
  • Modern UI/UX: Clean, responsive, and interactive interface with Framer Motion animations.
  • Live Twitter Data: Fetches real-time tweets using the Twitter API.
  • Charts & Insights: Displays sentiment trends with Recharts visualization.
  • Dark Mode: A sleek dark mode UI for better user experience.
  • Type Safety: Built with TypeScript for better reliability.

āš™ļø Tech Stack

  • Framework: Next.js 14
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Animations: Framer Motion
  • State Management: Zustand
  • API Integration: Twitter API v2
  • Data Visualization: Recharts
  • Sentiment Analysis: Natural.js / VADER / Hugging Face API
  • Deployment: Vercel

šŸ“‚ Project Structure

tweet-sentiment-analysis/  
│   ā”œā”€ā”€ package.json          # Project dependencies & scripts  
│   ā”œā”€ā”€ tsconfig.json         # TypeScript configuration  
│   ā”œā”€ā”€ vite.config.ts        # Vite configuration  
│   ā”œā”€ā”€ public/               # Static assets (favicon, images, etc.)  
│   ā”œā”€ā”€ src/                  # Main source code  
│   │   ā”œā”€ā”€ App.tsx           # Root component  
│   │   ā”œā”€ā”€ main.tsx          # Vite entry point  
│   │   ā”œā”€ā”€ index.css         # Global styles  
│   │   ā”œā”€ā”€ types.ts          # TypeScript types  
│   │   ā”œā”€ā”€ vite-env.d.ts     # Vite environment types  
│   │   ā”œā”€ā”€ components/       # Reusable components  
│   │   │   ā”œā”€ā”€ TweetCard.tsx    # Component for displaying tweets  
│   │   │   ā”œā”€ā”€ TweetInput.tsx   # Input box for analyzing tweets  
│   │   ā”œā”€ā”€ services/         # API calls and utilities  
│   │   │   ā”œā”€ā”€ sentiment.ts  # Sentiment analysis logic  
│   │   │   ā”œā”€ā”€ twitter.ts    # Twitter API integration  
│   │   ā”œā”€ā”€ hooks/            # Custom hooks (if any)  
│   │   ā”œā”€ā”€ context/          # Global state management  
│   │   ā”œā”€ā”€ assets/           # Images, icons, etc.  
│   ā”œā”€ā”€ node_modules/         # Dependencies  
│   ā”œā”€ā”€ .gitignore            # Files to ignore in Git  
│   ā”œā”€ā”€ .env.local            # Environment variables  

Ā©ļø Getting Started

  1. Clone the repository:

    git clone https://github.com/yashumak/Tweet-Sentiment-Analysis.git
    
  2. Install dependencies:

    npm install
    # or
    yarn install
    
  3. Create a .env.local file in the root directory and add your environment variables:

    NEXT_PUBLIC_TWITTER_BEARER_TOKEN=your_twitter_api_key
    NEXT_PUBLIC_HUGGINGFACE_API_KEY=your_huggingface_api_key
    
  4. Run the development server:

    npm run dev
    # or
    yarn dev
    
  5. Open the server:

    http://localhost:3000
    

Environment Variables

  • NEXT_PUBLIC_TWITTER_BEARER_TOKEN: Twitter API key
  • NEXT_PUBLIC_HUGGINGFACE_API_KEY: Hugging Face API key (if using NLP models)

āš™ļø Customization

  1. UI Styling: Update tailwind.config.ts for theme customization.
  2. Sentiment Model: Modify the NLP model in utils/sentiment.ts.
  3. Tweet Fetching: Adjust API parameters in services/twitter.ts.

šŸ™ˆ Sentiment Categories

  • Positive: Tweets with happy, optimistic words.
  • Neutral: Tweets with balanced or unclear sentiment.
  • Negative: Tweets expressing sadness, anger, or frustration.

Responsive Design

This is fully responsive with breakpoints for:

  • Mobile: < 640px
  • Tablet: 640px - 1024px
  • Desktop: > 1024px

šŸ“œ Scripts

  • npm run dev: Start development server
  • npm run build: Build for production
  • npm run start: Start production server
  • npm run lint: Run ESLint

Yash Umak

Top categories

Loading Svelte Themes