ThefeedbackHub is a web application built with Next.js, Tailwind CSS, and Drizzle ORM. It provides a user-friendly interface for managing and interacting with projects, including:
- Creating new projects
- Viewing a list of existing projects
- Accessing project instructions
- Managing user subscriptions
- Project Creation: Users can create a project and receive an embeddable code to integrate into their websites.
- Feedback Collection: Website visitors can easily submit feedback along with ratings.
- Feedback Management: All feedback submitted through the embedded widget is viewable in the project's dashboard, with ratings displayed for easy review.Users can sort feedback by rating (from lower to higher) and search for specific feedback entries to streamline the review process.
- UI Components: Includes essential form components such as buttons, inputs, labels, popovers, and text areas.
- Tailwind CSS Styling: Provides a responsive and modern design using Tailwind CSS.
- Supabase Integration: Uses Supabase RPC for feedback submission and database management.
- Popover Interaction: The feedback form is displayed inside a popover triggered by a feedback button.
User Authentication and Authorization:
- Secure user authentication using Clerk.
- Role-based access control for different project functionalities.
Project Management:
- Create new projects with custom details.
- View a list of projects with filtering and sorting options.
- Access detailed project information, including instructions.
Subscription Management:
- Subscribe to the service to access premium features.
- Manage existing subscriptions and make payments.
Database:
- Data persistence using PostgreSQL and Drizzle ORM.
- Secure database connection and management.
Front-End Technologies:
- Next.js for server-side rendering and efficient front-end development.
- Tailwind CSS for rapid UI design and styling.
- Lucide React for icons and visual elements.
-
Clone the repository:
git clone https://github.com/Rahulhanje/feedbackHub.git
-
Navigate to the project directory:
cd sass_dashboard
-
Install dependencies using npm:
npm install
-
Set up environment variables:
- Create a
.env
file in the root directory. - Add the following environment variables:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key> NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<your-stripe-publishable-key> STRIPE_SECRET_KEY=<your-stripe-secret-key> DATABASE_URL=<your-database-url>
- Create a
-
Run the development server:
npm run dev
Once the project is set up, you can access the application at http://localhost:3000
.
Creating a New Project:
- Login as a user.
- Navigate to the "Create Project" page.
- Fill in the required project details and submit.
Viewing Projects:
- Login as a user.
- Navigate to the "Dashboard" page.
- View a list of all projects with filtering and sorting options.
Accessing Project Instructions:
- Login as a user.
- Select a project from the project list.
- Navigate to the "Instructions" page.
Managing Subscriptions:
- Login as a user.
- Navigate to the "Payments" page.
- Manage existing subscriptions, make payments, or subscribe to new plans.
For any questions or issues, please contact:
- Email: rahulhanje0.7@gmail.com