The
App
Explore the best artists and music
All of your favourites artists and songs are now in SpotifyElectron. Lets dig in and find all the new features.
Organize your favorite music in playlists
Save your songs into playlist and access them from wherever and whenever you want. Access your friend's playlists for sharing and discovering new music.
Upload your songs
Have you ever missed not finding a not so popular song in other streaming services? That's not the problem from now on, SpotifyElectron allows users to upload their own music and share them globally.
Discover and try the new interface
Modern interface with the best user experience. Search by genre, find your favourite songs or see what your friends are playing : the limit it's up to you.
Goals
Developed for scalability and quick iterations
Control version and contributions using Git
Full functionality clone of Spotify
Developed with the best programming practices
Cross platform with one codebase
Full coverage test suite
Focused on security
Song streaming with AWS services
Agile development and team organization
Added new functionality
Tech
Architecture
Global Architecture
Electron
Develop once and run everywhere is a must if you have a small team of developers. With Electron the application interface can access easily OS resources such as file explorer, clipboard, notification system... The app can be installed as a normal executable and loads significantly faster when it's build. Security is one of the most important Electron goals so every connection with the system OS must be declared beforehand in the preload file. Also both renderer and main threads work in isolation mode and must communicate with the Context Bridge via IPC (Inter-Process Comunication), this ensures security and stability of the app.
React with TypeScript
Runtime errors usually take longer to debug and can cause unexpected issues on production. By using TypeScript & EsLint the amount of bugs and other issues decreased by a lot. Thanks to the type safety and strict linter mode most of the runtime problems can be avoided and fixed in development, this also make the app more robust. React offers us abstraction, hierarchy of components and most important encapsulation between the components. This allows parallel development without making and impact on others code.
Interface
Graphical elements of the interface are developed using web tech like HTML and CSS, also the app uses components from MaterialUI and inline styles with Boostrap that speeds up the development process.
Python Backend API
Develop using FastAPI larger apps architecture with middlewares for allowing CORS requests and allow the user to reach certain resources with a JWT Token system. Song storage and retrieve of the streaming URL of the song is being made by calling an AWS Lambda function that acts as an API for reaching AWS components such as S3 Bucket Token and Cloudfront.
Middleware
The protection of the endpoint is being made thanks to a JWT Token system. The server on user's login issues a signed JWT Token containing user info and role that is going to be sent by the user on every request to the server. The check of token permissions is made in a middleware that checks the expire date, verifies the signed token and allows or not the request depending on users info.
AWS Lambda
This service is working like an API between the Backend and the AWS services. Songs are stored in S3 buckets and for streaming them we need cloudfront as a provider. Our Lambda function allows for a low use of AWS credits and works with the Python SDK Boto with an API Key and a static url.
MongoDB
Perfect for fast development and constant changing features. Stores hashed password from users and all the app data except from song files. Python Backend access the database by using PyMongo driver. It has different databases for both testing and production that are being selected by dependency inyection.
Backend Endpoints
Safety
All endpoints are protected by JWT Token Authorization, if you want to make requests to the API you will need to add the "Authorization" header to all requests.
API Documentation
API documentation is available by checking this page or running the backend and accessing http://127.0.0.1:8000/docs
🤖Github Actions CI/CD
Run tests
Runs both backend and frontend test suite everytime a pull request is created.
Force branch format
On every new branch created checks the if the name of the branch follows a pattern established on CONTRIBUTING.md
Generate backend docs
Everytime a branch is closed and has a merged status runs a script that updates the html file with Backend API documentation.
🧾Testing
Frontend
More than 85% coverage unit testing the component and pages of the interface with React Testing Library and Jest.
Backend
Almost 100% unit test coverage in all the methods that are being used in every endpoint using PyTest.