first commit

Author: nipun22325

.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+ "editor.codeActionsOnSave": {
+ "source.fixAll": "explicit",
+ "source.organizeImports": "explicit",
+ "source.sortMembers": "explicit"
+ }
+}

README.md

@@ -0,0 +1,42 @@
+# Clock Work 
+
+Clock Work is a React Native Expo application designed to boost productivity and well-being. It combines four essential features: 
+- **To-Do List**: Organize your tasks and stay on top of your schedule. 
+- **Focus Timer**: Use the Pomodoro technique to stay focused and productive. 
+- **Notes App**: Jot down ideas, reminders, and important information. 
+- **Relaxation Game**: Take a break and unwind with a simple game, offering a healthy alternative to doomscrolling. 
+
+## Features 
+- Seamless integration of productivity tools in one app. 
+- User-friendly interface for easy navigation. 
+- Cross-platform support with Expo. 
+
+## Setup and Run Instructions 
+
+### Prerequisites 
+- Node.js installed on your system. 
+- Expo CLI installed globally (`npm install -g expo-cli`). 
+- A mobile device or emulator for testing. 
+
+### Steps to Setup and Run 
+
+1. **Clone the Repository** 
+ ```bash 
+ git clone https://github.com/your-repo/clock-work.git 
+ ``` 
+
+2. **Install Dependencies** 
+ ```bash 
+ npm install 
+ ``` 
+
+3. **Start the Development Server** 
+ ```bash 
+ npx expo start 
+ ``` 
+
+4. **Run on a Device or Emulator** 
+ - Scan the QR code in the Expo Go app (available on iOS and Android). 
+ - Alternatively, use an emulator/simulator to run the app. 
+
+Enjoy using Clock Work to enhance your productivity and well-being! 

app.json

@@ -0,0 +1,42 @@
+{
+ "expo": {
+ "name": "clock-work",
+ "slug": "clock-work",
+ "version": "1.0.0",
+ "orientation": "portrait",
+ "icon": "./assets/images/icon.png",
+ "scheme": "clockwork",
+ "userInterfaceStyle": "automatic",
+ "newArchEnabled": true,
+ "ios": {
+ "supportsTablet": true
+ },
+ "android": {
+ "adaptiveIcon": {
+ "foregroundImage": "./assets/images/adaptive-icon.png",
+ "backgroundColor": "#ffffff"
+ },
+ "edgeToEdgeEnabled": true
+ },
+ "web": {
+ "bundler": "metro",
+ "output": "static",
+ "favicon": "./assets/images/favicon.png"
+ },
+ "plugins": [
+ "expo-router",
+ [
+ "expo-splash-screen",
+ {
+ "image": "./assets/images/splash-icon.png",
+ "imageWidth": 200,
+ "resizeMode": "contain",
+ "backgroundColor": "#ffffff"
+ }
+ ]
+ ],
+ "experiments": {
+ "typedRoutes": true
+ }
+ }
+}

app/_layout.tsx

@@ -0,0 +1,83 @@
+// app/_layout.tsx
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, useColorScheme } from "react-native";
+import { Stack, useRouter, usePathname } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+export default function RootLayout() {
+ const router = useRouter();
+ const pathname = usePathname();
+ const scheme = useColorScheme();
+ const isDark = scheme === "dark";
+
+ // Define colors based on theme
+ const colors = {
+ background: isDark ? "#121212" : "#f2f2f2",
+ card: isDark ? "#1e1e1e" : "#fff",
+ text: isDark ? "#fff" : "#333",
+ subtext: isDark ? "#ccc" : "#666",
+ border: isDark ? "#333" : "#ccc",
+ accent: "#4caf50",
+ };
+
+ const tabs: { name: string; icon: React.ComponentProps<typeof Ionicons>["name"]; path: "/" | "/focus" | "/notes" | "/game" }[] = [
+ { name: "Tasks", icon: "checkbox-outline", path: "/" },
+ { name: "Focus", icon: "timer-outline", path: "/focus" },
+ { name: "Notes", icon: "document-text-outline", path: "/notes" },
+ { name: "Game", icon: "grid-outline", path: "/game" },
+ ];
+
+ return (
+ <SafeAreaProvider>
+ <Stack screenOptions={{ headerShown: false }} />
+ 
+ {/* Bottom Navigation */}
+ <View style={[styles.tabBar, { backgroundColor: colors.card, borderTopColor: colors.border }]}>
+ {tabs.map((tab) => (
+ <TouchableOpacity
+ key={tab.path}
+ style={styles.tabItem}
+ onPress={() => router.push(tab.path)}
+ >
+ <Ionicons
+ name={tab.icon}
+ size={24}
+ color={pathname === tab.path ? colors.accent : colors.subtext}
+ />
+ <Text
+ style={[
+ styles.tabText,
+ { color: pathname === tab.path ? colors.accent : colors.subtext },
+ ]}
+ >
+ {tab.name}
+ </Text>
+ </TouchableOpacity>
+ ))}
+ </View>
+ </SafeAreaProvider>
+ );
+}
+
+const styles = StyleSheet.create({
+ tabBar: {
+ flexDirection: "row",
+ position: "absolute",
+ bottom: 0,
+ left: 0,
+ right: 0,
+ height: 70,
+ borderTopWidth: 1,
+ paddingBottom: 10,
+ },
+ tabItem: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ },
+ tabText: {
+ fontSize: 12,
+ marginTop: 4,
+ },
+});

app/context/AppContext.tsx

@@ -0,0 +1,57 @@
+// context/AppContext.tsx
+import React, { createContext, useState, useContext } from 'react';
+
+type AppContextType = {
+ disabledTabs: string[];
+ setTabsDisabled: (tabs: string[]) => void;
+ notifyBreakEnd: () => void;
+ onBreakEnd: (() => void) | null;
+ setOnBreakEnd: (callback: (() => void) | null) => void;
+ gameInProgress: boolean;
+ setGameInProgress: (inProgress: boolean) => void;
+};
+
+const AppContext = createContext<AppContextType>({
+ disabledTabs: [],
+ setTabsDisabled: () => {},
+ notifyBreakEnd: () => {},
+ onBreakEnd: null,
+ setOnBreakEnd: () => {},
+ gameInProgress: false,
+ setGameInProgress: () => {},
+});
+
+export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+ const [disabledTabs, setDisabledTabs] = useState<string[]>([]);
+ const [onBreakEnd, setOnBreakEnd] = useState<(() => void) | null>(null);
+ const [gameInProgress, setGameInProgress] = useState<boolean>(false);
+
+ const setTabsDisabled = (tabs: string[]) => {
+ setDisabledTabs(tabs);
+ };
+
+ const notifyBreakEnd = () => {
+ if (onBreakEnd) {
+ onBreakEnd();
+ }
+ };
+
+ return (
+ <AppContext.Provider
+ value={{
+ disabledTabs,
+ setTabsDisabled,
+ notifyBreakEnd,
+ onBreakEnd,
+ setOnBreakEnd,
+ gameInProgress,
+ setGameInProgress,
+ }}
+ >
+ {children}
+ </AppContext.Provider>
+ );
+};
+
+export { AppContext };
+export const useAppContext = () => useContext(AppContext);