# Project export: bash

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: Cal Hacks 10.0
- Tagline: .
- Devpost: https://devpost.com/software/bash-7y06q2
- GitHub: https://github.com/danielgao20/Bash
- Video: https://www.youtube.com/embed/0Jlc8AqusEM?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 2 GitHub contributor(s) — Ryan Chang (4 commits), danielgao20 (2 commits)

## Devpost submission (written by the team)

### Inspiration

bash was born out of a personal need. Like many students, I often found myself unsure about where to find exciting events near my college. This uncertainty was a common topic among my peers, and it sparked the idea to create an app that simplifies the process of discovering social gatherings and activities.

### What it does

The goal is to help fellow students overcome the challenge of navigating the campus social scene and make the most of their college experience. The app allows users to enter their .edu email. Upon verification, students can view a collection of events happening on and near campus.

### How we built it

Our group of 4 decided to split up into front and back end pairs. For the frontend development of our project, Ryan and Michael have leveraged the power of React Native to craft a dynamic and responsive user interface. Our primary screens include the Home screen, where users can effortlessly browse and access a curated list of upcoming events, and the Event Detail screen, which offers a comprehensive view of specific events. We're also implementing a Search screen, which empowers users to find events based on various criteria such as title and date. To ensure smooth navigation between these screens, we're utilizing React Navigation, ensuring an intuitive and seamless user experience. Additionally, we've chosen Redux for state management, ensuring data flows smoothly across the app, delivering a consistent and reliable experience. Lastly, we're committed to designing a responsive UI that adapts to different screen sizes, guaranteeing a visually appealing and user-friendly interface across various devices. For the backend, Neel and Daniel have built a robust foundation with a Node.js server, harnessed by the versatile Express framework. Our objective is to create a seamless and efficient backend system, facilitated through REST APIs that encompass all critical operations. These operations include fetching upcoming events, retrieving event details by their unique identifiers, and handling user registration and login functionalities through secure POST requests. Additionally, we've implemented GET and POST routes to manage user profiles and saved events, ensuring a personalized experience for our users. To guarantee the security and privacy of user data, we've incorporated a user authentication mechanism, requiring users to authenticate before accessing their profile-related APIs. Our backend infrastructure is designed to be both powerful and secure, underpinning the seamless functioning of our application.

### Challenges we ran into

Since none of our team members had used Express.js and Node.js, backend development was a bit slow at first. Additionally, it took a lot of time to put together all individual components of our fullstack program.

### Accomplishments we're proud of

At the beginning of the hackathon, our team spent a lot of time planning the entire project from ideation, design, and technical specs instead of jumping straight into coding the product, which is a common mistake many engineers make including ourselves in previous hackathons. This way, our team was able to be on the same page and better understand each others’ roles to collaborate smoothly.

### What we learned

Above all, we learned how to communicate effectively and play to each of our strengths so that the project could be finished efficiently and effectively.

### What's next

Currently, we’ve been focusing just on college students. We’d like to expand to a lot of other demographics, as everyone needs activities to do.

## README (from the GitHub repository)

No README available.

## Detected evidence (automated analysis)

