This project has three main parts:This Frontend web app.Discord Bot built with Typescript and Discordjs.MySQL database in Planetscale.Featured technologiesTypescriptJavascript superset that makes it actually safe (and kinda fun) to use.NextjsNext is the Javascript/React framework that I chose for this project, since it's currently the one that interests me the most and fits my needs.TailwindI really love how much Tailwind speeds up my CSS and I consider it the best way to have CSS in the same file as your component.Shadcn/ui.I chose to use a Component Library like Shadcn/ui because it allowed me to be more focused on my code, instead of styling. It increased my development time, and it's the one that I find more easy to customize if I need to.Shadcn/ui needs Radix-ui to work.Prisma and MySQL with PlanetscaleI'll always be against writing SQL manually. A person makes mistakes daily but those mistakes should never reach your Database. Prisma is an ORM (Object Relational Mapping) that works as a layer between your Frontend/Backend and your Database. All the SQL operations are Javascript/Typescript methods with great naming. You can basically type what you want and it will be a valid SQL operation.Next-AuthAuthentication has never been easier than with Next-auth.Check all the other packages in the package.json file.Core featuresFROM THE WEBSITE:Create a "Server" in the Database with the same ID as your Discord Server (required by the Discord Bot to work).Search for all the nades in all the servers you're a member.Search for all the nades in a specific server.Leave a server so you won't see the server's nades.AS SERVER ADMIN/OWNER:Manage the server nades (see all pending nades, approve nades, edit and delete them).Manage the server members (see all members, ban a member from searching your nades or unban a member, give/remove ADMIN role).Delete your server with all the nades.FROM A DISCORD SERVER:Upload nades only if you or the server owner created the "server" in the website previously.The Discord Bot is always checking in the shared database if the server he's working on exists.Search for a specific nade or nades that match your query (nade type, author, map, title or description).

My friends and I really like competitive video games, we play CS:GO almost every day and usually, we manage to be at least five, and since CS:GO is a 5v5 game, we don't have to deal with unwanted situations from strangers.However, every now and then when some friend is busy we have to play with another person we don't know and, sadly, it is an awful experience most of the time: from people who is really toxic, to someone who it isn't but clearly doesn't play with the same competitiveness as us and doesn't mind to lose.We have a text channel for those situations, kind of like a Death Note or blacklist, in which we register them with their data (profile link, profile id, name, and profile screenshot), but all as basic text/simple discord message.To make it fancier and reliably, I decided to build a really simple discord bot, connected to a MongoDB Atlas database, and add the functionalities of adding a new user, listing all users, and checking if a user exists on the blacklist.I still need to implement more stuff, like show the final outcome before actually sending the new user to the database, to be able to check if you write something wrong, or delete someone from the database without me having to actually login into MongoDB Atlas, but since we play really often, I needed to deploy my discord bot ASAP.

Although this wasn't my first project, I've wanted to make my portfolio since I started learning web development. For some time I thought about doing my portfolio only when I had at least a few projects to show. Still, after gaining some experience while working on my projects I got excited about using all that new knowledge. Let me start by explaining why I chose the technologies and packages that I used for this project:Why Nextjs? Simple, because it's way better than React. It handles routing way better than React (although React doesn't even have built-in routing), it handles a lot of under-the-hood optimizations, the developer experience is really good and the most important aspect of Nextjs is: data fetching. Knowing ahead that my portfolio was going to have a blog and works section, I had to find a way to fetch those posts/works the fastest way possible, without slowing the user experience on my website, and update that data when I created a new post/work. That's when ISR (incremental static regeneration) comes in.Why Chakra? I just love this library. Lately, I've been hearing good stuff about Mantine, but Chakra was the first library in that I felt comfortable coding and using/customizing their components. It has really useful and pretty components like Modals, the Menu that I use for the mobile navbar, tooltips, and well-animated skeletons.Node + Express. Currently, my backend is small. At first, I was planning to have an Admin section with JWT authentication, to be able to create new posts/works. But if I wanted to do that I would've to create or implement a rich text editor, figure out how to get the content with all the necessary stuff for styled text, handle upload images and store all of that in my database (which it was going to be Mongo, since I was going to store documents). I had a headache while thinking about that and decided to not reinvent the wheel and use Sanity. As for now, I use my backend to communicate with the Twitter API to get the information you see in the floating cards at the top of the website. Also, to not exceed the number of requests that the Twitter API has, I used toad-scheduler to schedule the API calls every 40 minutes. Finally, I deployed my backend in Railway.And finally, Sanity.io. Sanity.io is what I'm using right now to create and publish this work post. Is a headless CMS, so it only handles the data I want to fetch and show on my website. I'm also planning to replace the hard-coded Bio section on my landing page with Sanity.io content, so I can update it without having to touch my code.