Building a GitHub Gist Clone with Phoenix LiveView - Part 1: Project Design

foreign what's up I'm your Elixir Mentor Jacob blitzo we're kicking off our GitHub gist clone series with project design why is it crucial imagine building a house without a blueprint sounds challenging right it's the same with software well-structured UI and uml diagrams are your blueprints your key to building projects quicker with fewer delays and more accuracy so let's get started let's first start by heading over to just.github.com GitHub gist is a feature provided by GitHub that allows users to share Snippets of code or other notes gists can be thought of as many repositories which you can use to share code Snippets notes to-do lists and more gists can either be public or private public gists can be viewed by anyone can be shared forked and commented upon by other users so let's just go ahead and run through what this looks like first we can put a just description in there and I'm just going to copy and paste some stuff I already have written out and then you can put a file name in with an extension and that helps for syntax highlighting and things so we're going to dot ex because well we're using elixir in this course and then you go ahead and we can put in a small little code snippet and there you go as you can see nothing is highly or there's no syntax highlighting in this until we go to create it and then we can go ahead and say create secret gist and there you go now you see syntax highlighting and comments and all that good stuff and then we can also edit and delete private gists also known as secret gists are not listed publicly or searchable on GitHub and are more intended for personal use or sharing a specific URL so each gist that you create is its own own repository where you can manage revisions even push and pull code like a regular GitHub repository they also support multi-file and markdown rendering for code review and quick presentations designing our application our goal is to strip back features and treat this project like an MVP that's minimal viable product so this allows us to build something faster and then we can plan and add features down the road as our platform grows this is exactly what you would want to do when you're building your own app so let's pull up our designs so you'll see that we can create a gist we are just going to focus on publicists in rmvp so any user on our platform will be able to see them and after creating a gist you can view it and this is where you'll see syntax highlighting based off the file extension and here you can see it and we're actually going to be using a library that will take care of the syntax highlighting and and it'll be really cool and a user can comment below and then you can also hit this bookmark up here and it will save it if you own this gist you'll be able to edit and delete it as well then you'll see a list of gists created this will be ordered by the most recent one created and then descending from there you'll also be able to filter through results in our search bar right here so it's going to be really cool and then we'll move on to where you can see a list of your saved gists and if you save them from other users they will show up here and then if you want to see all the gists that you created we're going to just be able to click on your gists and you'll see them all there as well those will be descending as well so most recent at the top and then descend from there that might be a sending order it's it hurts the brain sometimes and then from here we just go into user management views so the ability to change our password our email with the account our registration views our sign-in views our reset password View and then our confirm account View and that is the designs that we're going to be building out we stripped it way back right we're just making public gists we'll be able to save and look at code comment on code there's a lot of features there now let's go ahead and look at our uml diagrams uml is Unified model in language and there to visually represent the structure of our application so let's look at what we have here and we have class diagrams this represents the tables or schemas in our application so this is their attributes and the relationships between them all so as you can see we have a user object here and that will include an email hashed password and a relationship to the gists and a relationship to saved gists and then if we go over we can look at our gist object here and that will be Associated to a user we'll have a name a description the markup text and then our save gists are is going to just be a jointer table and what that means is it just holds reference to the user ID of the account that saved it and the gist ID of the gist or code snippet they want to save so it's relatively simple the architecture of this app for as involved as it is it is really simple and cool and I'm just realizing now that we also need to have a relationship between our gist object and comments so let's go ahead and make that right now I'm going to just copy this just object and paste it over here and what we'll do is so it will have a user that it's created to right has one we're going to have to probably unlock let's see ungroup selection perfect and so it's going to have a user Associated to the comment so that relationship will exist and then it also is going to have an association to adjust so we're going to go ahead and say gist and it has one right and then let's just rename this this is a comment all right and then all we're going to have here is um I guess we'll say markup text for our comment so now we can delete that there isn't going to be a name and then markup text is the comment and then we want to ungroup this guy here and move all these down and this is going to have a has many like this so I'm going to just go ahead and copy the user field here and this is going to be comments and then instead of has one it will have it has many and then we can even make our our little relationship Arrow here relationship Arrow from here to here and then there we go so this is our data architecture for this whole app and it's pretty easy it's simple and so this is going to be a fun series and then when this is over I'm going to open up this project as an open source project and we can plan out features and our community will be able to build it out and make it even better as time progresses so I'm really excited about that little bit of it and yeah this is going to be a fun project guys so we're going to be diving into a lot of great stuff with Phoenix and live view join my Discord server Elixir Mentor if you have any questions or just want to hang out and chat that link is in the description if you want to learn how to build scalable production ready full stack and rest API Solutions hit that subscribe button now I'm Jacob blitzo your Elixir Mentor see you in the next video okay

Channel: Elixir Mentor

Views: 5,446

Keywords: Elixir programming, Phoenix LiveView, GitHub Gist Clone, Elixir tutorial, Phoenix 1.7 tutorial, Web development, Application design, Building web applications, Coding tutorial, UML diagrams, Elixir Mentor, PostgreSQL, Docker

Id: dnp0rQLNQZY

Length: 8min 41sec (521 seconds)

Published: Thu Jul 20 2023