Forging My Personal Space


I have a passion for developing 'Portfolios' and exploring innovations in personal websites. I believe that creating a custom platform is the most effective way to showcase skills. This isn't my first venture into creating a personal online presence. Honestly, I don't want my personal website to become just another lost entity in the vastness of the internet. I want it to be an authentic representation of who I am and my skills. That's why I chose to develop this complex platform, which, as I write this article, takes the form of a multilingual blog with a completely customized Content Management System (CMS).

Fullstack Development

In terms of Fullstack, I'll start by explaining the tools I use to make my project comprehensive, covering both the BackEnd and FrontEnd. For the construction of the BackEnd and FrontEnd, my primary choice is NextJS, in version 14. NextJS is essentially a ReactJS Framework that excels in Server-Side Rendering. In other words, it allows content rendering on the server. The embedded presence of NodeJS in NextJS enables its use as a Fullstack solution.

To further simplify development, I turn to Prisma ORM. This framework plays a crucial role in mapping, typing, and requesting data from my database, which is essentially Planetscale. This combination of technologies not only provides a practical development experience but also establishes a robust foundation for the efficient implementation of features in my project.

Exploring NextJS 14 and Server-Components

By adopting version 14 of NextJS, I open the doors to using Server-Components, an innovative feature that provides the ability to make requests directly on the server without exposing sensitive information to the user. These components not only provide an additional layer of security but also present a more efficient approach to delivering static content, resulting in a faster and more responsive experience for users.

Prisma and Planetscale

By incorporating Prisma as my Object-Relational Mapping (ORM) and Planetscale as my primary database, I establish a solid infrastructure for the efficient and secure management of data in my project. Prisma simplifies interaction with the database, providing a powerful abstraction layer for data mapping and typed queries, enhancing productivity and code clarity.

It's worth noting that Planetscale, in addition to offering exceptional scalability and performance, features a notable free plan that deserves special attention. This free option not only enables initial projects but also stands out as a robust solution for growing initiatives. Its distributed infrastructure efficiently handles considerable volumes of data, ensuring a reliable experience for end-users. By considering Planetscale's free plan, I not only optimize costs but also secure a solid foundation for the future expansion of my project.

Exploring FullStack with Next.js Server-Actions

Let's now delve into the practical functioning of Server-Actions in Next.js, incorporating Prisma to make database requests. The updated example highlights the simplicity and effectiveness of this approach, as demonstrated in the following code snippet:

'use server';

import prisma from '@/lib/prisma';

// Starting with the creation of an asynchronous function
export async function getPost({ slug }) {
  // We receive only the SLUG of the post as a parameter
  return await prisma.posts.findMany({ where: { slug } });
  // We use the SLUG to make a database query with Prisma
}

In this example, by incorporating the "use server" marker, we explicitly indicate that this is a Server-Action. The getPost function uses Prisma to make a database query, filtering posts based on the provided slug. This implementation exemplifies the elegance of the integration between Server-Actions and Prisma in Next.js, providing an efficient and direct way to handle server-side operations.

Custom CMS with TIPTAP

My journey in developing this platform also includes creating a fully customized Content Management System(CMS), comparable to a "personal WordPress." The driving force behind this unique experience lies in the powerful text editor, TIPTAP.

By adopting TIPTAP, a library for building WYSIWYG editors, I significantly enhanced the editing and content creation experience. Customizing content delivery with Next.js, Prisma, and other technologies not only simplified the administration of my content but also offered an intuitive interface. This allows me to create and edit articles easily, anytime and anywhere.

With the flexibility of TIPTAP, I explored advanced text formatting features, providing users with a unique and user-friendly reading experience. This initiative reinforces the idea that, by combining powerful technologies, we can create custom solutions that meet the specific needs of the project.

Creating Elements with Tailwind CSS, CVA, and Radix UI

In addition to the custom CMS, the customization of the design of my website is an essential piece of what I've built. Using the utility-first approach of Tailwind CSS, I efficiently styled each component, maintaining clean and organized code.

Integration with the Class Variance Authority(or CVA) for Tailwind further facilitated the management of state and style logic, providing a smoother development experience, thus allowing the creation of a mini-design system. Additionally, the incorporation of Radix UI offered a collection of accessible and ready-to-use components, enriching the interface of my website with interactive and responsive elements.

This synergy between Tailwind CSS, CVA, and Radix UI not only simplifies the customization process but also elevates the design of my website to a new level, reflecting my aesthetic vision in a unique and striking way.

Heading Towards the Future: Challenges and Opportunities

This initial point in the journey of building and customizing my website represents just the beginning of an exciting trajectory. While I've achieved significant advancements in implementing the custom CMS, visual customization with Tailwind CSS, CVA, and Radix UI, I acknowledge that there's much more to come. This project is not just a test of my capability but also of the platform itself, as well as a careful preparation for future engaging content.

As I move forward, I envision the incorporation of courses, tutorials, and closer interaction with the audience. This is only the prologue to a broader story where technology and creativity intertwine to create a dynamic and educational platform. The challenges I've faced so far represent opportunities for continuous learning and improvement.

I invite you to follow this ever-evolving journey. This website is not just a digital space; it's an invitation to explore, learn, and grow together. I'm excited about what the future holds and look forward to sharing more meaningful content and interactions. Together, let's shape this digital space into a vibrant and collaborative community. Thank you for being part of this thrilling journey!


Copyright 2024 · Made by Rychillie