Emoji Feedback Collector

A slick feedback collection system. It allows users to provide quick comments. The app features a sleek animated interface and stores all feedback data, including some geolocation (beta), in a `sqlite` database freely provided by [Turso](https://turso.io). There's also a version that stores all data locally in a `.json` file.

🚀 Demo

Colors are off in the .gif due to compression.

Live demo: emoji-feedback.remcostoeten.com

Configuration

The Emoji Feedback Collector can be customized through various configuration options:

Environment-based Configuration

• ENABLE_LOCAL_STORAGE: Set to 'true' to enable local storage functionality.
• USE_DATABASE: Set to 'true' to use database storage instead of local storage.

Emoji Bar Configuration

• HIDE_AUTOMATICALLY: When set to true, the feedback bar will automatically shift down and lower its opacity after a certain time to prevent annoyance.
• BAR_POSITION: Can be set to 'top' or 'bottom' to determine the position of the feedback bar. Default is 'bottom'.

Emoji Options

The feedback emojis can be customized. Current options are:

• 😍 (love it)
• 🔥 (DOPE!)
• 💩 (its shit)
• 🤮 (sickening)

Timing Configuration

• TIME_TO_SHOW_FEEDBACK_FORM: Set to 5000 milliseconds (5 seconds) by default. This determines how long the feedback form is shown.
• RATE_LIMIT_INTERVAL: Set to 24 hours in milliseconds. This limits how often a user can submit feedback.

Pagination

• DEFAULT_ITEMS_PER_PAGE: Set to 10. This determines the number of reviews shown per page in the feedback visualization.

To modify these settings, adjust the values in the config.ts file.

🧐 Features

The initial storing in JSON local version only is on the branch json-version

# cd root of the project
git checkout json-version

Check config.ts for the configuration of where the logs are stored. There are two variables which determine the location:

export const FOLDER_TO_WRITE_LOGS = 'src/core/logs'
export const LOG_FILENAME = 'feedback-log'

Resulting in src/core/logs/feedback-log.json. Once feedback is submitted, it should log in JSON. Check the console to see if this appears:

Feedback saved: {
  id: 1722976729403,
  opinion: '😍',
  feedback: 'hmmmmmmm',
  timestamp: '2024-08-06T20:38:49.403Z'
}
Updated feedback data: {
  feedbacks: [
    {
      id: 1722611293361,
      opinion: '🔥',
      feedback: 'heeeey',
      timestamp: '2024-08-02T15:08:13.361Z'
    },
    ...
  ]
}

The result/UI is quite a bit more outdated than the version on the main branch which has database storage.

Here are some of the project's features:

• 🎭 Emoji-based quick feedback
• 📝 Optional text feedback
• 🎨 Animated UI using Framer Motion
• 🌐 Internationalization support
• 💾 Local storage of feedback data or cloud database storage
• 📊 Feedback data visualization page

🛠️ Installation Steps:

Contact me if you really can't figure it out.

💻 Built with

Technologies used in the project:

• React 19
• NextJS 15
• TypeScript
• Tailwind CSS
• Framer Motion
• Server actions
• i18next
• ShadCN
• Drizzle ORM
• Turso SQLite

xxx Remco Stoeten. A star would be appreciated.