Product Roadmap Voting App

Overview

Open-source product roadmap app that can be shared publicly with your users to collect valuable feedback. Users can upvote/downvote on features, add comments, request for new features. Keep your users in the loop with workflows notifying them when a feature is ready. The app’s frontend is built with Remix and the backend is built with Rowy (a lowcode platform for Firebase).

Demo

Explore a live demo of the roadmap app

Features

• Get feedback on your roadmap from public user groups or communities
• Upvote and downvote
• Comments
• Customizable categories: In progress, Next, Needs feedback, Release ..
• Open-source, flexible and fully free
• Optionally, comes with an in-app feedback widget for open ended feeature requests or feeback
• CMS UI with ability to add any automation or workflows with Rowy

Setup Guide

Full setup instructions video available here

Step 1: Setup backend template

The backend for the roadmap app is setup on Firebase and managed via Rowy which is a lowcode platform for Firebase. Rowy gives you a Table UI to manage your the data for your roadmap app along with getting all the backend cloud functions for managing the roadmap app setup in one click.

Don't worry if you are not familiar with Firebase, Rowy will guide you through the entire process.

1. Create an account on Rowy and create a workspace for the Roadmap app
2. Create a new project by connecting it to Firebase - step by step video
3. Create a new table from "Roadmap app" template
4. Now you can manage your app’s data on Rowy’s CMS for Firestore. Add the initial set of data to be displayed on the roadmap app i.e. your product’s features list, their description, target release date, category etc.

Step 2: Setup frontend template

Deploy the roadmap app’s frontend to Vercel using the deploy button. Add the following environment variables. Instructions on how to configure them are available on the GitHub repo.

One click deploy to Vercel 👇

Add the following environment variables to your app on Vercel

• CLIENT_FIREBASE_WEB_API_KEY – Add your Firebase project's web API key. Get it from your Firebase project here
• SERVER_FIREBASE_SERVICE_ACCOUNT – Generate a Firebase admin sdk service account JSON and add that to your config by following this link to your Firebase project
• COLLECTION – Name of the Firestore collection that stores the roadmap data. Default to roadmap
• TABLE_ID – Name of the Rowy Table ID. Default to roadmap
• SESSION_SECRET – Optional setup a session secret
• FEEDBACK_FIN_WEBHOOK_URL – Optional If you want to add a feedback widget to your roadmap app, add the webhook URL setup using FeedbackFin

Step 3: That's it 🎉

Vercel gives you a hosted app domain or create customized URL. Make sure to add this domain URL to list of authorized domains in your Firebase project. Now you are all set to share this URL with your users and start gathering votes/feedback on your product roadmap.

Contribution and development guide

If you would like to contribute to this project, then follow this development setup guide.

To run your app locally, make sure your project's local dependencies are installed.

1
npm install

Then, start the app's development server.

1
npm run dev

Open your roadmap app on http://localhost:3000