Table of Contents

• Songify
  • Technologies Used
  • Features
  • Development
  • Getting Started
  • Future Features
  • Contact
  • License

Songify

Songify is a feature-rich Spotify Clone that allows users to play music, search for songs, and create their favorite playlists. Songify is built with React Native and Expo, and utilizes the Deezer API to fetch songs data.

Technologies Used

• React Native
• Firebase: Authentication and Firestore
• Expo Router: File-based routing for Native apps
• Expo Auth Session: Auth Provider for Google and Facebook
• Expo Av: For playing audio
• RN Async Storage: Local storage for user data
• Pullstate: Lightweight global state management
• Deezer API: Fetch songs data

Features

• Secure user authentication
• Login with Google or Facebook
• Play songs with interactive player
• Search and filter for songs
• Add songs to favorites
• Spotify-like UI
• Intuitive tab navigation

Development

This app was developed using the latest technologies and best practices. The codebase is highly modularized and organized for easy maintenance and scalability.

Project Structure

With a focus on clean code and maintainability, the project structure is organized into the following folders:

.
├── app/
│   ├── (auth)/     # Authentication screens
│   │   ├── sign-up.js
│   │   └── ...
│   ├── (routes)/   # Main app screens
│   │   ├── home.js
│   │   ├── player.js
│   │   └── ...
│   ├── _layout.js
│   └── index.js
├── assets
├── components/     # Reusable components grouped by page
│   ├── home
│   ├── player
│   └── index.js
├── constants
├── hooks
├── store/          # Global state management
│   ├── auth.js
│   └── player.js
├── styles          # Reusable styles
├── utils
├── index.js
└── firebase-config.js

Getting Started

To run this project locally, follow these steps:

1. Clone the repo to your local machine.

git clone git@github.com:IndieCoderMM/songify.git

2. Change into the project directory and install dependencies with:

npm install

3. Create a .env file in the root directory and add the following environment variables:

EXPO_PUBLIC_FIREBASE_API_KEY=<your-firebase-api-key>
EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=<your-firebase-auth-domain>
EXPO_PUBLIC_FIREBASE_PROJECT_ID=<your-firebase-project-id>
EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET=<your-firebase-storage-bucket>
EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<your-firebase-messaging-sender-id>
EXPO_PUBLIC_FIREBASE_APP_ID=<your-firebase-app-id>
EXPO_PUBLIC_RAPID_API_KEY=<your-rapid-api-key>
EXPO_PUBLIC_IOS_CLIENT_ID=<your-ios-client-id>
EXPO_PUBLIC_ANDROID_CLIENT_ID=<your-android-client-id>
EXPO_PUBLIC_FACEBOOK_CLIENT_ID=<your-facebook-client-id>

4. Start the Expo server with the following command:

npx expo start

Expo-CLI will start a server and generate a QR code. You can scan this code to run the app on your mobile device. Alternatively, you can run the app on an emulator.

Future Features

The following features are planned for future updates:

• Create playlists
• Add songs to playlists
• Background audio playback
• Play songs in shuffle/repeat mode
• Play local songs

Contact

I am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.

License

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