To start your Phoenix server:
- Unlock, update, and install dependencies with
mix deps.unlock --all; mix deps.update --all; mix deps.get
- Set up a local Postgres instance, you can download a client here
- Open Postgres.app and start the server, the rest is handled by Phoneix
- Create and migrate your database with
mix ecto.setup
. (You may need to first create a postgres user with the credentials listed in ./config/dev.exs — see this page for more info.) cd assets
and install Node.js dependencies withnpm install
oryarn install
- Return to root directory and start Phoenix endpoint with
mix phx.server
Now you can visit localhost:4000
from your browser.
Note: in order for posts to successfully upload, I'll need to send you the .env
file with the AWS secret keys. But everything else should work without that.
I am putting all my thoughts here on how to introduce you to ShlinkedIn code + Elixir / Phoenix. There's a lot of stuff here but do not be discouraged!
- Elixir: self explanatory, elixir language. Docs
- Phoenix: a web development framework used for writing web apps in elixir. Docs
- Liveview (or Phoenix Liveview): this is built on top of Phoenix, and allows you to easily write real time, interative pages, without writing javascript. Docs.
- Tailwind: the css framework I use for everything, and the reason that the HTML looks messy. It's amazing. Docs
- Go through the "up and running" steps to install Elixir/Phoenix on the Phoenix docs. These docs are great. Then follow the steps above to run Shlinkedin locally on your computer.
- Watch this video on building a twitter clone in 15 min. A mixture of watching this earlier in the year, and seeing tons of hacker news rave reviews is what convinced me to try it. Also, as you'll soon see, I started ShlinkedIn 2.0 using the exact code from this project.
- Take a look at the ShlinkedIn repo, and dig around and see what makes sense to you. I think the most overwhelming part here will probably be the way the project is organized—it feels like a ton of folders and esoteric filenames and impossible to understand. The docs have a very helpful page on directory structure. But here is a concrete example of a page that you can check out and might make sense to you already: go to
lib/shlinkedin_web/live/post_live/index.ex
. Online 15
you can see the following line:Note how we're assigning to the socket{:ok, socket |> assign(posts: list_posts()) |> assign(random_profiles: Shlinkedin.Accounts.get_random_profiles(5)) |> assign(like_map: Timeline.like_map()), temporary_assigns: [posts: []]}
posts
aslist_posts()
. Andrandom_profiles
asShlinkedin.Accounts.get_random_profiles(5)
. Then, if you navigate tolib/shlinkedin_web/live/post_live/index.html.leex
you can see the html for how everything is displayed. Fun! One thing to note here, is that the html has a crazy number of class attributes. This may look very messy and ugly to you, but it's actually by design—I'll get to this later but all the CSS is using tailwind, which is all the rage right now and honestly amazing. - For gettings used to Elixir syntax, check out elixir docs. The main things I found weird with elixir are:
- There isn't a
return
keyword. Instead, functions just implicitly return stuff. This is pretty weird, but used to it now. - pipes which look like |>, and are used for chaining functions together.
- pattern matching
- The fact that you don't really use for-loops (instead, it's all just stuff like
Enum.map([1, 2, 3], fn x -> x * 2 end)
). This is tricky but does make code so much cleaner.
- There isn't a
- Learning Phoenix. I used a mixture of the docs, and skimming attached book PDF. Don't want to overwhelm you here, because the phoenix docs have pretty much everything you need to know. But the book is still a good resource.
- Learning Liveview, the docs are once again great. I also used this free course which helped.
- Let me know what questions and comments and thoughts you have! I can try and think of some good starter tasks too.