Back to Projects

Go-On - Chittagong Esports Platform

A modern esports platform serving the Chittagong esports community with interactive UI and seamless state management.

FREELANCEBuilt during: Full Stack Developer & System Architect
Tags -
Software ApplicationReactViteRedux ToolkitTailwind CSSReact RouterFramer MotionRadix UISwiperAxiosCloudinary
SourceLive Demo
Go-On - Chittagong Esports Platform Preview

Project Overview

Go-On is a modern esports platform serving the vibrant Chittagong gaming community. It provides a centralized hub for gamers to discover events, connect with fellow players, and engage with the local esports scene.

Built as a single-page application using React + Vite, the platform leverages Redux for state management with persistence, ensuring a seamless user experience across sessions.

The platform represents a commitment to growing the esports ecosystem in Chittagong, providing tools and features that enable community building, event discovery, and competitive gaming.

Key Features

  • Community Hub — Centralized platform for the Chittagong esports community to connect, share, and engage with fellow gamers and enthusiasts.
  • Interactive UI with Animations — Rich user interface powered by Framer Motion and Radix UI, providing smooth animations and interactive components for an immersive experience.
  • Event Discovery & Tournaments — Browse and discover esports events, tournaments, and gatherings happening within the Chittagong gaming community with real-time updates.
  • User Dashboard — Dedicated user panel where gamers can view upcoming tournaments, register for events, manage their team registrations, and track their participation history.
  • Tournament Registration — Users can directly register for esports tournaments, form teams, and submit registrations seamlessly through the platform.
  • Admin Dashboard — Comprehensive admin panel for managing the entire esports ecosystem including creating and launching tournaments, managing team registrations, and overseeing event operations.
  • Tournament Management — Admins can create, launch, and manage tournaments with full control over schedules, formats, team limits, and registration periods.
  • Team Registration Management — Admin can directly manage each team's registration in tournaments, including approvals, rejections, and roster management.
  • State Persistence — Redux Persist ensures user preferences and application state are maintained across browsing sessions for a consistent experience.
  • Responsive Design — Fully responsive interface built with Tailwind CSS, ensuring optimal viewing experience across all devices and screen sizes.
  • Image Management — Cloudinary integration for efficient image handling, uploading, and optimization across the platform.
  • Modern Tech Stack — Leverages cutting-edge technologies including Vite for fast builds, React 18 for performance, and Redux Toolkit for state management.

Technical Highlights

  • Vite + React 18 — Ultra-fast development server and build tool with React 18 features for optimal performance and developer experience.
  • Redux Toolkit with Persistence — Modern Redux implementation with RTK Query patterns and redux-persist for state management across sessions.
  • Tailwind CSS Utility-First — Utility-first CSS framework enabling rapid UI development with consistent styling and responsive design patterns.
  • Framer Motion Animations — Advanced animation capabilities providing fluid interactions and engaging user experiences throughout the platform.
  • Radix UI Components — Accessible, unstyled component primitives for building high-quality user interfaces with proper accessibility standards.
  • Cloudinary Integration — Seamless image handling with Cloudinary for uploading, optimization, and delivery of media assets.
  • Role-Based Access Control — Separate dashboards and functionalities for users and admins with proper route protection and authorization.

Challenges & Solutions

Challenge: Building a high-performance single-page application with smooth animations and interactions while maintaining fast load times and optimal user experience for the esports community.
Solution: Leveraged Vite's fast build system and code splitting capabilities, combined with React's concurrent features. Used Framer Motion for GPU-accelerated animations and implemented lazy loading for components and routes.
Result: A blazing-fast, interactive platform that provides a premium user experience with smooth animations and instant responses to user actions.
Challenge: Managing complex application state across multiple features while ensuring data persistence and consistency across user sessions.
Solution: Implemented Redux Toolkit with modular slices for different features, combined with redux-persist for automatic state persistence. Used RTK Query patterns for efficient API data fetching and caching.
Result: A robust state management system that maintains user context and preferences across sessions, providing a seamless experience for returning users.
Challenge: Implementing a dual-dashboard system with distinct functionalities for users and admins while maintaining clean separation and proper authorization.
Solution: Designed role-based routing with protected routes and conditional rendering. Created separate dashboard layouts and components for users and admins with Redux state managing user roles and permissions.
Result: A clear, secure separation between user and admin experiences with proper access controls and intuitive interfaces for each role.
Challenge: Ensuring smooth deployment and performance optimization while managing environment-specific configurations and dependencies.
Solution: Implemented proper deployment practices with Hostinger panel, configured environment variables for different deployment stages, and optimized build processes with Vite including tree-shaking, minification, and code splitting. Managed domain configuration and SSL setup through Hostinger control panel.
Result: Successful, stable deployment on Hostinger with optimal performance, secure SSL connection, and minimal load times for users across different regions.

Tech Stack Breakdown

frontend

React 18, Vite, Redux Toolkit, React Router

styling

Tailwind CSS, PostCSS, Autoprefixer

ui_libraries

Radix UI, Framer Motion, Swiper

state_management

Redux Toolkit, React-Redux, Redux Persist

media

Cloudinary

devops

Hostinger Panel, Git, CI/CD, Domain Management, SSL Configuration

tools

Axios, ESLint, Git, Postman