Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsyntes/spotifymern
A full-stack music streaming app similar to Spotify, developed using MERN stack. Powered by AWS Cloud for seamless audio streaming, user authentication, and secure media storage. Explore and enjoy your favorite tunes with SpotifyMERN.
https://github.com/hsyntes/spotifymern
aws aws-s3 aws-ses frontend mongodb react react-query react-router redux rest-api spotify tailwindcss
Last synced: 25 days ago
JSON representation
A full-stack music streaming app similar to Spotify, developed using MERN stack. Powered by AWS Cloud for seamless audio streaming, user authentication, and secure media storage. Explore and enjoy your favorite tunes with SpotifyMERN.
- Host: GitHub
- URL: https://github.com/hsyntes/spotifymern
- Owner: hsyntes
- Created: 2023-08-18T23:47:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-10T09:42:44.000Z (about 1 year ago)
- Last Synced: 2024-10-03T18:40:23.504Z (about 1 month ago)
- Topics: aws, aws-s3, aws-ses, frontend, mongodb, react, react-query, react-router, redux, rest-api, spotify, tailwindcss
- Language: JavaScript
- Homepage: https://spotifymern.vercel.app
- Size: 259 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SpotifyMERN Frontend Documentation
[](https://spotifymern.vercel.app/)
Welcome to the frontend documentation of SpotifyMERN, a music streaming application inspired by Spotify. This documentation provides an overview of the frontend architecture, components, and key functionalities of the application.
### Backend API
The SpotifyMERN Backend API serves as the core of the SpotifyMERN platform, providing user authentication, data management, AWS Cloud and more. Explore the API documentation for detailed information on endpoints, usage, and integration.
Please visit here to see the backend code: [SpotifyMERN - Backend](https://github.com/hsyntes/spotifymern-api)
## Technologies Used
React: A JavaScript library for building user interfaces, providing a component-based architecture and efficient rendering.
React-Query: A data-fetching library for React applications, enabling seamless data management and caching.
Redux: A state management library, enabling centralized data storage and easy state updates.
React-Router: A routing library for React applications, enabling navigation and URL handling.
Tailwind CSS: A utility-first CSS framework, providing a set of pre-defined classes for styling components.
[](https://spotifymern.vercel.app)
[](https://spotifymern.vercel.app)
## React-Query Integration
React-Query is used to fetch and manage data in the frontend. The library provides hooks for fetching data from the backend API, caching responses, and handling loading and error states.
## Redux Integration
Redux is used for global state management in the frontend. It stores user authentication information, such as the JWT token, and manages user-related actions like logging in and logging out.
## React-Router Integration
React-Router is used for client-side routing, allowing smooth navigation between different pages and managing URLs for specific content.
## AWS Cloud Integration
Amazon S3 is used for storing and serving musics, including categories, thumbnail images and users' profile pictures.
[](https://spotifymern.vercel.app)
## TailwindCSS Styling
[](https://spotifymern.vercel.app)
## Powerful MongoDB Atlash Search Engine
[](https://spotifymern.vercel.app)
## Authentication
User authentication is managed using JWT tokens obtained from the backend upon successful login. The JWT token is stored in the Secure Response Headers and included in the Authorization header for protected API requests also hashing passwords and save them to MongoDB
[](https://spotifymern.vercel.app)
## 🔗 Contact
[](https://www.linkedin.com/in/hsyntes)