A web application for ranking items using a merge sort algorithm.
- Install dependencies:
npm install
- Copy
.env.example
to.env.local
and fill in your environment variables:
cp .env.example .env.local
- Run the development server:
npm run dev
-
Push your code to a GitHub repository
-
Connect your repository to Vercel:
- Go to Vercel
- Click "New Project"
- Import your GitHub repository
-
Configure environment variables in Vercel:
- Go to Project Settings > Environment Variables
- Add the following variables for each environment (Production/Preview):
# Production environment NEXT_PUBLIC_API_URL=https://api.your-domain.com # Your production API URL AIRTABLE_API_KEY=your_airtable_api_key AIRTABLE_BASE_ID=your_airtable_base_id AIRTABLE_TABLE_ID=your_airtable_table_id # Preview environments (optional, for PR previews) NEXT_PUBLIC_API_URL=https://api-staging.your-domain.com # Your staging API URL AIRTABLE_API_KEY=your_staging_airtable_api_key AIRTABLE_BASE_ID=your_staging_base_id AIRTABLE_TABLE_ID=your_staging_table_id
-
Git Integration:
- Production deployments are automatically triggered when pushing to the main branch
- Preview deployments are created for each Pull Request
- Development environment uses your local
.env.local
file
-
Environment Behavior:
- Production (main branch): Uses production environment variables
- Preview (Pull Requests): Uses preview environment variables
- Development (local): Uses
.env.local
variables
-
Automatic Deployments:
- Vercel automatically deploys your application
- Each environment gets its own URL:
- Production:
your-app.vercel.app
- Preview:
your-app-git-pr-XX-username.vercel.app
- Development:
localhost:3000
- Production:
src/app/
- Next.js application codecomponents/
- React componentsapi.ts
- API client functionspage.tsx
- Main application page
api/
- Backend API codeindex.py
- FastAPI applicationsuparank.py
- Ranking logic
- Add items with title and description
- Compare items in pairs
- Keyboard navigation (left/right arrows)
- Visual feedback for selections
- Persistent rankings in Airtable
- Reset ranking session
- Create a new Airtable base
- Create a table named "Items" with the following fields:
- Title (Single line text)
- Description (Long text)
- Score (Number)
- Get your Airtable API key:
- Go to your Airtable account
- Under API section, generate a new API key if you don't have one
- Get your Base ID:
- Open your Airtable base
- Click "Help" -> "API Documentation"
- Your base ID will be in the URL:
airtable.com/[BASE_ID]/api/docs
-
Copy
.env.example
to.env
:cp .env.example .env
-
Fill in your Airtable credentials in
.env
:AIRTABLE_TOKEN=your_api_key_here AIRTABLE_BASE_ID=your_base_id_here NEXT_PUBLIC_API_URL=http://localhost:8000
-
Install Python dependencies:
python -m venv .venv source .venv/bin/activate # On Windows: .venv\Scripts\activate pip install -r requirements.txt
-
Install Node.js dependencies:
npm install
-
Start the Python API server:
npm run dev:api
-
In a new terminal, start the Next.js frontend:
npm run dev
-
Open http://localhost:3000 in your browser
- Add items to rank through the web interface
- Compare items one by one
- View the final rankings sorted by score
MIT