Learn How Stuff is Built
Peek behind the curtain and see the magic (code) that powers modern digital experiences. Interactive demos and real code snippets reveal our technical craft.
React Native FitTrack App
Complete React Native fitness app with activity tracking, profile, and settings screens.
FitTrackApp.jsJavaScript
import React, {
useState,
useEffect
} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
TouchableOpacity
} from 'react-native';
import {
NavigationContainer
} from '@react-navigation/native';
import {
createBottomTabNavigator
} from '@react-navigation/bottom-tabs';
import {
Ionicons
} from '@expo/vector-icons';
import {
LineChart
} from 'react-native-chart-kit';
// Home Screen Component
function HomeScreen() {
const [activities, setActivities] =
useState([
{
id: 1,
type: 'Running',
time: '7:30 AM',
distance: '2.5 km'
},
{
id: 2,
type: 'Yoga',
time: '9:00 AM',
duration: '30 min'
},
{
id: 3,
type: 'Walking',
time: '6:30 PM',
distance: '1.8 km'
}
]);
const chartData = {
labels: [
'Mon', 'Tue', 'Wed',
'Thu', 'Fri', 'Sat', 'Sun'
],
datasets: [{
data: [
3000, 5200, 4800,
6000, 2900, 8000, 7200
]
}]
};
return (
<ScrollView style={styles.container}>
<View style={styles.welcomeCard}>
<Text style={styles.welcomeText}>
Welcome back, Alex!
</Text>
<Text style={styles.scoreText}>
Your fitness score: 85/100
</Text>
<View style={styles.progressBar}>
<View
style={[
styles.progressFill,
{ width: '85%' }
]}
/>
</View>
</View>
<Text style={styles.sectionTitle}>
Today's Activities
</Text>
{activities.map(activity => (
<TouchableOpacity
key={activity.id}
style={styles.activityCard}
>
<View style={styles.activityIcon}>
<Ionicons
name={
activity.type === 'Running'
? 'md-walk'
: activity.type === 'Yoga'
? 'body'
: 'footsteps'
}
size={20}
color="#fff"
/>
</View>
<View style={styles.activityDetails}>
<Text style={styles.activityTitle}>
{activity.type}
</Text>
<View style={styles.activityStats}>
<Text style={styles.activityTime}>
{activity.time}
</Text>
<Text style={styles.activityTime}>
{activity.distance ||
activity.duration}
</Text>
</View>
</View>
</TouchableOpacity>
))}
<Text style={styles.sectionTitle}>
Weekly Step Count
</Text>
<LineChart
data={chartData}
width={320}
height={180}
chartConfig={{
backgroundColor: '#2196f3',
backgroundGradientFrom:
'#2196f3',
backgroundGradientTo:
'#4fc3f7',
decimalPlaces: 0,
color: (opacity = 1) =>
`rgba(255, 255, 255,
${opacity})`,
labelColor: () =>
`rgba(255, 255, 255, 0.9)`,
}}
bezier
style={styles.chart}
/>
<Text style={styles.sectionTitle}>
Daily Statistics
</Text>
<View style={styles.statsContainer}>
<View style={styles.statCard}>
<Ionicons
name="footsteps"
size={24}
color="#2196f3"
/>
<Text style={styles.statValue}>
7,842
</Text>
<Text style={styles.statLabel}>
Steps
</Text>
</View>
<View style={styles.statCard}>
<Ionicons
name="flame"
size={24}
color="#2196f3"
/>
<Text style={styles.statValue}>
352
</Text>
<Text style={styles.statLabel}>
Calories
</Text>
</View>
<View style={styles.statCard}>
<Ionicons
name="water"
size={24}
color="#2196f3"
/>
<Text style={styles.statValue}>
1.2L
</Text>
<Text style={styles.statLabel}>
Water
</Text>
</View>
</View>
</ScrollView>
);
}Flutter E-commerce App
Modern Flutter e-commerce app with home, cart, and profile screens, featuring smooth navigation transitions.
e_commerce_app.dartDart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key})
: super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fashion Store',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor:
const Color(0xFFe53935),
brightness: Brightness.dark,
scaffoldBackgroundColor:
const Color(0xFF1a0000),
appBarTheme: const AppBarTheme(
backgroundColor:
Color(0xFF1a0000),
elevation: 0,
),
),
home: const MainScreen(),
);
}
}
class MainScreen extends StatefulWidget {
const MainScreen({Key? key})
: super(key: key);
@override
_MainScreenState createState() =>
_MainScreenState();
}
class _MainScreenState
extends State<MainScreen> {
int _currentIndex = 0;
final List<Widget> _screens = [
const HomeScreen(),
const CategoriesScreen(),
const CartScreen(),
const ProfileScreen(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedSwitcher(
duration:
const Duration(milliseconds: 300),
child: _screens[_currentIndex],
),
bottomNavigationBar:
BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.black87,
selectedItemColor:
const Color(0xFFe53935),
unselectedItemColor:
Colors.grey[600],
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home'
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Categories'
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
label: 'Cart'
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile'
),
],
),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key})
: super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Fashion Store'),
actions: [
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
],
),
body: SingleChildScrollView(
child: Padding(
padding:
const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
// Hero Banner
Stack(
children: [
Container(
height: 150,
decoration: BoxDecoration(
gradient:
const LinearGradient(
colors: [
Color(0xFFe53935),
Color(0xFFff5722)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius:
BorderRadius.circular(12),
),
padding:
const EdgeInsets
.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
const Text(
'Summer Collection',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight:
FontWeight.bold,
),
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton
.styleFrom(
backgroundColor:
Colors.white,
foregroundColor:
Color(0xFFe53935),
padding:
const EdgeInsets
.symmetric(
horizontal: 16,
vertical: 8,
),
),
child: const Text(
'Shop Now'
),
),
],
),
),
],
),
const SizedBox(height: 24),
const Text(
'Categories',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
const SizedBox(height: 12),
SizedBox(
height: 90,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
_buildCategoryItem(
'Shirts',
Icons.checkroom,
Color(0xFFe53935)
),
_buildCategoryItem(
'Pants',
Icons.accessibility_new,
Color(0xFFff5722)
),
_buildCategoryItem(
'Shoes',
Icons.crisis_alert,
Color(0xFFd32f2f)
),
_buildCategoryItem(
'Accessories',
Icons.watch,
Color(0xFFc62828)
),
],
),
),
const SizedBox(height: 24),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
const Text(
'Featured Products',
style: TextStyle(
fontSize: 18,
fontWeight:
FontWeight.bold,
color: Colors.white,
),
),
TextButton(
onPressed: () {},
child: Text(
'See All',
style: TextStyle(
color: Color(0xFFff3d00),
),
),
),
],
),
const SizedBox(height: 12),
GridView.builder(
shrinkWrap: true,
physics:
NeverScrollableScrollPhysics(),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount
(
crossAxisCount: 2,
childAspectRatio: 0.75,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemCount: 4,
itemBuilder: (context, index) {
return _buildProductCard();
},
),
],
),
),
),
);
}
Widget _buildCategoryItem(
String name,
IconData icon,
Color color) {
return Container(
margin: const EdgeInsets.only(
right: 12),
width: 80,
child: Column(
children: [
Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius:
BorderRadius.circular(12),
),
child: Icon(
icon,
color: color,
size: 30,
),
),
const SizedBox(height: 8),
Text(
name,
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
textAlign: TextAlign.center,
),
],
),
);
}
Widget _buildProductCard() {
return Container(
decoration: BoxDecoration(
color: Colors.black12,
borderRadius:
BorderRadius.circular(12),
border: Border.all(
color: Colors.white10,
),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xFFe53935)
.withOpacity(0.1),
borderRadius:
BorderRadius.only(
topLeft:
Radius.circular(12),
topRight:
Radius.circular(12),
),
),
child: Center(
child: Icon(
Icons.checkroom,
size: 80,
color: Colors.white70,
),
),
),
),
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Fashion T-Shirt',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
'$39.99',
style: TextStyle(
color: Color(0xFFff3d00),
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const SizedBox(height: 8),
Row(
children: [
Icon(
Icons.star,
size: 16,
color: Color(0xFFffc107),
),
Text(
' 4.8',
style: TextStyle(
color: Colors.white70,
),
),
],
),
],
),
),
],
),
);
}
}