Skip to content

upstash/roadmap

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 release also delete any feature request.

If you prefer the one without authentication, see the old version .

Docs

  1. Set up project
  2. Configuring Environment Variables
  3. Set up Database
  4. Set up user authentication with next-auth
  5. Run Your Project
  6. Let's make ourselves admin
  7. 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

Copy the .env.local.example file to .env.local (which 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 environment

UPSTASH_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-auth

We 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".

  1. Name your "GitHub App name"

  2. Add your "Homepage URL" (or a placeholder, if you don't have a website yet).

  3. 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).

  1. If the active field under "Webhook" is checked, uncheck it. Now, click on " Create Github App"

  2. Once your app is created, you should see the following screen. Click on " Generate a new client secret"

  1. Copy the client secret you generated and paste it under the GITHUB_SECRET value in your .env file

  1. Copy the Client ID and paste it under the GITHUB_ID value 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_EMAIL: Enter your Github email address here.

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.