# Project export: MyTurn

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: MyTurn is an interactive test bed for aspiring K-Pop performers to independently test their initial marketability as well as find collaborators, powered by matchmaking and fandom-based voting system.
- Devpost: https://devpost.com/software/myturn-4ydufo
- GitHub: https://github.com/rajs80266/Test-Bed
- Team: 1 GitHub contributor(s) — Jay Shah (3 commits)

## Devpost submission (written by the team)

### Inspiration

Saw a huge Problem in the current K-Pop Production system: 1) Tremendous Resource Waste (5+ Years and 100s of MUSD to train & manufacture a single group) 2) Gamble Factor (99.9% fail utterly) Why K-Pop? K-Pop isn’t just a music genre, but a very unique BM that builds upon the economy of fandom based on integrative contents business Solution Interactive test-bed platform that 1) Match-makes aspiring K-Pop Performers and music producers, giving more autonomy and direct access to potential collaborators and resources 2) Enables to test their marketability out, through real-time fan-enabled voting system on the collaborated contents Key Features 1. Profile Dashboard : Aspiring performers can find the amateur music producers and vice versa, where the Self-Production gets enabled through direct access to talent pool 2. Matchmaking : Many of the aspiring performers have passion yet no knowledge what to expect & where to look to to pursue they passion, thus platform provides excellent place where to “start”, by matchmaking and recommendations individual combinations to collaborate with based on preferences questionnaire 3. Voting & Real-time Ranking : Provides real-time testbed to check the reaction of the market for different contents the performers publish through showing the relative ranking compared to other aspiring performers Business Model & Future Vision: Narrowly: monetizing from the vote Giving incentives such as special videos & exclusive merch Broadly: Having access to the future talent pool with high supply & the first mover to filter “proven” to be successful, turning them into Intellectual Property

### How we built it

All features written: Sign-Up/Login Create Profile Upload Media User Voting Matching Ranking Liking Media Technology Used: Front-End: REACT HTML CSS Back-End: JavaScript Node.js Typescript Convex Tools for backend, SQL database, File Storage Design: Figma

### Challenges we ran into

2 People team, not pre-matched First time for both of us working with a non-developer <-> developer

### Accomplishments we're proud of

Have 10+ interested potential users already Could integrate a lot in time crunch: Matchmaking & Real Time Voting Integration

## README (from the GitHub repository)

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)


## Detected evidence (automated analysis)

