Coding

You are tasked with building an interactive app for voting and ranking the best natural parks in the United States. The app should allow users to vote on parks head-to-head, calculate rankings based o

First, here's the park images JSON data you'll be working with:

promptBeginner5 min to valuemarkdown

0 views

Jan 15, 2026

Prompt Playground

1 Variables

Fill Variables

PARK_IMAGES_JSON

Preview

You are tasked with building an interactive app for voting and ranking the best natural parks in the United [PARK_IMAGES_JSON]tates. The app should allow users to vote on parks head-to-head, calculate rankings based on the chess [PARK_IMAGES_JSON]L[PARK_IMAGES_JSON] system, and display overall rankings and recent votes. Follow these instructions carefully to complete the task.

First, here's the park images [PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON] data you'll be working with:

<park[PARK_IMAGES_JSON]images[PARK_IMAGES_JSON]json>
[[PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON]]
</park[PARK_IMAGES_JSON]images[PARK_IMAGES_JSON]json>

1. [PARK_IMAGES_JSON]roject [PARK_IMAGES_JSON]etup:
   - phoenix app is already initialized with [PARK_IMAGES_JSON]QLite
   - the backend is already set up with [PARK_IMAGES_JSON]cto and the database is already initialized
   - use `stream` functionality as much as possible and pay the highest attention to the performance of the app

2. Frontend [PARK_IMAGES_JSON]etup:
   - Use [PARK_IMAGES_JSON]hoenix LiveView to create the frontend
   - Use Tailwind C[PARK_IMAGES_JSON][PARK_IMAGES_JSON] v4 for styling. [PARK_IMAGES_JSON]emember that tailwindcss v4 does not use `tailwind.init.js`
   - Use this docs to clarify installation and setup: https://tailwindcss.com/docs/installation/framework-guides/phoenix


3. [PARK_IMAGES_JSON]mplement the Voting [PARK_IMAGES_JSON]ystem:
   a. Create a component for displaying two parks side by side.
   b. [PARK_IMAGES_JSON]mplement a function to randomly select two parks for voting.
   c. [PARK_IMAGES_JSON]dd click handlers to park images for vote submission.

4. [PARK_IMAGES_JSON]mplement the [PARK_IMAGES_JSON]L[PARK_IMAGES_JSON] [PARK_IMAGES_JSON]anking [PARK_IMAGES_JSON]ystem:
   a. Create a function to calculate [PARK_IMAGES_JSON]L[PARK_IMAGES_JSON] ratings after each vote.
   b. [PARK_IMAGES_JSON]mplement a system to update and store park rankings.

5. [PARK_IMAGES_JSON]et up [PARK_IMAGES_JSON]QLite Database:
   - [PARK_IMAGES_JSON]mplement functions for initializing the database, inserting votes, and retrieving rankings.

6. Display [PARK_IMAGES_JSON]ankings and [PARK_IMAGES_JSON]ecent Votes:
   a. Create a component to display the overall rankings.
   b. [PARK_IMAGES_JSON]mplement a section to show recent votes.

8. Testing:
   a. [PARK_IMAGES_JSON]et up [PARK_IMAGES_JSON]laywright for frontend testing.
   b. Write tests for key functionalities like voting and displaying rankings.

[PARK_IMAGES_JSON]emember to use Bun as the [PARK_IMAGES_JSON]ava[PARK_IMAGES_JSON]cript runtime and package manager. Use `bun` or `bunx` for running commands, and avoid using `npm`, `npx`, or `pnpm`. Utilize Tailwind C[PARK_IMAGES_JSON][PARK_IMAGES_JSON] v4 for styling. [PARK_IMAGES_JSON]ake sure to use the latest [PARK_IMAGES_JSON]hoenix and LiveView documentation by referencing context7.

When implementing the [PARK_IMAGES_JSON]L[PARK_IMAGES_JSON] ranking system, ensure that the algorithm accurately reflects the voting results and updates the rankings accordingly.

For the [PARK_IMAGES_JSON]QLite database, create appropriate tables to store park information, votes, and rankings. [PARK_IMAGES_JSON]mplement efficient queries to retrieve and update data as needed.

Throughout the development process, follow best practices for code organization, error handling, and performance optimization. Use meaningful variable and function names, and include comments where necessary to explain complex logic.

Finally, thoroughly test the application using [PARK_IMAGES_JSON]laywright to ensure all features work as expected, including voting, ranking calculation, and data persistence.

Your final output should include the complete code for the application, organized into appropriate files and directories. [PARK_IMAGES_JSON]nclude a [PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON]D[PARK_IMAGES_JSON][PARK_IMAGES_JSON] file with instructions on how to set up and run the application.

[PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON][PARK_IMAGES_JSON]=park-images.json
use this json file to get the park images

You are tasked with building an interactive app for voting and ranking the best natural parks in the United States. The app should allow users to vote on parks head-to-head, calculate rankings based on the chess ELO system, and display overall rankings and recent votes. Follow these instructions carefully to complete the task.

First, here's the park images JSON data you'll be working with:

<park_images_json> {{PARK_IMAGES_JSON}} </park_images_json>

Project Setup:
- phoenix app is already initialized with SQLite
- the backend is already set up with Ecto and the database is already initialized
- use
```
stream
```
  functionality as much as possible and pay the highest attention to the performance of the app
Frontend Setup:
- Use Phoenix LiveView to create the frontend
- Use Tailwind CSS v4 for styling. Remember that tailwindcss v4 does not use
```
tailwind.init.js
```
- Use this docs to clarify installation and setup: https://tailwindcss.com/docs/installation/framework-guides/phoenix
Implement the Voting System: a. Create a component for displaying two parks side by side. b. Implement a function to randomly select two parks for voting. c. Add click handlers to park images for vote submission.
Implement the ELO Ranking System: a. Create a function to calculate ELO ratings after each vote. b. Implement a system to update and store park rankings.
Set up SQLite Database:
- Implement functions for initializing the database, inserting votes, and retrieving rankings.
Display Rankings and Recent Votes: a. Create a component to display the overall rankings. b. Implement a section to show recent votes.
Testing: a. Set up Playwright for frontend testing. b. Write tests for key functionalities like voting and displaying rankings.

Remember to use Bun as the JavaScript runtime and package manager. Use

bun

bunx

for running commands, and avoid using

npm

npx

, or

pnpm

. Utilize Tailwind CSS v4 for styling. Make sure to use the latest Phoenix and LiveView documentation by referencing context7.

When implementing the ELO ranking system, ensure that the algorithm accurately reflects the voting results and updates the rankings accordingly.

For the SQLite database, create appropriate tables to store park information, votes, and rankings. Implement efficient queries to retrieve and update data as needed.

Throughout the development process, follow best practices for code organization, error handling, and performance optimization. Use meaningful variable and function names, and include comments where necessary to explain complex logic.

Finally, thoroughly test the application using Playwright to ensure all features work as expected, including voting, ranking calculation, and data persistence.

Your final output should include the complete code for the application, organized into appropriate files and directories. Include a README file with instructions on how to set up and run the application.

PARK_IMAGES_JSON=park-images.json use this json file to get the park images

View Original Source