Roadmap Voting App
You can deploy Roadmap application yourself and ask your users to vote for your roadmap features. See the live example.
In this version, the user should sign up to add a new feature and vote them up.
Also you can configure yourself as admin, to set a feature request as
also delete any feature request.
If you prefer the one without authentication, see the old version .
- Set up project
- Configuring Environment Variables
- Set up Database
- Set up user authentication with next-auth
- Run Your Project
- Let's make ourselves admin
- Deploy to Vercel
1 Set up project
First, open up your terminal and navigate and run the following:
npx create-next-app --example https://github.com/upstash/roadmap roadmap
This will create a new folder in your current directory called roadmap. Then, you can navigate into the folder, install the dependencies, and launch the app:
cd roadmap && npm i
2 Configuring Environment Variables
.env.local.example file to
will be ignored by Git):
cp .env.local.example .env.local
3 Set up Upstash Redis
Go to the Upstash Console and create a new database
UPSTASH_REDIS_REST_TOKEN find the variables in
the database details page in Upstash Console.
4 Set up user authentication with next-auth
We will use the next-auth library for authentication. This example is preconfigured to use GitHub OAuth.
To set up GitHub for authentication:
Go to GitHub Developer Settings on GitHub.
Click on "New GitHub App".
Name your "GitHub App name"
Add your "Homepage URL" (or a placeholder, if you don't have a website yet).
For the "Callback URL" field, put http://localhost:3000.
Since GitHub only allows one callback URL per app, we have to create separate apps for localhost and production (hence the "dev" name in step 3).
If the active field under "Webhook" is checked, uncheck it. Now, click on " Create Github App"
Once your app is created, you should see the following screen. Click on " Generate a new client secret"
- Copy the client secret you generated and paste it under the
GITHUB_SECRETvalue in your .env file
- Copy the Client ID and paste it under the
GITHUB_IDvalue in your .env file
5 Run Your Project
In the project folder, run
npm run dev
6 Let's make ourselves admin
Only admin users can delete and release content.
NEXT_PUBLIC_ADMIN_EMAILS: Enter your Github emails here, separated by commas.
7 Deploy to Vercel
First, create a new Github repository and push your local changes.
Deploy it to Vercel . Ensure you add all Environment Variables in your .env file to Vercel during the import process.