Skitto (Revamp)
Sife Mahmud Simon
esc
F1
F2
F3
F4
F5
F6
F7
F8
F8
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
—_
+ =
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
fn
control
option
command
command
option
Skitto (Revamp)
project by Grameenphone
Tech Stack
Frontend
Next.js
React
Framer Motion
Chakra UI
Tailwind CSS
Google Analytics
Backend
Tools
SwiperJS
Framer Motion
SCSS
Company: SKITTO
Type:
Status:
Year:
Duration:
Overview
The project is a redevlopment of Skitto website with a focus on modern design, feature rich content and enhanced user experience. The revamped website features a sleek and intuitive interface built with Tailwind CSS and Material UI, providing users with a seamless browsing experience. The core architecture is built with Next.js, utilizing the Next.js App Router for efficient routing and optimization. Additionally, revalidating caching is integrated for seamless data management, allowing for real-time updates and efficient data fetching.
Features
- Google analytics implementation for user behavior tracking
- Custom animations and transitions using Framer Motion
- Flexiplan like custom pack maker
- Plan listing & OTT platform
Challenges
- Making the design responsive and accessible across devices
- Animation trigger and myltiple design change logic from a single component
- Optimizing performance while maintaining rich animations and dynamic content
- Server side & Client side rendering optimization for better SEO and user experience
- Carousels custom design
Results
- Achieved a 40% increase in user engagement metrics post-launch
- Improved UX for users
- OTT platform visits increased by 25% within the first month of launch
Technologies Used
- Next.js for server-side rendering and efficient routing
- SwiperJS for carousels
- Material UI for a modern and responsive user interface
- Tailwind CSS for custom styling and design flexibility
- Axios for handling API requests and responses
- Framer Motion for animation
Responsibilities
- Built dashboard UI
- Integrated GraphQL APIs
Architecture
Type: client-server & server-side
Pattern: component-based + API-driven
Data Flow: Api → Render logic → Server/Client → UI
Integrations
- API (Dynamic Rendering)
- Google Analytics for user behavior tracking
Performance Optimizations
- Optimized heavy response using dynamic imports
- Lazy-loaded big data mapped components
Testing
- Manual testing for tracking flows
- API response validation
User Roles
User: View Packs offer & OTT offers
Corporate: Content Manage + dashboard
Admin: Manage corporate roles