# Project export: OsKey

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: Transform your favorite MP3s into sheet music instantly. From tunes to tones on paper, bring your melodies to life in a whole new way. The future of music transcription is here!
- Devpost: https://devpost.com/software/oskey-uhw7jf
- GitHub: https://github.com/ShabdVeyyakula/oskey-calhacks
- Team: 1 GitHub contributor(s) — Shabd Veyyakula (1 commits)

## Devpost submission (written by the team)

No Devpost description available.

## README (from the GitHub repository)

# oskey-calhacks

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


## Detected evidence (automated analysis)

Indexed codebase: 16 recognized source files, 14 KB.
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Vue (technology) — detected in the code
- Django (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (19 of 19)

```
.gitignore
babel.config.js
jsconfig.json
package.json
public/index.html
README.md
src/App.vue
src/components/FileUpload.vue
src/components/HelloWorld.vue
src/components/LoadingGif.vue
src/components/Navbar.vue
src/components/UploadBox.vue
src/main.js
src/pages/ConversionPage.vue
src/pages/Landing.vue
src/router/index.js
src/views/AboutView.vue
src/views/HomeView.vue
vue.config.js
```

### Dependencies

- package.json: @babel/core@^7.12.16, @babel/eslint-parser@^7.12.16, @vue/cli-plugin-babel@~5.0.0, @vue/cli-plugin-eslint@~5.0.0, @vue/cli-plugin-router@~5.0.0, @vue/cli-service@~5.0.0, core-js@^3.8.3, eslint@^7.32.0, eslint-plugin-vue@^8.0.3, vue@^3.2.13, vue-router@^4.0.3

### Recent commits (newest first)

- a lot of ui changes
- hh
- init

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

### package.json

```
{
  "name": "oskey-calhacks",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

```

### src/main.js

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

```

### src/router/index.js

```javascript
import { createRouter, createWebHistory } from 'vue-router'
import LandingPage from '../pages/Landing.vue'
import ConversionPage from '../pages/ConversionPage.vue'


const routes = [
  {
    path: '/',
    name: 'home',
    component: LandingPage
  },
  {
    path: '/democonvert',
    name: 'democonvert',
    component: ConversionPage
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

```

### babel.config.js

```javascript
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

```

### vue.config.js

```javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

```

### src/App.vue

```vue
<template>

  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}



nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

```

### public/index.html

```html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

```

### src/views/AboutView.vue

```vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

```

### src/views/HomeView.vue

```vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

```

### src/components/FileUpload.vue

```vue
<template>
  <div class="box">
    <div class="row">
      <div>
        <div class="imageBox">
            <img class="mp3" src="../assets/mp3.png"/>
        </div>
      </div>
        <p class="name">Name of File</p>
      <img class="closeIcon" src="../assets/closeicon.png"/>
    </div>
    <div class="loadingContainer"></div>
  </div>
</template>

<script>
export default {
    name: "FileUpload"
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 15%;
  border-radius: 15px;
  border-color: black;
  border-width: 2px;
  padding: 10px;
  margin-top: 15px
}

.imageBox {
  height: 40px;
  width: 40px;
  border-color: grey;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  padding: 2px;
}

.mp3 {
    width: 30px;
    margin-top: 15%
}

.row {
    display: flex;
}

.closeIcon {
    width: 25px;
    height: 25px
}

.closeIcon:hover {
    cursor: pointer
}

.name {
    margin-left: 10px
}

</style>

```

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