Indexed codebase: 22 recognized source files, 73 KB.
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- Express (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 (25 of 25)

```
.gitignore
App.js
app.json
app/api/categories.js
app/Categories/Categories.js
app/Categories/categoriesStyle.js
app/Categories/Events.js
app/Components/Categories/CategoriesElement.js
app/Components/Categories/CategoriesHome.js
app/Components/Home/Card.js
app/Components/Home/EventsList.js
app/Components/Home/FeaturedEvent.js
app/Components/Home/HomeMainScreen.js
app/Components/Search/SearchCard.js
app/Components/Search/SearchMainScreen.js
app/EventDetail/EventDetail.js
app/EventDetail/EventDetailCss.js
app/Home/homecss.js
app/Home/HomeScreen.js
app/Search/Search.js
app/Search/searchStyle.js
babel.config.js
package.json
react-native.config.js
README.md
```

### Dependencies

- package.json: @babel/core@^7.20.0, @expo/webpack-config@^19.0.0, @react-navigation/bottom-tabs@^6.5.8, @react-navigation/native@^6.1.7, @react-navigation/stack@^6.3.17, axios@^1.5.0, expo@~49.0.8, expo-cli@^6.3.10, expo-font@~11.4.0, expo-status-bar@~1.6.0, react@18.2.0, react-dom@18.2.0, react-native@0.72.6, react-native-calendar-picker@^7.1.4, react-native-calendars@^1.1300.0, react-native-gesture-handler@~2.12.0, react-native-maps@1.7.1, react-native-modal@^13.0.1, react-native-vector-icons@^10.0.0, react-native-web@~0.19.6, xdate@^0.8.2

### Recent commits (newest first)

- Update README.md
- Merge pull request #1 from danielgao20/new-branch
- Merge branch 'main' into new-branch
- Translations and more
- Minor spelling errors
- categories.js fixed
- Finished Turkish -> English for variable names
- Translated categories.js api
- Update README.md
- initial commit

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

### package.json

```
{
  "name": "eventbookingproject",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "axios": "^1.5.0",
    "expo": "~49.0.8",
    "expo-cli": "^6.3.10",
    "expo-font": "~11.4.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-calendar-picker": "^7.1.4",
    "react-native-calendars": "^1.1300.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-maps": "1.7.1",
    "react-native-modal": "^13.0.1",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6",
    "xdate": "^0.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

```

### App.js

```javascript
import { StyleSheet, Text, View } from "react-native";
import HomeScreen from "./app/Home/HomeScreen";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
import Categories from "./app/Categories/Categories";
import React from "react";
import { FontAwesome } from "@expo/vector-icons";
import Search from "./app/Search/Search";

const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
          tabBarStyle: {
            position: "absolute",
            bottom: 5,
            left: 20,
            right: 20,
            backgroundColor: "#ffffff",
            borderRadius: 15,
            height: 70,
            ...styles.shadow,
          },

          tabBarShowLabel: false,
        }}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: ({ focused }) => (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <FontAwesome
                  name="home"
                  size={24}
                  color={focused ? "#76468F" : "#748c94"}
                />
                <Text
                  style={{
                    color: focused ? "#76468F" : "#748c94",
                    fontSize: 12,
                  }}
                >
                  Home
                </Text>
              </View>
            ),
          }}
        />
        <Tab.Screen
          name="Search"
          component={Search}
          options={{
            tabBarIcon: ({ focused }) => (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <FontAwesome
                  name="search"
                  size={18}
                  color={focused ? "#76468F" : "#748c94"}
                />
                <Text
                  style={{
                    color: focused ? "#76468F" : "#748c94",
                    fontSize: 12,
                  }}
                >
                  Search
                </Text>
              </View>
            ),
          }}
        />
        <Tab.Screen
          name="Categories"
          component={Categories}
          options={{
            tabBarIcon: ({ focused }) => (
              <View
                style={{
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <FontAwesome
                  name="bars"
                  size={18}
                  color={focused ? "#76468F" : "#748c94"}
                />
                <Text
                  style={{
                    color: focused ? "#76468F" : "#748c94",
                    fontSize: 12,
                  }}
                >
                  Categories
                </Text>
              </View>
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

```

### react-native.config.js

```javascript
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./assets/fonts/"],
};

```

### babel.config.js

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

```

### app/EventDetail/EventDetailCss.js

```javascript
import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  imageContainer: {
    width: "100%",
    marginBottom: 130,
  },
  img: {
    width: "100%",
    resizeMode: "stretch",
    height: 200,
    position: "relative",
  },
  cardInImage: {
    position: "absolute",
    backgroundColor: "#7F2CCB",
    width: "90%",
    top: 175,
    left: 20,
    borderRadius: 30,
    paddingHorizontal: 25,
    paddingVertical: 15,
    shadowColor: "black",
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.7,
    elevation: 5,
  },
  cardInCardInImage: {
    backgroundColor: "#ffffff",
    borderRadius: 20,
    padding: 10,
    paddingHorizontal: 25,
  },
});

