A modern feedback collection tool that allows users to create projects and collect valuable feedback from their customers through an embeddable widget.
- 🔐 Authentication: Secure login with email/password and Google OAuth
- 📊 Project Management: Create and manage multiple projects
- 💬 Feedback Collection: Embeddable widget for collecting customer feedback
- 🤖 AI-Powered Insights: Generate AI summaries of feedback using Google's Gemini
- 📈 Analytics: View, search, and export feedback data
- 🎨 Modern UI: Clean, responsive design with dark mode support
- ⚡ Rate Limiting: Built-in protection against abuse
- Frontend: Next.js 15, React 18, TypeScript
- Styling: Tailwind CSS, Radix UI components
- Authentication: NextAuth.js
- Database: PostgreSQL with Prisma ORM
- AI: Google Generative AI (Gemini)
- Deployment: Vercel-ready
- Node.js 18+
- PostgreSQL database
- Google OAuth credentials (optional)
- Google AI API key
-
Clone the repository
git clone <repository-url> cd feedwall
-
Install dependencies
npm install
-
Set up environment variables Create a
.env.localfile in the root directory:# Database DATABASE_URL="postgresql://username:password@localhost:5432/feedwall" # NextAuth NEXTAUTH_SECRET="your-secret-key" NEXTAUTH_URL="http://localhost:3000" # Google OAuth (optional) GOOGLE_ID="your-google-client-id" GOOGLE_SECRET="your-google-client-secret" # Google AI GOOGLE_API_KEY="your-google-ai-api-key"
-
Set up the database
npx prisma migrate deploy npx prisma generate
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
feedwall/
├── app/ # Next.js app directory
│ ├── actions/ # Server actions
│ │ ├── Ai.ts # AI summary functionality
│ │ ├── createProject.ts
│ │ ├── deleteFeedback.ts
│ │ ├── deleteProject.ts
│ │ ├── getFeedback.ts
│ │ └── getProject.ts
│ ├── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── feedback/ # Feedback submission
│ │ └── user/ # User data
│ ├── docs/ # Documentation pages
│ ├── feedbacks/ # Feedback management
│ ├── projects/ # Project management
│ └── signin/ # Authentication pages
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ └── ... # Feature components
├── lib/ # Utility libraries
│ ├── auth.ts # Authentication configuration
│ ├── db.ts # Database connection
│ ├── rate-limit.ts # Rate limiting utility
│ └── utils.ts # General utilities
├── prisma/ # Database schema and migrations
└── middleware.ts # Next.js middleware
The application includes built-in rate limiting to prevent abuse:
- Feedback Submission: 20 requests per minute per IP
- Authentication: 30 requests per minute per IP
- AI Summaries: 10 requests per hour per user
- Project Creation: 15 requests per hour per user
Rate limits are enforced at the middleware level for API routes and in server actions for user-specific operations.
Sign in with email/password or Google OAuth.
Rate Limit: 10 requests/minute per IP
Submit feedback for a project.
Request Body:
{
"name": "string",
"email": "string",
"feedback": "string",
"rating": 1-5,
"projectid": number
}Rate Limit: 5 requests/minute per IP
Get current user information.
Rate Limit: 10 requests/minute per IP
<body>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' };
</script>
<script
type="module"
src="https://your-domain.com/feedback-widget.js"
></script>
<feedback-widget projectId="123" websiteName="Your Site"></feedback-widget>
</body>import { useEffect } from 'react';
function FeedbackWidget() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://your-domain.com/feedback-widget.js';
script.type = 'module';
document.body.appendChild(script);
}, []);
return <feedback-widget projectId="123" websiteName="Your Site" />;
}id: Primary keyemail: Unique email addresspassword: Hashed password (for email auth)
id: Primary keyname: Project namedescription: Project descriptionurl: Project URLuserId: Foreign key to UserscreatedAt: Creation timestamp
id: Primary keyname: Submitter nameemail: Submitter emailrating: 1-5 star ratingfeedback: Feedback textprojectid: Foreign key to ProjectscreatedAt: Submission timestamp
- Connect your repository to Vercel
- Set environment variables in the Vercel dashboard
- Deploy - Vercel will automatically build and deploy
-
Build the application:
npm run build
-
Start the production server:
npm start
-
Set up your database and configure environment variables
| Variable | Description | Required |
|---|---|---|
DATABASE_URL |
PostgreSQL connection string | Yes |
NEXTAUTH_SECRET |
Secret for JWT signing | Yes |
NEXTAUTH_URL |
Application URL | Yes |
GOOGLE_ID |
Google OAuth client ID | No |
GOOGLE_SECRET |
Google OAuth client secret | No |
GOOGLE_API_KEY |
Google AI API key | Yes |
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Commit your changes:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
- Rate limiting prevents abuse
- Input validation with Zod schemas
- Secure password hashing with bcrypt
- CORS headers properly configured
- Environment variables for sensitive data
This project is licensed under the MIT License - see the LICENSE file for details.
For support, email support@feedwall.com or create an issue in the repository.