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 release
also delete any feature request.
If you prefer the one without authentication, see the old version .
1
Set up projectFirst, 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 VariablesCopy the .env.local.example
file to .env.local
(which
will be ignored by Git):
cp .env.local.example .env.local
3
Set up Upstash RedisGo to the Upstash Console and create a new database
Upstash environmentUPSTASH_REDIS_REST_URL
and UPSTASH_REDIS_REST_TOKEN
find the variables in
the database details page in Upstash Console.
4
Set up user authentication with next-authWe will use the next-auth library for authentication. This example is preconfigured to use GitHub OAuth.
To set up GitHub for authentication:
1) Go to GitHub Developer Settings on GitHub.
2) Click on "New GitHub App".
3) Name your "GitHub App name"
4) Add your "Homepage URL" (or a placeholder, if you don't have a website yet).
5) 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).
6) If the active field under "Webhook" is checked, uncheck it. Now, click on " Create Github App"
7) Once your app is created, you should see the following screen. Click on " Generate a new client secret"
8) Copy the client secret you generated and paste it under the GITHUB_SECRET
value in your .env file
9) Copy the Client ID and paste it under the GITHUB_ID
value in your .env
file
5
Run Your ProjectIn the project folder, run
npm run dev
6
Let's make ourselves adminOnly admin users can delete and release content.
NEXT_PUBLIC_ADMIN_EMAILS
: Enter your Github emails here, separated by commas.
7
Deploy to VercelFirst, 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.
Roadmap voting app for your project/product.
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 release
also delete any feature request.
If you prefer the one without authentication, see the old version .
1
Set up projectFirst, 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 VariablesCopy the .env.local.example
file to .env.local
(which
will be ignored by Git):
cp .env.local.example .env.local
3
Set up Upstash RedisGo to the Upstash Console and create a new database
Upstash environmentUPSTASH_REDIS_REST_URL
and UPSTASH_REDIS_REST_TOKEN
find the variables in
the database details page in Upstash Console.
4
Set up user authentication with next-authWe will use the next-auth library for authentication. This example is preconfigured to use GitHub OAuth.
To set up GitHub for authentication:
1) Go to GitHub Developer Settings on GitHub.
2) Click on "New GitHub App".
3) Name your "GitHub App name"
4) Add your "Homepage URL" (or a placeholder, if you don't have a website yet).
5) 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).
6) If the active field under "Webhook" is checked, uncheck it. Now, click on " Create Github App"
7) Once your app is created, you should see the following screen. Click on " Generate a new client secret"
8) Copy the client secret you generated and paste it under the GITHUB_SECRET
value in your .env file
9) Copy the Client ID and paste it under the GITHUB_ID
value in your .env
file
5
Run Your ProjectIn the project folder, run
npm run dev
6
Let's make ourselves adminOnly admin users can delete and release content.
NEXT_PUBLIC_ADMIN_EMAILS
: Enter your Github emails here, separated by commas.
7
Deploy to VercelFirst, 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.