```

### app/Categories/categoriesStyle.js

```javascript
import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  title: {
    alignItems: "center",
    justifyContent: "center",
    top: 40,
    marginBottom: 100,
  },
  categoriesCards: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
  },
  categoriesCardContent: {
    position: "absolute",
    top: 15,
    left: 24,
    height: 100,
    width: "100%",
  },
  categoriesCardContentTitle: {
    fontSize: 15,
    fontWeight: "bold",
    color: "#ffffff",
  },
  categoriesCardContentImg: {
    position: "absolute",
    bottom: -20,
    right: 45,
    width: 60,
    height: 60,
  },
  categoryContainer: {
    marginLeft: 30,
    marginRight: 30,
    marginBottom: 60,
  },
});

```

### app/Search/searchStyle.js

```javascript
import { StyleSheet } from "react-native";

export const styles = StyleSheet.create({
  searchHeader: {
    alignItems: "center",
    justifyContent: "center",
    top: 40,
    marginBottom: 70,
  },
  searchbarContainer: {
    padding: 10,
    borderWidth: 1,
    borderColor: "#000",
    borderRadius: 15,
    width: 340,
    height: 50,
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "center",
    gap: 20,
    marginBottom: 40,
  },
  searchBody: {
    marginHorizontal: 20,
    marginBottom: 440,
  },
  searchCard: {
    borderBottomColor: "grey",
    borderBottomWidth: 1,
    paddingBottom: 20,
    marginBottom: 40,
  },
  searchButton: {
    backgroundColor: "#7F2CCB",
    paddingHorizontal: 10,
    paddingVertical: 9,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  searchInput: {
    width: 240,
    height: 40,
    paddingHorizontal: 10,
    color: "#05375a",
  },
});

```

### app/Search/Search.js

```javascript
import React from "react";
import SearchMainScreen from "../Components/Search/SearchMainScreen";
import { createStackNavigator } from "@react-navigation/stack";
import EventDetail from "../EventDetail/EventDetail";

const Stack = createStackNavigator();
function Search() {
  return (
    <Stack.Navigator
      initialRouteName="SearchMainScreen"
      screenOptions={{ headerShown: false }}
    >
      <Stack.Screen name="SearchMainScreen" component={SearchMainScreen} />
      <Stack.Screen
        name="EventDetail"
        component={EventDetail}
        options={({ route }) => ({
          title: route.params.title,
          headerShown: true,
          headerStyle: {
            backgroundColor: "#ffffff",
            shadowColor: "#ffffff",
            elevation: 0,
          },
          headerTintColor: "#76468F",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        })}
      />
    </Stack.Navigator>
  );
}

export default Search;

```

### app/Home/HomeScreen.js

```javascript
import React from "react";
import { SafeAreaView } from "react-native";

import { styles } from "./homecss";
import HomeMainScreen from "../Components/Home/HomeMainScreen";
import { createStackNavigator } from "@react-navigation/stack";
import EventDetail from "../EventDetail/EventDetail";

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="HomeMainScreen" component={HomeMainScreen} />
      <Stack.Screen
        name="EventsDetail"
        component={EventDetail}
        options={({ route }) => ({
          title: route.params.title,
          headerShown: true,
          headerStyle: {
            backgroundColor: "#ffffff",
            shadowColor: "#ffffff",
            elevation: 0,
          },
          headerTintColor: "#76468F",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        })}
      />
    </Stack.Navigator>
  );
}

export default HomeScreen;

```

### app/Categories/Events.js

```javascript
import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { getEventsByCategory } from "../api/categories";
import SearchCard from "../Components/Search/SearchCard";
import { styles } from "./categoriesStyle";
import { FlatList } from "react-native";

function Events({ route, navigation }) {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    const eventsByCategory = getEventsByCategory(route.params.title);
    setEvents(eventsByCategory);
  }, []);
  return (
    <View style={styles.categoryContainer}>
      <FlatList
        data={events}
        renderItem={({ item }) => (
          <SearchCard
            title={item.Name}
            image={item.Image}
            date={item.EventStartDate}
            location={item.Location}
            onPress={() => navigation.navigate("EventDetail", { id: item.Id })}
          />
        )}
        keyExtractor={(item) => item.Id}
        scrollEnabled={true}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}

export default Events;

```

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