I built a canyoning app without writing code: my experience creating a PWA with AI

Introduction

Like many mountain enthusiasts, I wanted a minimalist site where I could find canyon information and consult routes without a signal, rather than jumping between ten websites. Wikiloc provided the tracks and Descente-Canyon the technical details, but nothing brought them together in a way that met my needs out in the mountains.

So I decided to build it myself. Here is the result: https://saturdaysai.github.io/barranquismo/

I wanted a simple website with filters, maps and offline access to saved data. This time I decided to work with AI and write none of the code by hand. I chose two collaborators:

ChatGPT, as a technical and UX consultant.
Codex (integrated into Visual Studio Code), as my coding assistant.

My goal was to see how far one person could get in building an app from scratch with AI, using careful planning, clear instructions and a review of the results.

Phase 1. Planning and choosing the stack

Before writing a line of code, I needed a solid plan. My first interaction was with ChatGPT, to define the technological architecture.

Key prompt for ChatGPT:
“I want to build a website with a canyon inventory. Users should be able to filter by difficulty and view maps. Most importantly, it must work offline. I do not want a backend and plan to deploy it on GitHub Pages. What technology stack would you recommend, and how should I structure the project?”

The AI recommended Vite and React for the interface, together with a service worker to cache resources and serve them offline. I now had a technical direction for the project.

Phase 2. Initialization of the project in Visual Studio Code

I opened a new folder (canyoningApp) and launched Codex in agent mode from Visual Studio Code. For this project I used GPT-5 Codex Preview. I adapted the prompt ChatGPT had given me to include pauses where I could review each stage and give feedback before continuing.

Phase 3. Design of the base structure

The next step was to define the navigation structure before loading data or designing the interface.

Prompt from ChatGPT for Codex:

We will develop a static progressive web app with details of each canyon, required equipment and external Wikiloc links for the approach and return routes. Help me follow this workflow step by step:

Define the concept: set out the purpose, key features and technology stack (React and Vite or plain JavaScript).

Plan the architecture: folder structure and localStorage for user preferences, with no remote database or authentication. Everything must run on the client and be suitable for deployment to GitHub Pages.

Build the project: create the initial code with explanatory comments, and guide me through each stage (structure, home page, canyon details, map, local storage, filters, design and PWA features).

Document the process: include short explanations, commented code and notes at each stage so I can later write an article or tutorial.

Prepare deployment: explain how to configure Vite and the application paths for GitHub Pages. Requirements:

All persistence must be done with localStorage.

Do not use any backend or login.

Modular, clean and commented code.

Use English in the code, but Spanish in the explanations.

Ask for validation before advancing to each phase.

The app must be responsive and light. Start with phase 1 (concept) and wait for me before moving on to the next phase. When I say 'continue', you move on to the next one.

Generate the React component folder structure and the code for five navigation tabs and a nested detail route.

Codex then asked several questions to check its understanding before continuing:

I asked ChatGPT for a second opinion on Codex’s responses and reviewed the results before continuing:

The result was a modular skeleton of components with routes, pages and a professional folder structure. Codex took care of creating the initial files, dependencies and configuration of the project automatically.

Codex started creating folders and files. During the process it requested permission to run some system and debugging commands; I reviewed the proposed actions before approving them.

After a few minutes, Codex generated the entire folder structure, dependencies and scripts.

The best part was that the project compiled without errors. That felt incredible, although I still needed to test it in the browser. I did not know how to start the local server, so I asked Codex:

I could run it from an external console or from Visual Studio Code’s integrated terminal. I used the latter:

Once the app was running, I opened it in the browser to check that it worked:

The page worked. In less than 30 minutes I already had a page ready!

Phase 4. Upload the app to GitHub Pages

I wanted to host the app on GitHub Pages, so I asked Codex to guide me through the process:

If you do not yet have a GitHub account, you can create one and then create a repository. The repository does not have to share the local folder’s name. For a GitHub Pages project site, the important setting is Vite’s base path, which must match the repository name, such as /barranquismo/.

After creating an empty repository on GitHub, run these commands from your local project’s root folder. Replace TU_USUARIO and NOMBRE_REPOSITORIO with your username and repository name:

If we do not have Git we will have to install it, you can download it here. once installed:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/TU_USUARIO/NOMBRE_REPOSITORIO.git
git push -u origin main

