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
- Installation
- Configuration
- Implementation
- Testing
- Project Structure
- Scripts
- Technologies Used
- License
- Creators
- Clone the repository to your local machine:
git clone https://github.com/anika-sw/ag_frontend.git
- Navigate into the repository:
cd ag_frontend
- Install dependencies:
npm install
- 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.
- 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; }
-
Run the development server:
npm run dev
To access the application locally, open a web browser and go to http://localhost:5173.
-
To build for production, run:
npm run build
-
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:- Ensure all code is uncommented in the
main.tsx
file. - Open your local deployment of the project in a browser with
npm run dev
. - Open your
Develeper Tools
and navigate to theConsole
tab. - If
Mock Service Worker
is running properly, the message[MSW] Mocking enabled.
should appear. - To disable
Mock Service Worker
and resume sending calls to your APIs during local deployment, comment out theMock Service Worker
code inmain.tsx
.
- Ensure all code is uncommented in the
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
npm run dev
: Starts the development server.npm run build
: Builds the project for production.npm run test
: Runs vitest in your local machine.
- 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.
This project is licensed under the MIT License. See the LICENSE file for more information.