Introducing Westernal: A social media based on songs (part 2)
Tags: showdev, webdev, javascript, opensource
Published: 2023-06-19 20:31:34


<p align="center"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ast2p3i2zthwnz5skluw.png" width=300px height=300px  /> </p>

## Demo
{% embed https://www.youtube.com/watch?v=MAyW_f2mJZQ %}


## Link
[https://www.westernal.net/](https://www.westernal.net/)

## What is Westernal?
Westernal is a social media based on songs, you can share posts that includes part of a song, the whole song or music videos with your followers and let the music talk for you!


<span><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq9mn10t7oaj4z5uepwa.png" width=180px height=388.8px/> </span>
<span> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3pxp3n46g3zn4z4jbhu.png" width=180px height=388.8px/>
</span>

## How it works?
A user can easily signup and connect with people via following them and paste a song URL from Spotify, YouTube, SoundCloud and etc. (not the actual song itself because of copyright) or search a song inside app (Spotify search) to share with followers. You can like and comment on posts to interact with people.

<span><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xxesj4mvc8uqo0zplux.png" width=180px height=388.8px/> </span>

## Download the app
Download the app through share button --> add to HomeScreen.

<span> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bky7y3ulqp4vvo0kvmxf.png" width=230px height=400px/>
</span>
<span><img src="https://user-images.githubusercontent.com/79543272/224791652-4cab6aa7-fc4f-49b2-be0a-d833e34bf707.png" width=180px height=388.8px/> </span>

## Dark Mode / Light Mode
It also supports dark mode!


<span> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfe76y9f5jkiarfzap3i.png" width=180px height=388.8px/>
</span>
<span> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgi5eorm3i88ysjv55bc.png" width=180px height=388.8px/>
</span>

## Chat
Chat with different users and ask them how they feel!
<div> <img src="https://user-images.githubusercontent.com/79543272/236470038-83ae2be3-3196-4ad0-8f32-c7d0bfcf6321.png" width=180px height=388.8px/> </div>


## Reset password
If you forgot your password we will send you an email to reset your password!

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ocimwhwi0f8r2svwgr4.png" width=230px height=400px/>

## Performance
### Lighthouse
![Lighthouse scores](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jrh8g4y77c7zpzgrfoh.png)
### GTMetrix
![image](https://github.com/westernal/Westernal-Frontend/assets/79543272/bd6fa907-f806-4d4d-a967-35602cfca672)


## Technologies
**Front-End:** Next.js |
**Back-End:** Node.js, Express |
**Database:** MongoDB | 
**Tests:** Cypress, Jest | 
**State Management:** Redux Toolkit, React Context

## Source Code
 [Front-End](https://github.com/westernal/social-media-frontend) |
 [Back-End](https://github.com/westernal/social-media-backend)
 
## Contact Me
Thank you for reading this article and let me know if you like this project, You can contact me on:

### Portfolio: https://alinavidi.dev/
### GitHub: https://github.com/westernal
### LinkedIn: https://www.linkedin.com/in/ali-navidi/

(Also right now I'm looking for a remote frontend developer job if you company have a new I'll be happy to apply)

<a href="https://www.buymeacoffee.com/westernal" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>