Building Spotify with Elm-01

Johann Gonçalves Pereira — Sat, 04 Sep 2021 23:01:26 +0000

Starting The Project:

I will try to explain everything as simply and as friendly as possible so that beginners can also understand me okay?

I have a repository with all the basics parts of a project, so we just need to clone the repository and start the same project without worries.

(note: I use Linux, so I’ll make Linux examples.)

Let's start:

The first thing that we'll do it's build our work space.

Install all the dependencies from the first post.
- Elm
- Docker
- Git
- IDE
Setting up the project:
1. Make a directory to be the root of our project
2. Git Init - Clone the boilerplate and move all to the root
3. Start docker compose and check if everything is working
4. Open IDE

Set up project

I

mkdir serves to make a directory with this name, && is equal to "and", cd it's just go to this directory.

$ mkdir spotify-elm && cd spotify-elm

II

$ git init && git clone git@github.com:Johann-Goncalves-Pereira/Projects-Boilerplate.git

mv == move

$ mv ./Projects-Boilerplate/* ./

III

The boilerplate has a script that do all the work for us, so we just need to run it.

$ ./run-docker-compose.sh

Waittt, It needs to download the dependencies for us. Go drink a Coffee :) . When you come back, we should see this message:

Dev server running on http://0.0.0.0:8080
boilerplate_1  | 
boilerplate_1  | ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/
boilerplate_1  | ℹ ｢wds｣: webpack output is served from /
boilerplate_1  | ℹ ｢wds｣: Content not from webpack is served from /app/run/public
boilerplate_1  | ℹ ｢wds｣: 404s will fallback to /index.html
boilerplate_1  | Running elm make /app/run/src/App/Main.elm --debug --output /tmp/202181-30-yu80vz.wo4s.js
Success!       | Compiling ...
boilerplate_1  | 
boilerplate_1  |     Main ───> /tmp/202181-30-yu80vz.wo4s.js
boilerplate_1  | 
boilerplate_1  | 
boilerplate_1  | ℹ ｢wdm｣: Compiled successfully.

Very simple! Now you have the Scss, Elm, and JS running with fast reload. So if you change something on the folder Stylesheet, it will auto recompile the page for you, the same with elm.

Note: If you want to change or add a folder, you'll need to edit the script on: src/JavaScript/load_stylesheet.js.

Just add a new route here, like this one:

requireAll(require.context('../Stylesheets', true, /.*/));

But in any case, Open your Browser and go to the port http://0.0.0.0:8080.

You will see the boilerplate home page. You'll probably notice something like the ''debug'' on the bottom right, a button to page 2 and a Shared/Local inputs. But I won’t dive into this for now.

IV

Use this command to open Visual Studio Code.

$ code .

And now you should see this ''tree''of folders:

.
├── build
│   └── package
│       └── local
│           ├── docker-compose.yaml
│           └── Dockerfile
├── default.conf
├── elm.json
├── elm-stuff
│   └── 0.19.1
│       ├── d.dat
│       ├── i.dat
│       ├── lock
│       ├── Main.elmi
│       ├── Main.elmo
│       ├── o.dat
│       ├── Pages.elmi
│       ├── Pages.elmo
│       ├── Pages-NotFound.elmi
│       ├── Pages-NotFound.elmo
│       ├── Pages-One.elmi
│       ├── Pages-One.elmo
│       ├── Pages-Two.elmi
│       ├── Pages-Two.elmo
│       ├── Route.elmi
│       ├── Route.elmo
│       ├── Shared.elmi
│       ├── Shared.elmo
│       ├── Svg-HomeSvg.elmi
│       └── Svg-HomeSvg.elmo
├── LICENSE
├── Makefile
├── 
node_modules -> ../node_modules
├── package.json
├── package-lock.json
├── public
│   └── base.html
├── README.md
├── run-docker-compose.sh
├── scripts
│   └── run.sh
├── src
│   ├── App
│   │   ├── Main.elm
│   │   ├── Pages
│   │   │   ├── NotFound.elm
│   │   │   ├── One.elm
│   │   │   └── Two.elm
│   │   ├── Pages.elm
│   │   ├── Route.elm
│   │   ├── Shared.elm
│   │   └── Svg
│   │       └── HomeSvg.elm
│   ├── index.html
│   ├── JavaScript
│   │   ├── index.js
│   │   └── load_stylesheet.js
│   └── Stylesheets
│       ├── destroy-me.scss
│       └── index.scss
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock

The only part that is important for us, It’s the src.

src
├── App
│   ├── Main.elm
│   ├── Pages
│   │   ├── NotFound.elm
│   │   ├── One.elm
│   │   └── Two.elm
│   ├── Pages.elm
│   ├── Route.elm
│   ├── Shared.elm
│   └── Svg
│       └── HomeSvg.elm
├── index.html
├── JavaScript
│   ├── index.js
│   └── load_stylesheet.js
└── Stylesheets
    ├── destroy-me.scss
    └── index.scss

If you managed to do these steps by tomorrow, Great :). Let's start!

How can you help?

Open issues for suggestions of better approaches or ideas for the site.
Connect Discord Johann Pereira#7150
Star the Github repository.
Follow me on Github.

Source:

Author: Johann Gonçalves Pereira
Reviewed by: Nathali Thiemy Motooka

Building Spotify with Elm-00

Johann Gonçalves Pereira — Fri, 03 Sep 2021 22:29:56 +0000

In this series I’ll be making a copy of the front end of Spotify using Elm and Scss. The main goal is to improve my skills, but also teach others and create a habit of making blog posts, while improving my writing in English. Before I start, I don’t know how long it will take to finish this project, but I’ll try to finish it within three weeks.

Why Spotify? And what will be built?

So, I love the Spotify interface, it’s really beautiful, clean and have one of the best ''dark sites'' in my opinion (I love dark sites). Really, you just take a tiny peek at the site and think that this was made by very good designers.

The plan is to make the views (Elm-Html), Stylesheet (Scss) and also add some functionalities to the site, such as:

Pages (Home, Playlist, Your Library, Search).
Change playlist pages.
(SPA) Single page application with elm.
The bottom player.
And... Idk with time I'll figure it out what I need to do.

How will I execute it?

Everyday I’ll write about the progress of the project. The posts will be short and they will have a list of resources in the end.

I’ll be following the best practices (that I Know) of Elm and Scss.

What are the tools that I will use for this project?

The technologies that I will use:

Elm
- ^0.19.1
- Do I need to explain why?
Docker
- ^20.10.8
- To make our life easier
Git
- Because it’s the git
VSCode or any IDE that you like

Yes! Just that for today.

How can you help?

Open issues for suggestions of better approaches or ideas for the site.
Connect Discord Johann Pereira#7150
Star the Github repository.
Follow me on Github.

Source:

Author: Johann Gonçalves Pereira
Reviewed by: Nathali Thiemy Motooka
Blog Inspiration

DEV Community: Johann Gonçalves Pereira

Building Spotify with Elm-01

Starting The Project:

Let's start:

Set up project

I

II

III

IV

How can you help?

Source:

Building Spotify with Elm-00

Why Spotify? And what will be built?

How will I execute it?

What are the tools that I will use for this project?

How can you help?

Source: