Skip to content

cbh123/shlinked

Repository files navigation

Run Shlinkedin Locally

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 with npm install or yarn 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.

Charlie's Guide to Learning What's Going On Here

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!

Terminology

  • 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

Order of operations

  1. 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.
  2. 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.
  3. 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. On line 15 you can see the following line:
        {:ok,
         socket
         |> assign(posts: list_posts())
         |> assign(random_profiles: Shlinkedin.Accounts.get_random_profiles(5))
         |> assign(like_map: Timeline.like_map()), temporary_assigns: [posts: []]}
    
    Note how we're assigning to the socket posts as list_posts(). And random_profiles as Shlinkedin.Accounts.get_random_profiles(5). Then, if you navigate to lib/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.
  4. 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.
  5. 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.
  6. Learning Liveview, the docs are once again great. I also used this free course which helped.
  7. Let me know what questions and comments and thoughts you have! I can try and think of some good starter tasks too.