🎧 Fifty List v2 [React.js-Python]

This project is a fullstack music automation platform and showcases a seamless integration of React and Python.

Key Features:

Frontend (React.js)

• Spotify Integration: Fetches your top 50 tracks from Spotify within a chosen timeframe (1, 6 months, or all-time classics).
• Export To Playlist (Results): Automatically generates a new playlist on your Spotify account with these 50 tracks.
• Export To Playlist (Recommendations): Based on your top 50 listened songs, our recommendation engine suggests an additional 20 songs to add to your playlists.

Backend (Python)

• Flask-Powered: Acts as a middleware that interfaces with React.
• Fifty Card: Organizes retrieved tracks dynamically into a static brand new website in order to provide sharing functionality to social media or for accessing later, including artist names, song titles, album names, release dates, and genres.

About the Project

FiftyList is an exploratory project diving deep into the collaboration of different programming languages and APIs. It is designed to:

• Demonstrate Seamless Communication: Showcases smooth communication between the frontend and backend using API calls.
• Emphasize Language Synergy: Highlights the synergy between React’s frontend prowess and Python’s backend efficiency.
• Data Presentation Challenge: Ensures that complex data is rendered in a user-friendly format and transmitted effectively between systems.

How it works?:

Installation and Usage:

For Frontend Installation:

1. Clone this project.

git clone https://github.com/imprvhub/fiftylist-react-v2.git

2. Navigate to the project directory (in your terminal IDE).

cd /your/folder/directory/fiftylist-react-v2

3. Run the following command to install all required dependecies.

npm install

4. Replace the environment variables (REACT_APP_SCOPES, REACT_APP_REDIRECT_URI, REACT_APP_CLIENT_SECRET, REACT_APP_CLIENT_ID) with your own. You can generate these variables from Spotify Developer Dashboard.
5. Replace the variable defined at the beginning of the code in App.js: const redirectUri = 'https://fiftylist.vercel.app/callback'; with -> const redirectUri = "http://localhost:3000/callback"; Update the URLs in the variables of the exportShare function from 'https://fiftylistbackend.vercel.app/share' to 'http://localhost:5000/share' if your Python backend is using a different port.
6. Run the following command from your terminal IDE; this should start the frontend on the designated port.

npm start

For Backend Installation:

Prerequisites:

Python 3.11

1. Clone the project. ( https://github.com/imprvhub/fiftylist-python-v2 )

git clone https://github.com/imprvhub/fiftylist-python-v2.git

1.2 Navigate to the project directory (in your terminal IDE).

cd /your/folder/directory/fiftylist-python-v2

2. Run the following command to install all required dependecies.

pip install -r requirements.txt

3. Replace the variable defined at the beginning of the share.py code: cors = CORS(app, resources={r"/share": {"origins": "https://fiftylist-frontend.vercel.app/"}}) with -> cors = CORS(app, resources={r"/share": {"origins": "http://localhost:3000/"}}) (or the port you designated for your frontend).
4. Run python3 share.py.

IMPORTANT: Open two separate windows in your IDE to run the fullstack locally. Execute the commands to have both projects running simultaneously for them to work seamlessly.

Feedback & Support:

Your input matters, and I’m ready to help address any inquiries or feedback you may have. Your contributions are essential for refining the project and enhancing the overall user experience. Don’t hesitate to get in touch with me:

Feel free to share your insights, recommendations, or suggestions for continuous improvement. If you encounter any challenges or require assistance, please create a new GitHub issue. Be sure to provide a detailed description of your issue to facilitate prompt and precise support.

License:

For more information regarding this topic please read the following Terms and Conditions.

---