Refactor: migrate frontend to Next.js App Router + Tailwind + shadcn

[YundoRocket]

Summary

This Draft PR introduces a modernization of the Predictoor frontend:

• Migrates from Next.js Pages Router → App Router
• Adds TailwindCSS and shadcn/ui as a unified design system
• Cleans up contexts, providers and global state
• Simplifies the folder structure for maintainability
• Keeps all core flows working properly on mainnet (wallet connect, markets, subscription, etc.)

The goal of this refactor is not to change product logic, but to provide a more modern and scalable foundation for future development.

---

Changes

Architecture

• Replaced pages/ with the new app/ directory
• Added app/layout.tsx and app/providers.tsx
• Reorganized components into components/ and components/ui/ (shadcn)
• Updated global styling through TailwindCSS

UI/UX

• Migrated most UI components to shadcn/ui
• Improved layout consistency and readability
• Cleaned up tables, tooltips, forms and wrappers

Logic / Flows

• All core flows tested on mainnet and functioning:
  • Wallet connection
  • Epoch loading
  • Market selection
  • Subscription
• No contract logic changed — strictly frontend refactor

---

Status

• App Router migration
• TailwindCSS + shadcn/ui integration
• Mainnet flows working
• Structure cleanup
• Final UI polish for main page
• "Transaction preview" popup before actions
• Additional small UX refinements

---

Live Demo

The refactored frontend is deployed here for easy testing:
🔗 https://predictoor-frontend.vercel.app/

---

💡 Optional design exploration (NOT part of this PR)

To help visualize potential future UX improvements, here’s a small design exploration I experimented with.
This is not included in this PR, just shared as inspiration if the team feels interested in simplifying the prediction flow UI.
A card-based layout focused on a single prediction feed, inspired by modern DeFi dashboards (e.g., PancakeSwap Predictions).

Preview:

If this direction seems worthwhile, I’d be happy to open a separate issue or design proposal to discuss it before implementing anything.

---

Notes

This is opened as a Draft PR to make review and discussion easy.
Happy to split this work into smaller PRs or adjust naming/structure to better match the team’s conventions.

Thanks for taking the time to review!

[vercel]

@YundoRocket is attempting to deploy a commit to the Ocean Protocol Team on Vercel.

A member of the Team first needs to authorize it.

[KatunaNorbert]

Happy to see the contribution here, good job for looking into this and adding this updates, the changes are looking good for their purpose and the UI is nice.

Regarding merging this into our codebase and releasing it to production we consider that there are too many changes and the UI is also breaking some of the UI strategies we used from the start (one of them being that all the assets should be visible without scrolling) which prevents us to proceed with the merge. For this FE app, rather the UI updates, would focus more on the logical/functional side, to make data loading and display faster.

On the other hand, we encourage you to keep your on version of the predictoor UI running and implement all the UI changes or new features that you consider useful. Remember, our UI is just one way of seeing, understanding and interacting with the actual predictoor technology, there could be many other ways of showcasing it, each with their own strengths.

[YundoRocket]

Happy to see the contribution here, good job for looking into this and adding this updates, the changes are looking good for their purpose and the UI is nice.

Regarding merging this into our codebase and releasing it to production we consider that there are too many changes and the UI is also breaking some of the UI strategies we used from the start (one of them being that all the assets should be visible without scrolling) which prevents us to proceed with the merge. For this FE app, rather the UI updates, would focus more on the logical/functional side, to make data loading and display faster.

On the other hand, we encourage you to keep your on version of the predictoor UI running and implement all the UI changes or new features that you consider useful. Remember, our UI is just one way of seeing, understanding and interacting with the actual predictoor technology, there could be many other ways of showcasing it, each with their own strengths.

Thanks a lot for the clear feedback and for taking the time to review the work — really appreciate it.

I fully understand your position.
This refactor was indeed a large update, and it makes sense that Ocean prefers to keep the current UX scope and focus on performance/logical improvements rather than a broader UI or architecture migration at this stage.

I’ll leave this Draft PR open so the code and the optional design exploration remain available in case they become useful in the future, but I won’t continue iterating on this version since it isn’t aligned with the main direction of the official app.

Thanks again for the review and the guidance. 🙌
Happy to support the project in other ways if needed. 🙂