Last active
December 12, 2025 11:36
-
-
Save burakorkmez/2df88764ee2ba45672af1b98efd7737a to your computer and use it in GitHub Desktop.
React Native Wallet App
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/auth.styles.js | |
| import { StyleSheet } from "react-native"; | |
| import { COLORS } from "../../constants/colors"; | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| padding: 20, | |
| justifyContent: "center", | |
| }, | |
| illustration: { | |
| width: "100%", | |
| height: 310, | |
| resizeMode: "contain", | |
| }, | |
| title: { | |
| fontSize: 32, | |
| fontWeight: "bold", | |
| color: COLORS.text, | |
| marginVertical: 15, | |
| textAlign: "center", | |
| }, | |
| input: { | |
| backgroundColor: COLORS.white, | |
| borderRadius: 12, | |
| padding: 15, | |
| marginBottom: 16, | |
| borderWidth: 1, | |
| borderColor: COLORS.border, | |
| fontSize: 16, | |
| color: COLORS.text, | |
| }, | |
| errorInput: { | |
| borderColor: COLORS.expense, | |
| }, | |
| button: { | |
| backgroundColor: COLORS.primary, | |
| borderRadius: 12, | |
| padding: 16, | |
| alignItems: "center", | |
| marginTop: 10, | |
| marginBottom: 20, | |
| }, | |
| buttonText: { | |
| color: COLORS.white, | |
| fontSize: 18, | |
| fontWeight: "600", | |
| }, | |
| footerContainer: { | |
| flexDirection: "row", | |
| justifyContent: "center", | |
| alignItems: "center", | |
| gap: 8, | |
| }, | |
| footerText: { | |
| color: COLORS.text, | |
| fontSize: 16, | |
| }, | |
| linkText: { | |
| color: COLORS.primary, | |
| fontSize: 16, | |
| fontWeight: "600", | |
| }, | |
| verificationContainer: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| padding: 20, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| }, | |
| verificationTitle: { | |
| fontSize: 24, | |
| fontWeight: "bold", | |
| color: COLORS.text, | |
| marginBottom: 20, | |
| textAlign: "center", | |
| }, | |
| verificationInput: { | |
| backgroundColor: COLORS.white, | |
| borderRadius: 12, | |
| padding: 15, | |
| marginBottom: 16, | |
| borderWidth: 1, | |
| borderColor: COLORS.border, | |
| fontSize: 16, | |
| color: COLORS.text, | |
| width: "100%", | |
| textAlign: "center", | |
| letterSpacing: 2, | |
| }, | |
| // 🔴 Error styles | |
| errorBox: { | |
| backgroundColor: "#FFE5E5", | |
| padding: 12, | |
| borderRadius: 8, | |
| borderLeftWidth: 4, | |
| borderLeftColor: COLORS.expense, | |
| marginBottom: 16, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| width: "100%", | |
| }, | |
| errorText: { | |
| color: COLORS.text, | |
| marginLeft: 8, | |
| flex: 1, | |
| fontSize: 14, | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // constants/colors.js | |
| const coffeeTheme = { | |
| primary: "#8B593E", | |
| background: "#FFF8F3", | |
| text: "#4A3428", | |
| border: "#E5D3B7", | |
| white: "#FFFFFF", | |
| textLight: "#9A8478", | |
| expense: "#E74C3C", | |
| income: "#2ECC71", | |
| card: "#FFFFFF", | |
| shadow: "#000000", | |
| }; | |
| const forestTheme = { | |
| primary: "#2E7D32", | |
| background: "#E8F5E9", | |
| text: "#1B5E20", | |
| border: "#C8E6C9", | |
| white: "#FFFFFF", | |
| textLight: "#66BB6A", | |
| expense: "#C62828", | |
| income: "#388E3C", | |
| card: "#FFFFFF", | |
| shadow: "#000000", | |
| }; | |
| const purpleTheme = { | |
| primary: "#6A1B9A", | |
| background: "#F3E5F5", | |
| text: "#4A148C", | |
| border: "#D1C4E9", | |
| white: "#FFFFFF", | |
| textLight: "#BA68C8", | |
| expense: "#D32F2F", | |
| income: "#388E3C", | |
| card: "#FFFFFF", | |
| shadow: "#000000", | |
| }; | |
| const oceanTheme = { | |
| primary: "#0277BD", | |
| background: "#E1F5FE", | |
| text: "#01579B", | |
| border: "#B3E5FC", | |
| white: "#FFFFFF", | |
| textLight: "#4FC3F7", | |
| expense: "#EF5350", | |
| income: "#26A69A", | |
| card: "#FFFFFF", | |
| shadow: "#000000", | |
| }; | |
| export const THEMES = { | |
| coffee: coffeeTheme, | |
| forest: forestTheme, | |
| purple: purpleTheme, | |
| ocean: oceanTheme, | |
| }; | |
| // 👇 change this to switch theme | |
| export const COLORS = THEMES.forest; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/create.styles.js | |
| import { StyleSheet } from "react-native"; | |
| import { COLORS } from "../../constants/colors"; | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| header: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| padding: 20, | |
| borderBottomWidth: 1, | |
| borderBottomColor: COLORS.border, | |
| }, | |
| headerTitle: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| color: COLORS.text, | |
| }, | |
| backButton: { | |
| padding: 5, | |
| }, | |
| saveButtonContainer: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| gap: 4, | |
| }, | |
| saveButtonDisabled: { | |
| opacity: 0.5, | |
| }, | |
| saveButton: { | |
| fontSize: 16, | |
| color: COLORS.primary, | |
| fontWeight: "600", | |
| }, | |
| card: { | |
| backgroundColor: COLORS.card, | |
| margin: 16, | |
| borderRadius: 16, | |
| padding: 16, | |
| shadowColor: "#000", | |
| shadowOffset: { width: 0, height: 2 }, | |
| shadowOpacity: 0.1, | |
| shadowRadius: 4, | |
| elevation: 3, | |
| }, | |
| typeSelector: { | |
| flexDirection: "row", | |
| marginBottom: 20, | |
| gap: 10, | |
| }, | |
| typeButton: { | |
| flex: 1, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| justifyContent: "center", | |
| paddingVertical: 12, | |
| borderRadius: 25, | |
| borderWidth: 1, | |
| borderColor: COLORS.border, | |
| }, | |
| typeButtonActive: { | |
| backgroundColor: COLORS.primary, | |
| borderColor: COLORS.primary, | |
| }, | |
| typeIcon: { | |
| marginRight: 8, | |
| }, | |
| typeButtonText: { | |
| color: COLORS.text, | |
| fontSize: 16, | |
| fontWeight: "500", | |
| }, | |
| typeButtonTextActive: { | |
| color: COLORS.white, | |
| }, | |
| amountContainer: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| borderBottomWidth: 1, | |
| borderBottomColor: COLORS.border, | |
| paddingBottom: 16, | |
| marginBottom: 20, | |
| }, | |
| currencySymbol: { | |
| fontSize: 32, | |
| fontWeight: "bold", | |
| color: COLORS.text, | |
| marginRight: 8, | |
| }, | |
| amountInput: { | |
| flex: 1, | |
| fontSize: 36, | |
| fontWeight: "bold", | |
| color: COLORS.text, | |
| }, | |
| inputContainer: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| borderWidth: 1, | |
| borderColor: COLORS.border, | |
| borderRadius: 12, | |
| padding: 4, | |
| marginBottom: 20, | |
| backgroundColor: COLORS.white, | |
| }, | |
| inputIcon: { | |
| marginHorizontal: 12, | |
| }, | |
| input: { | |
| flex: 1, | |
| padding: 12, | |
| fontSize: 16, | |
| color: COLORS.text, | |
| }, | |
| sectionTitle: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| color: COLORS.text, | |
| marginBottom: 15, | |
| marginTop: 10, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| }, | |
| categoryGrid: { | |
| flexDirection: "row", | |
| flexWrap: "wrap", | |
| gap: 10, | |
| }, | |
| categoryButton: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| paddingHorizontal: 16, | |
| paddingVertical: 10, | |
| borderRadius: 20, | |
| borderWidth: 1, | |
| borderColor: COLORS.border, | |
| backgroundColor: COLORS.white, | |
| }, | |
| categoryButtonActive: { | |
| backgroundColor: COLORS.primary, | |
| borderColor: COLORS.primary, | |
| }, | |
| categoryIcon: { | |
| marginRight: 6, | |
| }, | |
| categoryButtonText: { | |
| color: COLORS.text, | |
| fontSize: 14, | |
| }, | |
| categoryButtonTextActive: { | |
| color: COLORS.white, | |
| }, | |
| loadingContainer: { | |
| padding: 20, | |
| alignItems: "center", | |
| justifyContent: "center", | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import cron from "cron"; | |
| import https from "https"; | |
| const job = new cron.CronJob("*/14 * * * *", function () { | |
| https | |
| .get(process.env.API_URL, (res) => { | |
| if (res.statusCode === 200) console.log("GET request sent successfully"); | |
| else console.log("GET request failed", res.statusCode); | |
| }) | |
| .on("error", (e) => console.error("Error while sending request", e)); | |
| }); | |
| export default job; | |
| // CRON JOB EXPLANATION: | |
| // Cron jobs are scheduled tasks that run periodically at fixed intervals | |
| // we want to send 1 GET request for every 14 minutes | |
| // How to define a "Schedule"? | |
| // You define a schedule using a cron expression, which consists of 5 fields representing: | |
| //! MINUTE, HOUR, DAY OF THE MONTH, MONTH, DAY OF THE WEEK | |
| //? EXAMPLES && EXPLANATION: | |
| //* 14 * * * * - Every 14 minutes | |
| //* 0 0 * * 0 - At midnight on every Sunday | |
| //* 30 3 15 * * - At 3:30 AM, on the 15th of every month | |
| //* 0 0 1 1 * - At midnight, on January 1st | |
| //* 0 * * * * - Every hour |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // styles/home.styles.js | |
| import { StyleSheet } from "react-native"; | |
| import { COLORS } from "../../constants/colors"; | |
| export const styles = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: COLORS.background, | |
| }, | |
| content: { | |
| padding: 20, | |
| paddingBottom: 0, | |
| }, | |
| header: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| marginBottom: 20, | |
| paddingHorizontal: 0, | |
| paddingVertical: 12, | |
| }, | |
| headerLeft: { | |
| flex: 1, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| }, | |
| headerLogo: { | |
| width: 75, | |
| height: 75, | |
| }, | |
| welcomeContainer: { | |
| flex: 1, | |
| }, | |
| welcomeText: { | |
| fontSize: 14, | |
| color: COLORS.textLight, | |
| marginBottom: 2, | |
| }, | |
| usernameText: { | |
| fontSize: 16, | |
| fontWeight: "600", | |
| color: COLORS.text, | |
| }, | |
| headerRight: { | |
| flexDirection: "row", | |
| alignItems: "center", | |
| gap: 12, | |
| }, | |
| headerTitle: { | |
| fontSize: 28, | |
| fontWeight: "bold", | |
| color: COLORS.text, | |
| }, | |
| addButton: { | |
| backgroundColor: COLORS.primary, | |
| paddingHorizontal: 16, | |
| paddingVertical: 10, | |
| borderRadius: 24, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| shadowColor: "#000", | |
| shadowOffset: { width: 0, height: 2 }, | |
| shadowOpacity: 0.1, | |
| shadowRadius: 4, | |
| elevation: 3, | |
| }, | |
| addButtonText: { | |
| color: COLORS.white, | |
| fontWeight: "600", | |
| marginLeft: 4, | |
| }, | |
| logoutButton: { | |
| padding: 10, | |
| borderRadius: 20, | |
| backgroundColor: COLORS.card, | |
| shadowColor: "#000", | |
| shadowOffset: { width: 0, height: 1 }, | |
| shadowOpacity: 0.05, | |
| shadowRadius: 2, | |
| elevation: 1, | |
| }, | |
| balanceCard: { | |
| backgroundColor: COLORS.card, | |
| borderRadius: 20, | |
| padding: 20, | |
| marginBottom: 20, | |
| shadowColor: COLORS.shadow, | |
| shadowOffset: { | |
| width: 0, | |
| height: 2, | |
| }, | |
| shadowOpacity: 0.1, | |
| shadowRadius: 3, | |
| elevation: 3, | |
| }, | |
| balanceTitle: { | |
| fontSize: 16, | |
| color: COLORS.textLight, | |
| marginBottom: 8, | |
| }, | |
| balanceAmount: { | |
| fontSize: 32, | |
| fontWeight: "bold", | |
| color: COLORS.text, | |
| marginBottom: 20, | |
| }, | |
| balanceStats: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| }, | |
| balanceStatItem: { | |
| flex: 1, | |
| alignItems: "center", | |
| }, | |
| statDivider: { | |
| borderRightWidth: 1, | |
| borderColor: COLORS.border, | |
| }, | |
| balanceStatLabel: { | |
| fontSize: 14, | |
| color: COLORS.textLight, | |
| marginBottom: 4, | |
| }, | |
| balanceStatAmount: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| }, | |
| sectionTitle: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| color: COLORS.text, | |
| marginBottom: 15, | |
| }, | |
| transactionCard: { | |
| backgroundColor: COLORS.card, | |
| borderRadius: 12, | |
| marginBottom: 10, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| shadowColor: COLORS.shadow, | |
| shadowOffset: { | |
| width: 0, | |
| height: 1, | |
| }, | |
| shadowOpacity: 0.1, | |
| shadowRadius: 2, | |
| elevation: 2, | |
| }, | |
| transactionContent: { | |
| flex: 1, | |
| flexDirection: "row", | |
| padding: 15, | |
| alignItems: "center", | |
| }, | |
| categoryIconContainer: { | |
| width: 40, | |
| height: 40, | |
| borderRadius: 20, | |
| backgroundColor: "#F5F5F5", | |
| justifyContent: "center", | |
| alignItems: "center", | |
| marginRight: 12, | |
| }, | |
| transactionLeft: { | |
| flex: 1, | |
| }, | |
| transactionTitle: { | |
| fontSize: 16, | |
| fontWeight: "500", | |
| color: COLORS.text, | |
| marginBottom: 4, | |
| }, | |
| transactionCategory: { | |
| fontSize: 14, | |
| color: COLORS.textLight, | |
| }, | |
| transactionRight: { | |
| alignItems: "flex-end", | |
| }, | |
| transactionAmount: { | |
| fontSize: 16, | |
| fontWeight: "600", | |
| marginBottom: 4, | |
| }, | |
| transactionDate: { | |
| fontSize: 12, | |
| color: COLORS.textLight, | |
| }, | |
| deleteButton: { | |
| padding: 15, | |
| borderLeftWidth: 1, | |
| borderLeftColor: COLORS.border, | |
| }, | |
| transactionsContainer: { | |
| marginBottom: 20, | |
| }, | |
| loadingContainer: { | |
| flex: 1, | |
| justifyContent: "center", | |
| alignItems: "center", | |
| backgroundColor: COLORS.background, | |
| }, | |
| emptyState: { | |
| backgroundColor: COLORS.card, | |
| borderRadius: 16, | |
| padding: 30, | |
| alignItems: "center", | |
| justifyContent: "center", | |
| marginTop: 10, | |
| shadowColor: COLORS.shadow, | |
| shadowOffset: { width: 0, height: 1 }, | |
| shadowOpacity: 0.1, | |
| shadowRadius: 2, | |
| elevation: 2, | |
| }, | |
| emptyStateIcon: { | |
| marginBottom: 16, | |
| }, | |
| emptyStateTitle: { | |
| fontSize: 18, | |
| fontWeight: "600", | |
| color: COLORS.text, | |
| marginBottom: 8, | |
| }, | |
| emptyStateText: { | |
| color: COLORS.textLight, | |
| fontSize: 14, | |
| textAlign: "center", | |
| marginBottom: 20, | |
| lineHeight: 20, | |
| }, | |
| emptyStateButton: { | |
| backgroundColor: COLORS.primary, | |
| flexDirection: "row", | |
| alignItems: "center", | |
| paddingVertical: 10, | |
| paddingHorizontal: 16, | |
| borderRadius: 20, | |
| shadowColor: "#000", | |
| shadowOffset: { width: 0, height: 2 }, | |
| shadowOpacity: 0.1, | |
| shadowRadius: 3, | |
| elevation: 2, | |
| }, | |
| emptyStateButtonText: { | |
| color: COLORS.white, | |
| fontWeight: "600", | |
| marginLeft: 6, | |
| }, | |
| transactionsHeaderContainer: { | |
| flexDirection: "row", | |
| justifyContent: "space-between", | |
| alignItems: "center", | |
| marginBottom: 10, | |
| paddingBottom: 5, | |
| }, | |
| transactionsList: { | |
| flex: 1, | |
| marginHorizontal: 20, | |
| }, | |
| transactionsListContent: { | |
| paddingBottom: 20, | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // lib/utils.js | |
| export function formatDate(dateString) { | |
| // format date nicely | |
| // example: from this 👉 2025-05-20 to this 👉 May 20, 2025 | |
| const date = new Date(dateString); | |
| return date.toLocaleDateString("en-US", { | |
| year: "numeric", | |
| month: "long", | |
| day: "numeric", | |
| }); | |
| } |
thanks bro good work
1000K thanks!
May you never lack in this life brother. Good work. Thanks alot!!
thank you
thank you for your incredible work
thank you, thank you, thank you
thank you very much.
Thanks angkol!
wow, this is lovely thanks for this
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you brother