fixes upvote buttons being smaller when text is long

.env.local.example

@@ -1,6 +1,17 @@
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
 
-NEXT_PUBLIC_AUTH0_DOMAIN=
-NEXT_PUBLIC_AUTH0_CLIENT_ID=
-NEXT_PUBLIC_AUTH0_ADMIN_ID=
+GITHUB_ID=
+GITHUB_SECRET=
+NEXT_PUBLIC_ADMIN_EMAIL=
+
+# Secret key
+# generate one here: https://generate-secret.vercel.app/32
+NEXTAUTH_SECRET=
+
+# Mandatory next-auth URL for localhost
+NEXTAUTH_URL=http://localhost:3000
+
+# if you want to receive notifications on slack add webhook url
+# https://api.slack.com/apps
+WEBHOOK_URL=

.gitignore

@@ -7,6 +7,6 @@ public/workbox*
 .DS_Store
 out/
 .env
-.env.local
+.env
 
 .vercel

README.md

@@ -1,65 +1,129 @@
 # Roadmap Voting App
 
-![](https://github.com/upstash/roadmap/blob/main/ss.png)
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/app.png" width="100%">
 
-You can deploy Roadmap application yourself and ask your users to vote for your roadmap features. See the [live example](https://roadmap.upstash.com).
+You can deploy Roadmap application yourself and ask your users to vote for your
+roadmap features. See the [live example](https://roadmap.upstash.com).
 
-In this version, the user should sign up (via Auth0) 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.
+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](https://github.com/vercel/next.js/tree/canary/examples/with-redis).
+If you prefer the one without authentication, see
+the [old version](https://github.com/vercel/next.js/tree/canary/examples/with-redis)
+.
 
 ## Docs
 
-- [Set up](#set-up)
-- [Configuring Upstash](#configuring-upstash)
-- [Configuring Auth0](#configuring-auth0)
-- [Deploy on Vercel](#deploy-your-local-project)
+1) [Set up project](#1-set-up-project)
+2) [Configuring Environment Variables](#2-configuring-environment-variables)
+3) [Set up Database](#3-set-up-upstash-redis)
+4) [Set up user authentication with next-auth](#4-set-up-user-authentication-with-next-auth)
+5) [Run Your Project](#5-run-your-project)
+6) [Let's make ourselves admin](#6-lets-make-ourselves-admin)
+7) [Deploy to Vercel](#7-deploy-to-vercel)
 
-## Set up
+## `1` Set up project
 
-First clone the repo. Copy the `.env.local.example` file to `.env.local` (which will be ignored by Git):
+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):
 
 ```bash
 cp .env.local.example .env.local
 ```
 
-## Configuring Upstash
+## `3` Set up Upstash Redis
 
-1. Go to the [Upstash Console](https://console.upstash.com/) and create a new database
+Go to the [Upstash Console](https://console.upstash.com/) 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.
+`UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` find the variables in
+the database details page in Upstash Console.
+
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/upstash.png" width="600">
+
+## `4` Set up user authentication with next-auth
+
+We will use the **[next-auth](https://next-auth.js.org/)** library for
+authentication. This example is preconfigured to use GitHub OAuth.
+
+To set up GitHub for authentication:
+
+1) Go to [GitHub Developer Settings](https://github.com/settings/apps) on
+   GitHub.
 
-## Configuring Auth0
+2) Click on **"New GitHub App"**.
 
-1. Go to the [Auth0 dashboard](https://manage.auth0.com/) and create a new application of type **Single Page Web Applications**
-2. Go to the settings page of the application
-3. Configure the following settings:
-   - **Allowed Callback URLs**: Should be set to `http://localhost:3000/` when testing locally or typically to `https://myapp.com/` when deploying your application.
-   - **Allowed Logout URLs**: Should be set to `http://localhost:3000/` when testing locally or typically to `https://myapp.com/` when deploying your application.
-4. Save the settings.
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/github-2.png" width="600">
 
-#### Auth0 environment
+3) Name your **"GitHub App name"**
 
-- `NEXT_PUBLIC_AUTH0_DOMAIN`: Can be found in the Auth0 dashboard under `settings`.
-- `NEXT_PUBLIC_AUTH0_CLIENT_ID`: Can be found in the Auth0 dashboard under `settings`.
-- `NEXT_PUBLIC_AUTH0_ADMIN_ID`: This is the **user_id** of the admin user. First run your application and sign-in yourself. Then find your **user_id** in the Auth0 console, **"User Management > Users"** page.
+4) Add your **"Homepage URL"** (or a placeholder, if you don't have a website
+   yet).
 
-## Replace Your Logo
+5) For the **"Callback URL"** field, put http://localhost:3000.
 
-Copy your logo image to `public` folder. Then edit `components/Header.tsx`.
+> 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).
+
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/github-5.png" width="600">
+
+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"**
+
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/github-7.png" width="600">
+
+8) Copy the client secret you generated and paste it under the `GITHUB_SECRET`
+   value in your .env file
+
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/github-8.png" width="500">
+
+9) Copy the **Client ID** and paste it under the `GITHUB_ID` value in your .env
+   file
+
+<img src="https://github.com/upstash/roadmap/blob/main/public/doc/github-9.png" width="500">
+
+## `5` Run Your Project
+
+In the project folder, run
+
+```
+next dev
+```
 
-## Run Your Project
+## `6` Let's make ourselves admin
 
-In the project folder, run:
-`npm install`
-`next dev`
+Only admin users can delete and release content.
 
-## Deploy Your Project
+`NEXT_PUBLIC_ADMIN_EMAIL`: Enter your Github email address here.
 
-To deploy your project to Vercel, run `vercel` in the project folder.
+## `7` Deploy to Vercel
 
-Or you can push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=upstash-roadmap).
+First, create a new Github repository and push your local changes.
 
-**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+[Deploy it to Vercel](https://vercel.com/docs/concepts/git#deploying-a-git-repository)
+. Ensure you add
+all [Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables)
+in your .env file to Vercel during the import process.

components/CardNewSkeleton.tsx → components/card-active-loading.tsx

@@ -1,4 +1,4 @@
-export default function CardNewSkeleton() {
+export default function CardActiveLoading() {
   return (
     <article
       className="flex items-center space-x-4 text-zinc-100