TMUsic - Music Social App
TMUsic is a full-stack web application that enables users to create profiles, share their favorite tracks, discover new music, and connect with other music lovers. The platform features real-time interactions, personalized recommendations, and a seamless user experience. Through secure authentication and optimized backend routes, we reduced authentication errors by 25% while maintaining robust data integrity.
User Interface
Landing Page: Clean, modern entry point with TMUsic branding, quick access to login/register, and Spotify partnership badge.
Login Page: Secure login with email/password and Google OAuth. Simple, accessible form design.
Spotify Authentication: OAuth flow for connecting user accounts to Spotify, enabling music streaming and sharing.
Music Feed: Users can post, like, comment, and listen to songs. Album art and user avatars enhance the social experience.
Chat & Messaging: Real-time messaging with a familiar sidebar layout, user details, and conversation management.
Profile Management: Users can update their profile info, change passwords, and manage account security in a clean, organized interface.
Key Features
Music Discovery
- •Advanced music recommendation engine powered by Spotify API
- •Personalized playlists and suggestions
- •Trending tracks and artists
Social Features
- •User profiles with Google OAuth integration
- •Real-time notifications and interactions via Pusher
- •Music sharing and comments
Tech Stack
| Category | Technology | Purpose |
|---|---|---|
| Frontend | React.js | Core UI library for building interactive components |
| TypeScript | Type-safe JavaScript for better development experience | |
| Tailwind CSS | Utility-first CSS framework for styling | |
| Backend | Laravel | PHP framework for robust API development |
| Livewire | Real-time updates and dynamic interfaces | |
| Laravel Socialite | OAuth authentication with Google | |
| MySQL | Relational database for data storage | |
| APIs & Services | Spotify API | Music streaming and discovery features |
| Google OAuth | Secure user authentication | |
| Pusher | Real-time event broadcasting |
Implementation Details
Architecture
The application follows a modern microservices architecture with separate frontend and backend services. The frontend is built with React and communicates with the Laravel backend through RESTful APIs. Real-time features are implemented using Pusher for event broadcasting, while Spotify API integration enables rich music discovery features.
Security & Performance
Implemented JWT authentication, Google OAuth integration via Laravel Socialite, and CSRF protection. User data is encrypted and stored securely in the database. Through optimized backend routes and Livewire integration, we achieved a 25% reduction in authentication errors while maintaining robust data integrity.
How to Run the Project
Open terminal and run:
git pull
composer install
php artisan migrate:fresh --seed
php artisan route:clearAnd then in another terminal:
php artisan serve
# In another terminal, run:
npm install
npm run dev