The local project was now on GitHub. For later changes, I reviewed the modified files, staged them with git add, created a descriptive commit and ran git push. A clear history makes changes easier to understand and earlier versions easier to recover.

With the repository ready, I asked Codex how to configure deployment to GitHub Pages:

I followed the instructions:

Then I opened the app published on GitHub Pages:

As we can see, the initial version is functional but the data in JSON format is missing and the aesthetics need to be improved.

Phase 5. Collecting data and importing it into JSON

Collecting details of every canyon by hand was tedious and could introduce transcription errors. I asked Codex to help automate the task:

It responded with a script.

I went a step further: I asked it to generate and run the script, then save the data in the JSON file that had previously contained fictional sample canyons.

The biggest challenge was the information itself: sources used different formats and descriptions for each attribute, so the collected data was inconsistent. I needed a cleaning process. Automating extraction did not guarantee correct or current information: I still needed to check it against the sources before using it to plan a trip.

Phase 6. Data normalization with AI

The canyon data came from several sources (Descente-Canyon, Wikiloc, and others) and used different formats. I needed a Node.js script to clean and standardise them.

Prompt for Codex:
“I have several JSON files containing canyon data. I need a script to read them all, standardise names, extract coordinates and harmonise difficulty levels. Export a single final dataset.json file.”

Codex generated an automated cleanup script. The result: a file dataset.json consolidated, which would serve as the application's local database.

Phase 7. Creation of the React interface

With the dataset ready, it was time to display it. Instead of writing components by hand, I asked Codex to create them.

Prompt 1:
“Create a component that imports 'dataset.json'. Include a search box and dynamic filters for difficulty and area. Display the results in ‘BarrancoCard’ cards linked to a detail view.”

Prompt 2:
“Create a ‘FichaDetalle’ component showing canyon details: maximum abseil length, estimated times, coordinates and links.”

Codex generated the complete React structure and the necessary components. He even added an interactive map with Leaflet after another specific prompt.

Phase 8. Adding offline “memory”

The app needed to remember the user’s ratings and checklist.

Prompt for Codex:
“In my app, users should be able to rate a canyon with stars and add it to a ‘Checklist’. This data must persist even offline. Use localStorage.”

Codex implemented local data storage and retrieval. We then configured the service worker to provide offline access to cached resources. That gave me an installable PWA, although content had to be loaded beforehand: external links and uncached maps still required a connection.

Phase 9. UX/UI design improvement with ChatGPT

The functionality was ready, but the interface needed a professional touch. I returned to ChatGPT, this time as a UX designer specialized in outdoor environments.

Key prompt:
“I am designing this app for mountain use, in strong sunlight and glare. Give me UX/UI recommendations and a detailed prompt for Codex from the perspective of a professional designer.”

# PROJECT CONTEXT

I am developing a React and Vite PWA called “Barranquismo”, designed for use in the mountains and other outdoor settings.

Users will consult it in real field conditions: with intense sunlight, reflections, gloves, and limited connection.

The app shows canyon details, including difficulty, equipment, estimated times and Wikiloc links.

It has no backend - everything works on the client (localStorage, local JSON) and will be deployed to GitHub Pages.

# OBJECTIVE

I want you to act as a professional UX/UI designer specialized in outdoor environments, accessibility and functional design.

Your task is to improve the visual design and user experience of the application so that it is beautiful, readable and professional, without losing simplicity or performance.

Give me detailed design suggestions and, if possible, code snippets (JSX, CSS or Tailwind) ready to implement.

# WHAT I WANT TO ACHIEVE

– A beautiful and coherent interface, worthy of a professional product.

– High readability under the sun: large texts, clear fonts and strong contrast.

– Visually attractive components but easy to render in React (no heavy dependencies).

– Clear visual hierarchy (well-defined colors, sizes and spaces).

– Outdoor style, natural and modern (inspired by apps like Komoot, AllTrails or Wikiloc).

– Comfortable touch interaction (large buttons and immediate visual feedback).

– Full mobile support (a mobile-first layout that adapts to tablet screens).

– That respects good accessibility practices (WCAG 2.1).

– A professional colour palette and typography suited to direct sunlight and outdoor use.

# KEY POINTS YOU SHOULD COVER

1. Typography

