AutomatedGroove Frontend

Streaming services automatically scan audio for copyrighted content, and mute or block uploads featuring this content. This makes it difficult for content creators to find appropriate background music. Our app automatically generates royalty-free music for content creators saving them time and money.

Find the backend repository here: AutomatedGroove Backend

Table of Contents

• Installation
• Configuration
• Implementation
• Testing
• Project Structure
• Scripts
• Technologies Used
• License
• Creators

Installation

1. Clone the repository to your local machine:

   git clone https://github.com/anika-sw/ag_frontend.git

2. Navigate into the repository:

   cd ag_frontend

3. Install dependencies:

   npm install

Configuration

1. Set the following environment variable in a .env file:

• VITE_RECAPTCHA_SITE_KEY

  Note: You need to obtain your own API key from Google Cloud to use in this project.

2. Add the following code to a vite-env.d.ts file:

   /// <reference types="vite/client" />
   
   interface ImportMetaEnv {
       // Add other environment variables here as needed
       readonly VITE_RECAPTCHA_SITE_KEY: string;
   }
   
   interface ImportMeta {
       readonly env: ImportMetaEnv;
   }

Implementation

1. Run the development server:

   npm run dev

   To access the application locally, open a web browser and go to http://localhost:5173.

2. To build for production, run:

   npm run build

Testing

• Run the vitest testing framework in your local machine:

  npm run test

• Run the Mock Service Worker testing framework in your brower to mock API calls:

  1. Ensure all code is uncommented in the main.tsx file.
  2. Open your local deployment of the project in a browser with npm run dev.
  3. Open your Develeper Tools and navigate to the Console tab.
  4. If Mock Service Worker is running properly, the message [MSW] Mocking enabled. should appear.
  5. To disable Mock Service Worker and resume sending calls to your APIs during local deployment, comment out the Mock Service Worker code in main.tsx.

Project Structure

ag_frontend/
├── dist/                       # Auto-populates production build files
├── node_modules/               # Dependency storage
├── public/                     # Static assets
│   ├── mockServiceWorker.js    # Required file for testing in browser
│   └── assets/                 # Images, fonts, etc.
├── src/
│   ├── components/             # Reusable components and related CSS
│   ├── mocks/                  # Server, handlers, browser, and mock data files
│   ├── App.tsx                 # Main application component
│   ├── main.tsx                # Project root - toggle dev mode testing here
│   └── ...                     # App and index CSS files
├── tests/                      
│   ├── app.test.tsx            # Test file
│   └── setupTests.ts           # Mock Service Worker setup for vitest
├── utils/                      
│   ├── api.tsx                 # API functions
│   └── types.ts                # Supplementary types file
├── .env                        # Secret environment variables
├── .gitignore                  # Files and directories to ignore in Git
├── index.html                  # Main HTML file
├── LICENSE                     
├── package-lock.json           # Auto-populates on dependency install
├── package.json                # Project dependencies and scripts
├── tsconfig.json               # TypeScript configuration
├── vite-env.d.ts               # Vite-specific environment variables config
├── vite.config.ts              # Vite configuration
└── README.md                   # Project documentation

Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the project for production.
• npm run test: Runs vitest in your local machine.

Technologies Used

• Vite: For fast and efficient bundling and development.
• React: A JavaScript library for building user interfaces.
• TypeScript: For static type-checking and better developer tooling.
• Vitest: Testing framework specifically designed for Vite projects.
• Mock Service Worker: For mocking network requests in the browser.
• reCAPTCHA: To verify a user is human.
• OpenAI API: For AI text generation based on user prompts.
• MusicFy AI API: For AI song generation based on user prompts.
• Vercel: Frontend deployment platform.
• Render: Backend deployment platform.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Creators

• Shelby Willis
• Sunny Muniz
• Kit Sutliff
• Anika Stephen Wilbur