# Project export: commit.tech

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: CruzHacks 2025
- Tagline: A coding productivity tool to stay consistent!
- Devpost: https://devpost.com/software/commit-tech
- GitHub: https://github.com/natanielj/CodingTracker
- Team: 2 GitHub contributor(s) — theDriftcode (4 commits), Nataniel Jayaseelan (3 commits)

## Devpost submission (written by the team)

### Inspiration

For the longest time, I had been looking to create an app that transforms the routine of coding into a meaningful and structured journey. I envisioned a tool that not only tracks every coding session but also inspires creativity by helping you generate fresh ideas. While our initial inspiration centered on gamified productivity and a seamless Github integration, our focus evolved to build a robust core with intelligent features.

### What it does

Commit.tech is a productivity and coding tracker that streamlines project management while fueling your creativity. The app logs daily coding sessions and tracks project progress using MongoDB, ensuring that all your efforts are effectively recorded. Beyond that, we've integrated a generative AI model that sparks innovation by generating creative project ideas—turning moments of creative block into opportunities for inspiration.

### How we built it

We built Commit.tech by prioritizing reliability and innovation. Although the ambitious gamified elements and Github API integration weren’t feasible within our timeline, we established a solid foundation using MongoDB for project tracking. Additionally, we incorporated a generative AI model that provides users with innovative project ideas, proving that even under tight deadlines, we can deliver features that add real creative value.

### Challenges we ran into

A major challenge was managing our scope within a limited timeframe. We initially planned for an elaborate system featuring gamified elements and comprehensive API integration with Github. However, balancing these aspirations with our development resources meant we had to make strategic choices, ultimately focusing on core functionality and supplementing it with the powerful AI-driven idea generator.

### Accomplishments we're proud of

We’re incredibly proud of delivering a dependable and innovative product. The implementation of MongoDB gives us a sturdy backbone for tracking coding sessions and project details, while our generative AI model stands out by helping users overcome creative hurdles. These accomplishments underscore our commitment to making coding both productive and inspiring, even when initial plans had to be reimagined.

### What we learned

This journey taught us the importance of scope management and the value of focusing on core functionalities. We discovered that a powerful product doesn’t need every planned feature to be successful—instead, a reliable system that smartly integrates innovative tools (like our AI-powered project idea generator) can greatly enrich the user experience. This project emphasized the need for flexibility and creative problem-solving in software development.

### What's next

Looking ahead, we plan to build on our solid foundation by gradually reintroducing interactive elements and exploring deeper integrations. Enhancements to our generative AI model are on the horizon, aiming to provide even more tailored and creative project ideas. Our ongoing goal is to refine and expand commit.tech into a comprehensive tool that not only tracks productivity but also continually inspires you on your coding journey.

## README (from the GitHub repository)

# Welcome to your Expo app 👋

This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).

## Get started

1. Install dependencies

   ```bash
   npm install
   ```

2. Start the app

   ```bash
    npx expo start
   ```

In the output, you'll find options to open the app in a

- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo

You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).

## Get a fresh project

When you're ready, run:

```bash
npm run reset-project
```

This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.

## Learn more

To learn more about developing your project with Expo, look at the following resources:

- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

## Join the community

Join our community of developers creating universal apps.

- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.


## Detected evidence (automated analysis)