– Use readable sans-serif fonts (e.g. Inter, Poppins, Nunito, Roboto Flex).

– Sizes: minimum 16–18px for text, 22–28px for titles.

– Appropriate letter-spacing and line-height for readability in glare.

2. Colors and contrast

– High contrast (WCAG AAA) between background and text.

– Propose a professional palette inspired by nature (blues, beige, dark greens, warm grays).

– Include a high-contrast or “outdoor” mode.

3. Components and buttons

– Large touch areas (minimum 44x44px).

– Rounded buttons with soft shadow or defined edge.

– Visual feedback when clicking (change color, opacity or elevation).

– Maintain consistency in icons, shadows and radii.

4. Visual design

– Functional minimalism: without being overloaded, but visually pleasing.

– A clear layout: a fixed header, well-separated canyon cards and easy-to-access details.

– Balanced use of color for hierarchy: titles, primary buttons, secondary actions.

5. Global style

– Draw on Material Design and Fluent UI, adapted for outdoor use.

– Subtle animations (fade, scale) only if they do not affect performance.

– Soft edges, natural shadows, wide spaces.

– Consistency between Home, Detail and Checklist.

6. PWA and performance

– Load only the fonts needed and define a consistent colour palette.

– Don't use heavy images, use SVG or vector icons.

– Optimize for offline mode (minimal CSS and assets).

7. Accessibility

– A minimum contrast ratio of 4.5:1 for normal text; aim for 7:1 where possible to improve outdoor readability.

– Do not rely on colour alone: combine it with shapes or labels.

– Accessible control labels and native HTML buttons; use ARIA where needed.

# EXPECTED RESPONSE FORMAT

– ✅ List of UX/UI recommendations ordered by priority (high, medium, low).

– 🎨 Proposal for a professional color palette and typography.

– 💻 Concrete examples of CSS or Tailwind to implement.

– 🧠 Brief justification for each suggestion (why it improves visibility, aesthetics or usability).

– An optional text mockup or wireframe showing the ideal main-screen structure.

# TECHNOLOGIES

– React + Vite

– Tailwind or CSS Modules

–LocalStorage

– GitHub Pages (Static PWA)

# FINAL INSTRUCTION

Act like a professional UX/UI designer.

Don't give theory: give me proposals ready to apply with specific code or styles.

Balance beauty, usability and outdoor functionality.

The result should look like it was made by an expert designer, but optimized for React and lightweight PWAs.

The result was a comprehensive guide: readable fonts such as Inter and Poppins, high contrast, large buttons, a clear visual hierarchy and a style inspired by Komoot and AllTrails. Codex applied the suggestions, making the interface clearer and more consistent; accessibility still needed to be tested.

Phase 10. Final deployment and testing

After requesting these changes, I watched Codex update the code in real time. Within a few minutes, I had a version closer to what I wanted:

I started the app again by running the command in the terminal:

I opened the browser and…

The page I had created was now ready and functional. After verifying the changes, I ran a new git push and waited for the GitHub Pages deployment to finish. If the browser still showed an older version, I checked the deployment and the service worker cache. Clearing site data can also erase saved preferences and ratings, so it is worth checking what will be lost first.

I now had a working, lightweight app, with AI-generated code and decisions reviewed by me.

Conclusions and learnings

Developing this app was about more than programming: it meant learning to communicate with AI. In this project, my work focused on defining problems, guiding the system and validating the results.

Clear prompts help. Good context guides code generation, but it does not replace testing.
Human validation remains essential. AI makes suggestions, but you decide what to accept or adjust.
The hybrid workflow (ChatGPT + Codex) is tremendously efficient for personal projects or prototypes.
GitHub Pages and PWA features were a good fit for this project without a backend.

Resources and links

GitHub repository: https://github.com/SaturdaysAI/barranquismo
Technologies: React + Vite
AI used: ChatGPT (UX and technical assistant) and Codex (code generation)
Key libraries: Leaflet, Workbox, Tailwind CSS
Deployment: GitHub Pages (Static PWA)
Web: https://saturdaysai.github.io/barranquismo/

About the author

José Ramón García
A Computer Engineering student with a passion for applying technology to the outdoors. He combines his professional experience in the food industry with software projects and outdoor apps. At www.saturdays.ai he explores how to use artificial intelligence to support human creativity and productivity in real environments.