This project is the frontend of a system that facilitates the creation of playlists on Spotify through spoken language. It connects to a backend that converts the spoken request into text and recommends a series of songs based on the user's input. Subsequently, it interacts with the Spotify API to create the playlist with the recommended tracks, adding a brief description and a title that aligns with the user's request.
- React with TypeScript: Leverages the power of TypeScript for type safety and enhanced development experience.
- Vite: Utilizes Vite for fast builds and optimized production bundles.
- Three.js Integration: Includes 3D graphics rendering using Three.js with React bindings through @react-three/fiber.
- State Management: Manages application state efficiently using React hooks.
- API Integration: Uses axios for handling HTTP requests and qs for query string manipulation.
- Advanced Animations: Implements animations with mo-js and @mojs/core.
- Styled Components: Uses modern CSS with sass for styling.
- Node.js (v14 or higher)
- npm or yarn
1. Clone the repository:
git clone https://github.com/JavierEspinosaP/frontend_listAI.git
cd frontend_listAI
2. Install dependencies:
npm install
or
yarn install
To start the development server:
npm run dev
This will run the application in development mode. Open http://localhost:3000 to view it in the browser.
To create a production build:
npm run build
The production-ready files will be located in the dist directory.
To lint the project files:
npm run lint
This will check the code for any linting errors based on the configuration in the project.
- /src: Contains the source code of the application.
- /components: Reusable UI components.
- /assets: Static assets such as images, fonts, etc.
- /styles: Global and component-specific stylesheets.
- App.tsx: The root component of the application.
- main.tsx: Entry point for the React application.
- /public: Static files and assets.
- /dist: Output directory for the production build.
- package.json: Project metadata and scripts.
- react: ^18.2.0
- react-dom: ^18.2.0
- axios: ^1.6.7
- crypto-js: ^4.2.0
- js-cookie: ^3.0.5
- @react-three/fiber: ^8.15.19
- @react-three/drei: ^9.99.7
- mo-js: ^0.288.2
- sass: ^1.71.1
- tsparticles: ^3.3.0
- typescript: ^5.2.2
- vite: ^5.0.8
- eslint: ^8.55.0
- @typescript-eslint/eslint-plugin: ^6.14.0
- @typescript-eslint/parser: ^6.14.0
This project is licensed under the MIT License - see the LICENSE file for details.