# ๐ŸŽ‰ Introducing Easy Pastes - Easiest way to create and share code pastes # โœจ Introduction to the app Easy Pastes is an app where users can easily paste some code they want to share with someone **with syntax highlight** and even if they want to make it public, they can do so to show other people. It is the easiest and fastest way to share code pastes and most of the programming languages are supported. You can request to add a language on the [GitHub repository](https://github.com/max-programming/easypastes). This app is fully open-source for learners to learn and to encourage people to contribute to this project to make it better. The app is live on [easypastes.tk](https://easypastes.tk/) and open sourced on [GitHub](https://github.com/max-programming/easypastes) Here is how you can use the app [Demo GIF](https://cdn.hashnode.com/res/hashnode/image/upload/v1627542797932/0TNW01u9N.gif) # ๐Ÿ‘ฅ The team @[Sunrit Jana](@janaSunrise) and I have been working on this app for the last fifteen days and it has been a great experience working with him! # ๐ŸŽจ How is the app built? Easy Pastes is using the latest and greatest technologies! The tech stack for the app is - [Next.js](https://nextjs.org) with [TypeScript](https://typescriptlang.org) - [Chakra UI](http://chakra-ui.com/) - [Supabase](http://supabase.io/) - [Clerk](https://clerk.dev/) We are using Next.js for the whole app, Chakra UI for the user interface, Supabase for the database, and @[Clerk.dev](@clerk) for authentication. # ๐Ÿง Exploring the app We'll be going into detail on how to use this app in this section. On the main page, you will be having the functionality to create a paste. ## Sign in and sign up The authentication system is powered by [Clerk.dev](https://clerk.dev) which is awesome! Before creating a paste, it's recommended to sign in because your pastes are stored for future use. And you can edit and delete **your pastes** while you are signed in. When you create a paste while signed in, it will be **your paste**. You can go to the **My Pastes** page to see what pastes you have created. And Easy Pastes also has **multi-account system** so you can sign in with multiple accounts. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627441520326/g0Q2wbzlB.png) > โ„น๏ธ Public pastes are shown on the home page. Private pastes are private and no one can view them except the author Unlisted pastes can be viewed by anyone from the link but are not shown on the home page ### Pick a language of your choice (default: none) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627288538569/f5W_L69Lz.png) ### Give paste a title (optional) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627288580340/mxqa0sED3.png) ### Change visibility and give a custom URL (optional) > โ„น๏ธ Making a custom URL and making paste private is only available when you are signed in. If the custom URL is not specified, it'll be a randomly generated id, and the pastes are public by default. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627288607758/4Ju0O4j4d.png) ### Paste the code and click the create button ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627288829506/m2t3NWbqS.png) ### Share, copy, edit, or delete the paste You will be redirected to your created paste which you can then share the link to someone, copy the code, delete and edit the paste. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627544598199/8PDX0Fvao.png) ## ๐Ÿงฑ PWA (new) With the latest update, Easy Pastes is also a PWA and it can be installed and used as an app. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627469533468/t2oxIaORT.png) ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627467543090/3Qp2GshUc.png) As a PWA, it also has shortcuts to directly open the My Pastes page ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628055406241/5PAEdAGcv.png) ## ๐Ÿ”‘๐Ÿ”’ Password protection (new) We're also now focused on security. We have added a feature consisting of protecting your pastes and storing the secure password hash in DB. No one other than you, or people can access it! This is one of the features we're really proud of! Set a password using this button ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627585106453/tERlpYXg6.png) And then visit the page where you would need to enter the password to view it ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627585196617/p-fFsybXg.png) # ๐Ÿ‘ฝ๏ธ Your profile You can change your account settings by clicking your account button on the top right and settings. But in this case, you also get the functionality to view your own pastes. When you click on the **My Pastes** link in the navbar, you will see your own pastes. > You can achieve this behaviour by simply setting the username in user settings else it will be the user id. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627289226110/q-LVjEsRi.png) On this page, you are able to view pastes you have created and you can even filter them by All, Public, Unlisted, and Private. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627289409250/qfRigANF7.png) If the page is viewed by someone else, they will only be able to see the public pastes you have created. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627289496084/wwsWKc1A4x.png) # ๐Ÿ’ซ Conclusion And that is how Easy Pastes works! Thanks to Hashnode for organizing this hackathon. It helped me so much to build my first full-stack web application. I want to thank the folks over at Discord and Twitter who helped me to improve this app by giving their valuable feedbacks. The Clerk team on Discord was very helpful to us. They were very helpful whenever we had any queries regarding Clerk. - @[Tapas Adhikary](@atapas) - @[Savio Martin](@saviomartin) - @[Avneesh Agarwal](@avneesh0612) - @[Matej Boลกnjak](@mbosnjak) - @[Ishrar G](@ishrarg) Sorry if I missed someone :) Feel free to contribute to the project on the GitHub repository and give your suggestions and how the app works in the comments. %[https://easypastes.tk] %[https://github.com/max-programming/easypastes] ## ๐Ÿ“ˆ Updates ### 27-07-2021: - With [this commit](https://github.com/max-programming/easypastes/commit/ecc885663f9ef8db779e996df57996f660200afa) , swears and bad words are filtered from the Title and Custom URL ### 28-07-2021 - Made Easy Pastes a PWA - Custom [404 page](https://easypastes.tk/404) ### 29-07-2021 - We're here with another amazing update! Added password protection - Fixed the heading and footers. ### 02-08-2021 - Viewing paste in raw mode feature