AshishRajIITI/strive-bw1-spotify-clone

BW1 Spotify Clone

Our first build week project - a clone of the Spotify Web App.

Each team member took ownership of building a specific page and also in developing beskpoke dynamic interactivity.

Site

Spotify Clone - live demo

Stack

Tools, libraries and awesome tech sanctioned for this project

Major languages - HTML, CSS, Javascript(ES6)
Frameworks - Bootstrap v4.6
Technologies - Netlify Hosting & CDN
Infrastructure - Github CI

Devops

Our git development workflow as follows:

Main branch for live production/deployment on netlify hosting.
Development branch for stanging and testing so any rough commits don't get pushed straight into production (main).
Local development branches for feature development.

                             _______       _____                        
                             ___    |      __  /___________ _______ ___ 
                             __  /| |      _  __/  _ \  __ `/_  __ `__ \
               Development   _  ___ |      / /_ /  __/ /_/ /_  / / / / /
               Staging       /_/  |_|      \__/ \___/\__,_/ /_/ /_/ /_/ 
                   ^
Production         |                        
Main branch        |       
^  <-------------- |
|                  |\
|                  | \
|                  |  \  local feature branches merged into dev/staging for  
|                  |  /  testing before being merged to main/production   
|                  | /   ex. branch: toni/header-img-fix  
|                  |/ 
|                  |
main ------------ dev <------> freature branches (Ekow, Toni, Enrico & Sean)

Team Git refresher guide (before pushing and merging ;)

git pull - pulls latest changes from the remote upstream on whichever branch you are on
git branch - shows all local branches
git checkout (branch name) - switches to a new branch
git checkout -b (branch name) - creates a new branch and switches to new branch
git branch -d (branch name) - deletes branch
git status - shows local file changes (edited and non committed or added files staged for commit once added to staging)
git add . - adds all edited and changed local files to staging ready for commmit
git commit -m "message" - commits all added staged files (basically think of committing like saving your files locally)
git push - will push the files up to the remote / origin on the branch you are on.

Always switch into dev every new session and pull latest changes (you could do the same for master, so you always have up to date master and dev branch)
Create or switch to your own feature branch, don't work directly on dev/master/main (if not yet created, create a new feature branch from the latest dev branch)
Remember before merging make sure you always update and pull latest changes on dev
Important!!! Resolve any conflicts with your team mates if any arise while trying to merge your feature branch with the development branch.
If you manage to merge without conflicts then you can push your awesome work upstream to the origin remote.

Happy coding future ex google, ex facebook tech leads ;)

Getting Started

Git clone the repository to your local computer, use LiveServer to view in development.

Prerequisites

Visual Studio Code and LiveServer plugin for serving the index.html file in your local browser.

Deployment

Our 'Main' deployment branch is CI into netlify so any pushes to the main branch will auto publish to Netlify hosting and edge CDN.

Team

👤 Ekow

👤 Toni

👤 Sean

GitHub: @githubhandle
LinkedIn: LinkedIn

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project, every star means something, show us some love :)!

Acknowledgments

To our Strive mentors:

Luis
Stefano
Tatiana

📝 License

No need, this is freely available.

AshishRajIITI / strive-bw1-spotify-clone