Indexed codebase: 43 recognized source files, 66 KB.
- CSS (language) — detected in the code
- JavaScript (language) — detected in the code
- MongoDB (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- Google Gemini (technology) — claimed on Devpost, not found in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (51 of 51)

```
.gitignore
app.d.ts
app.json
app/_layout.tsx
app/(auth)/_layout.tsx
app/(auth)/sign-in.tsx
app/(auth)/sign-up.tsx
app/(tabs)/_layout.tsx
app/(tabs)/index.tsx
app/(tabs)/projects.tsx
app/(tabs)/settings.tsx
app/+not-found.tsx
app/logSession.tsx
app/periSession.tsx
app/postSession.tsx
app/projDesc.tsx
app/projForm.tsx
babel.config.js
components/__tests__/__snapshots__/ThemedText-test.tsx.snap
components/__tests__/ThemedText-test.tsx
components/Collapsible.tsx
components/ExternalLink.tsx
components/HapticTab.tsx
components/HelloWave.tsx
components/ListPageView.tsx
components/ParallaxScrollView.tsx
components/SignOutButton.tsx
components/ThemedText.tsx
components/ThemedView.tsx
components/ui/IconSymbol.ios.tsx
components/ui/IconSymbol.tsx
components/ui/TabBarBackground.ios.tsx
components/ui/TabBarBackground.tsx
constants/Colors.ts
constants/dummydb.json
constants/styles.ts
global.css
hooks/useColorScheme.ts
hooks/useColorScheme.web.ts
hooks/useThemeColor.ts
package.json
README.md
scripts/call-gemini.js
scripts/mongodb.js
scripts/reset-project.js
server/config.env
server/connect.cjs
server/connections.js
server/insert.ts
tailwind.config.js
tsconfig.json
```

### Dependencies

- package.json: @babel/core@^7.25.2, @clerk/clerk-expo@^2.9.11, @editorjs/checklist@^1.6.0, @expo/vector-icons@^14.0.2, @google/genai@^0.8.0, @react-navigation/bottom-tabs@^7.2.0, @react-navigation/native@^7.0.14, @types/jest@^29.5.12, @types/react@~18.3.12, @types/react-test-renderer@^18.3.0, dotenv@^16.5.0, expo@~52.0.40, expo-blur@~14.0.3, expo-checkbox@~4.0.1, expo-constants@~17.0.8, expo-font@~13.0.4, expo-haptics@~14.0.1, expo-linking@~7.0.5, expo-router@~4.0.19, expo-secure-store@^14.0.1, expo-select-dropdown@^1.2.0, expo-splash-screen@~0.29.22, expo-status-bar@~2.0.1, expo-symbols@~0.2.2, expo-system-ui@~4.0.8, expo-web-browser@~14.0.2, jest@^29.2.1, jest-expo@~52.0.6, mongodb@^6.15.0, nativewind@^4.1.23, react@18.3.1, react-dom@18.3.1, react-hook-form@^7.54.2, react-native@0.76.7, react-native-autocomplete-dropdown@^4.4.0, react-native-circular-progress-indicator@^4.4.2, react-native-element-dropdown@^2.12.4, react-native-gesture-handler@~2.20.2, react-native-reanimated@^3.16.2, react-native-safe-area-context@^4.12.0, react-native-screens@~4.4.0, react-native-timeline-flatlist@^0.8.0, react-native-web@~0.19.13, react-native-webview@13.12.5, react-test-renderer@18.3.1, tailwindcss@^3.4.17, typescript@^5.3.3

### Recent commits (newest first)

- Merge branch 'main' of https://github.com/natanielj/CodingTracker
- finish
- Timer
- Another commit
- style update
- Merge branch 'main' of https://github.com/natanielj/CodingTracker
- dark mode issue
- Centered Timeline
- Cented Text again
- Better text
- Cented Text
- Merge branch 'main' of https://github.com/natanielj/CodingTracker
- Timer
- projects works backend not yet
- frontend is finished fully, need to add features
- sorta works kinda
- Setting changes
- Settings Cog Wheel Added
- muffin time
- UI done enough to start backend

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "codingtracker",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@clerk/clerk-expo": "^2.9.11",
    "@editorjs/checklist": "^1.6.0",
    "@expo/vector-icons": "^14.0.2",
    "@google/genai": "^0.8.0",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "dotenv": "^16.5.0",
    "expo": "~52.0.40",
    "expo-blur": "~14.0.3",
    "expo-checkbox": "~4.0.1",
    "expo-constants": "~17.0.8",
    "expo-font": "~13.0.4",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.19",
    "expo-secure-store": "^14.0.1",
    "expo-select-dropdown": "^1.2.0",
    "expo-splash-screen": "~0.29.22",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.2",
    "expo-system-ui": "~4.0.8",
    "expo-web-browser": "~14.0.2",
    "mongodb": "^6.15.0",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-hook-form": "^7.54.2",
    "react-native": "0.76.7",
    "react-native-autocomplete-dropdown": "^4.4.0",
    "react-native-circular-progress-indicator": "^4.4.2",
    "react-native-element-dropdown": "^2.12.4",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "^3.16.2",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-timeline-flatlist": "^0.8.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.6",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

```

### app/_layout.tsx

```typescript
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import 'react-native-reanimated';
import { ClerkProvider } from '@clerk/clerk-expo';
import { tokenCache } from '@clerk/clerk-expo/token-cache'

import { useColorScheme } from '@/hooks/useColorScheme';

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ClerkProvider tokenCache={tokenCache}>
      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen name="+not-found" />
        </Stack>
        <StatusBar style="auto" />
      </ThemeProvider>
    </ClerkProvider>
  );
}