Indexed codebase: 49 recognized source files, 78 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- TypeScript (language) — detected in the code
- Node.js (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (56 of 56)

```
.gitignore
convex.json
package.json
personnel_details.jsonl
public/index.html
public/manifest.json
public/robots.txt
README.md
reducers/index.js
src/actions/index.js
src/App.css
src/App.js
src/components/FileUpload/index.jsx
src/components/Footer/index.js
src/components/Footer/style.css
src/components/Header/index.js
src/components/Header/style.css
src/components/UserCard/index.jsx
src/components/UserCard/usercard.css
src/components/UserProfile/index.jsx
src/components/UserProfile/userprofile.css
src/components/UserRanking/index.jsx
src/components/UserRanking/userranking.css
src/constants/links.js
src/constants/paths.js
src/convex/_generated/api.d.ts
src/convex/_generated/api.js
src/convex/_generated/dataModel.d.ts
src/convex/_generated/server.d.ts
src/convex/_generated/server.js
src/convex/display_profile.ts
src/convex/http.js
src/convex/media.js
src/convex/personnel_details.js
src/convex/preferences.js
src/convex/README.md
src/convex/schema.ts
src/convex/tsconfig.json
src/convex/user.js
src/convex/votes.js
src/index.js
src/pages/dashboard.css
src/pages/Dashboard.jsx
src/pages/home.css
src/pages/HomePage.jsx
src/pages/login.css
src/pages/login.jsx
src/pages/profile.css
src/pages/Profile.jsx
src/pages/signup.css
src/pages/signup.jsx
src/pages/suggestor.jsx
src/PersistedStore.js
src/reducers/index.js
src/shell.css
src/Shell.js
```

### Dependencies

- package.json: @emotion/react@^11.11.1, @emotion/styled@^11.11.0, @mui/material@^5.14.15, bootstrap-icons@^1.11.1, convex@^1.5.1, cra-template@1.2.0, crypto@^1.0.1, react@^18.2.0, react-dom@^18.2.0, react-redux@^8.1.3, react-router-dom@^5.3.0, react-scripts@5.0.1, react-social-icons@^5.15.0, redux@^4.2.0

### Recent commits (newest first)

- hack paused
- backend partial
- first commit

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

### package.json

```
{
  "name": "testbed",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.15",
    "bootstrap-icons": "^1.11.1",
    "convex": "^1.5.1",
    "cra-template": "1.2.0",
    "crypto": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "react-social-icons": "^5.15.0",
    "redux": "^4.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

### reducers/index.js

```javascript
import { combineReducers } from 'redux';

const UserReducer = (user = {}, action) => {
    if (action.type === 'SET_USER') {
      return action.payload;
    }
    return user;
};

export default combineReducers({ user: UserReducer });
```

### src/index.js

```javascript
import ReactDom from 'react-dom';
import { Provider } from 'react-redux';
import PersistedStore from "./PersistedStore";
import App from './App.js';

import { ConvexProvider, ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient('https://aware-grouse-298.convex.cloud');

ReactDom.render(
    <ConvexProvider client={convex}>
        <Provider store={PersistedStore.getDefaultStore().store}>
            <App />
        </Provider>
    </ConvexProvider>, 
    document.getElementById('root')
);

```

### src/App.js

```javascript
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import HomePage from './pages/HomePage';

import Shell from './Shell';
import LoginPage from './pages/login';
import SignupPage from './pages/signup';
import VideoGrid from './pages/Dashboard';
import Profile from './pages/Profile';

const App = () => {
  return (
    <BrowserRouter>
      <Shell>
        <Switch>
          <Route
            exact
            path="/"
            render={() => <HomePage />}
          />
          <Route
            exact
            path="/login"
            render={() => <LoginPage />}
          />
          <Route
            exact
            path="/signup"
            render={() => <SignupPage />}
          />
          <Route
            exact
            path="/dashboard"
            render={() => <VideoGrid />}
          />
          <Route
            exact
            path="/profile/:uid"
            render={() => <Profile />}
          />
        </Switch>
      </Shell>
    </BrowserRouter>
  );
};

export default App;
```

### src/actions/index.js

```javascript
export const setUser = (user) => ({
    type: 'SET_USER',
    payload: {
        username: user.username,
    },
});
```

### src/reducers/index.js

```javascript
import { combineReducers } from 'redux';

const UserReducer = (user = {}, action) => {
    if (action.type === 'SET_USER') {
      return action.payload;
    }
    return user;
  };

export default combineReducers({
    user: UserReducer,
});
```

### src/components/Header/index.js

```javascript
import React from "react";
import { Link } from "react-router-dom";

// import LOGO from "../../images/logo.png";

import "./style.css";

const Header = (props) => {
    return (
        <div className="header">
            <div>
                <Link to="/">
                    {/* <img src={LOGO} alt="" height={50} width={125}/> */}
                </Link>
            </div>
        </div>
    )
}

export default Header;
```

### src/components/Footer/index.js

```javascript
import React from "react";
import { SocialIcon } from 'react-social-icons';
import { facebookUrl, instagramUrl, whatsappUrl } from "../../constants/links";
import "./style.css"

const Footer = () => {
    return (
        <div>
            <div className="social-icons">
                <SocialIcon url={instagramUrl} />
                <SocialIcon url={facebookUrl} />
                <SocialIcon url={whatsappUrl} />
            </div>
        </div>
    )
}

export default Footer;
```

### src/components/UserCard/index.jsx

```javascript
import React, { useState } from 'react';

import './usercard.css';

const UserCard = ({image}) => {
  return (
    <div className='usercard'>
            <div className="user-image user-big">
                <img src={image} />
            </div>
            <h2 style={{width: '100%'}}>Artist Name</h2>
            <h3>This is the description of some Artist or Producer</h3>
            <div>
                <div className="user-image icon" style={{float: 'right'}}>
                    <img src={image} />
                </div>
                <div className="user-image icon" style={{float: 'right'}}>
                    <img src={image} />
                </div>
                <div className="user-image icon" style={{float: 'right'}}>
                    <img src={image} />
                </div>
            </div>
    </div>
  );
};

export default UserCard;

```

### src/components/FileUpload/index.jsx

```javascript
import { useMutation } from "convex/react";
import { useRef, useState } from "react";
import { api } from "../../convex/_generated/api";

const FileUpload = () => {
  const generateUploadUrl = useMutation(api.display_profile.generateUploadUrl);
  const sendImage = useMutation(api.display_profile.sendImage);

  const imageInput = useRef(null);
  const [selectedImage, setSelectedImage] = useState(null);

  const [name] = useState(() => "User " + Math.floor(Math.random() * 10000));
  async function handleSendImage(event) {
    event.preventDefault();

    // Step 1: Get a short-lived upload URL
    const postUrl = await generateUploadUrl();
    // Step 2: POST the file to the URL
    const result = await fetch(postUrl, {
      method: "POST",
      headers: { "Content-Type": selectedImage.type },
      body: selectedImage,
    });
    const { storageId } = await result.json();
    // Step 3: Save the newly allocated storage id to the database
    await sendImage({ storageId, author: name });

    setSelectedImage(null);
    imageInput.current.value = "";
  }
  return (
    <form onSubmit={handleSendImage}>
      <input
        type="file"
        accept="image/*"
        ref={imageInput}
        onChange={(event) => setSelectedImage(event.target.files[0])}
        disabled={selectedImage !== null}
      />
      <input
        type="submit"
        value="Upload Image"
        disabled={selectedImage === null}
      />
    </form>
  );
};

export default FileUpload;
```

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