V
Vladyslav Verkholiak

UX/UI Designer & Frontend Developer

Download CV
CAP Live Catalog Homepage view image
CAP Live Application Page
CAP Live Add Aplication Page Presentation
CAP Live Light Version Example

CAP Catalog - Telegram Apps and News Catalog Web App development

Development of a Multifunctional Catalog and News Portal for the CAP Ecosystem

This project is part of the Crypto Ads Platform (CAP) ecosystem, designed to help businesses attract audiences through Telegram and web platforms. This projects is a small part of work, is an catalog and news portal — that features Telegram mini-apps, user-contributed applications, and news about Crypto, Telegram Mini Apps, partnerships and updates.

Goals and Objectives:

  • Build a functional catalog for adding and managing Telegram mini-apps.
  • Create a news section for publishing updates and partnership announcements.
  • Ensure seamless synchronization of user authorization between the web version and Telegram MiniApps.
  • Enhance SEO and performance by migrating the app from React to Next.js.

⚙️Unique, Modern Backend Architecture:

  • Enhanced the existing dedicated backend for broader functionality using Next.js' built-in API routes and Server Actions for smaller local tasks.
  • This hybrid approach provided flexibility and scalability, allowing the application to efficiently handle both global and user-specific data.
  • App uses RTK Query for client side data managing, and NextJS for Server Side.

Some feautures of the application:

This application is also unique in that it utilizes the different types of rendering provided in NextJS in its different parts, SSG, ISR and CSR.

🛠 Catalog Functionality

  • ✍️ Users can add, edit, and manage applications and mini-apps if they authenticated.
  • 💬 Commenting system to foster user interaction.
  • ⭐ Reviews and rating system.
  • Full integration of Telegram-based authentication along with traditional login by credentials. If users access the app via the WEB version, they need to authorize with Telegram, if via TG Mini App, they will be authorized automatically.

🔄 Telegram Integration

  • Automatic synchronization of user authentication between the web platform and Telegram MiniApps.
  • Smooth user experience across both web and Telegram platforms.

🚀 SEO and Performance Improvements

  • Migration from React to Next.js for faster page loads and better search engine indexing.
  • Generating metadata for each APP project.
  • Structural optimization to drive organic traffic growth.

Project feautures

Feautures implemented in this project

Project category

👩‍💻 Development

Tech stack

nextjsNext.js
tailwindcssTailwind CSS
reactjsReact
  • SSG, ISR and CSR rendering
  • Separated and local, small NextJS Backend
  • RTK Query for Client Side
  • Telegram Authentication
  • Integratiion with Telegram MiniApps
CAP Catalog Mobile version