```

### app/(auth)/_layout.tsx

```typescript
import { Redirect, Stack } from 'expo-router'
import { useAuth } from '@clerk/clerk-expo'

export default function AuthRoutesLayout() {
  const { isSignedIn } = useAuth()

  if (isSignedIn) {
    return <Redirect href={'/'} />
  }

  return <Stack />
}
```

### app/(tabs)/_layout.tsx

```typescript
import { Tabs } from 'expo-router';
import React from 'react';
import { Platform } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
import { Redirect, Stack } from 'expo-router'
import { useAuth } from '@clerk/clerk-expo'
import { SignedIn, SignedOut, useUser } from '@clerk/clerk-expo'
import { SignOutButton } from '../../components/SignOutButton';


export default function TabLayout() {
  const colorScheme = useColorScheme();


  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {},
        }),
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="projects"
        options={{
          title: 'Projects',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          tabBarIcon: ({ color }) => <FontAwesome5 size={22} name="users-cog" color={color} />,
        }}
      />
    </Tabs>
  );
}
```

### app/(tabs)/index.tsx

```typescript
import { Image, Platform, Text, View, Button } from 'react-native';
import { styles } from '@/constants/styles';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useRouter } from 'expo-router';

import CircularProgress from 'react-native-circular-progress-indicator';

import Timeline from 'react-native-timeline-flatlist'

export default function HomeScreen() {
    const router = useRouter();
    
        // Uncomment the following line to navigate to the log session page on button press
    const handleButtonPress = () => router.push('/logSession');
    return (
        <ThemedView style={styles.mainContainer}>

            <ThemedView style={styles.contentContainer}>
                <ThemedText type="title">Hello</ThemedText>
                <ThemedText type="title">Coder!</ThemedText>
                <HelloWave />
            </ThemedView>
            <View style={styles.stepContainer}>
                {/* <ThemedText style={{ fontSize: 18, color: 'black' }}>Day 1</ThemedText>  */}
            </View>
            <ThemedView style={styles.circularProgressContainer}>
                <CircularProgress
                    title={'Day'}
                    value={1}
                    inActiveStrokeColor={'black'}
                    inActiveStrokeOpacity={0.1}
                    radius={75}
                    
                    titleColor={'black'}
                    progressValueColor={'black'}
                    duration={500}
                />
            </ThemedView>
            <View style={styles.contentContainer}>
                <Button title="Start Session" onPress={handleButtonPress} />
            </View>
            <ThemedView style={styles.contentContainer}>
                <ThemedText type="title">Recent Activity</ThemedText>
            </ThemedView>   
            <Timeline
                data={activityData}
                columnFormat="single-column-left"
                style={{
                    paddingLeft: "5%",
                    width : "60%",
                    alignSelf: 'center',     // 👈 Center it horizontally
                }}
                timeContainerStyle={{
                    alignItems: 'flex-end',  // Adjust time alignment if needed
                }}
            />
        </ThemedView>
    );
}

const activityData =  [
      {time: '09:00', title: 'Event 1', description: 'Event 1 Description'},
      {time: '10:45', title: 'Event 2', description: 'Event 2 Description'},
      {time: '12:00', title: 'Event 3', description: 'Event 3 Description'},
      {time: '14:00', title: 'Event 4', description: 'Event 4 Description'},
      {time: '16:30', title: 'Event 5', description: 'Event 5 Description'}
]
```

### app.d.ts

```typescript
/// <reference types="nativewind/types" />
```

### global.css

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### babel.config.js

```javascript
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ]
  };
};
```

### tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      fontFamily: {
        spmono: ["SpaceMono-Regular", "sans-serif"],
      }
    },
  },
  plugins: [],
}
```

### hooks/useColorScheme.ts

```typescript
export { useColorScheme } from 'react-native';

```

[31 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]