Building a full-stack application with NextJS and TypeScript

Have you ever just wanted to do a full stack project and do it in one language? With NextJS, you can comfortably do that. I familiarize well with TypeScript and building the full stack project gave me insights into the various functionalities, capacities the NextJS framework has to offer.

This is a blog portfolio platform. I looked at it like a social media platform but for software engineering projects and mostly for people who immense themselves into diverse projects like I do. Imagine a platform where you get to share the story behind your project? That is the main idea of this project. I wanted to know how extensive the NextJS framework can give me in terms of frontend capabilities, backend API capabilities, database and storage capabilities. I can say it's a wholesome platform when you include the Vercel platform for project management, storage, analytics and performance management.

When it comes to building full stack applications, you have to come up with the frontend, backend and database design. For this project, the backend design is a simple design which uses drizzle ORM for delivering communication between my API and the database. An ORM which stands for Object Relational Mapping is a technique that bridges the gap between databases and object-oriented programming languages. Here is how an ORM works: Maps Objects to Tables - ORM allows you to represent database tables as objects in your code. Each row in a table corresponds to an instance of an object. Abstraction Layer: ORM libraries create a layer between your application code and the database. You interact with objects in your preferred programming language (like Java, C#, or Python) instead of writing raw SQL queries. NextJS provides extensive documentation on the same, so check the official documentation for more information.

The project facilitates addition of projects via a form, which then validates and sends the data to the database. From the database, I used Postgres database available and hosted on Vercel and I am able to display the respective projects according to the categories, i.e., software projects, design projects. There are 2 main types of data being retrieved from the database, including, all projects and a single project. I have an API built in TypeScript still within the NextJS project that makes all the calls to the database, i.e., sending data, retrieving all data, retrieving one object per id, etc.

There is a lot to learn from this and one main take away for me is that it doesn't have to be complicated to be effective. It can be the simplest of things that we get to learn and appreciate the beauty of technology around us. The stack used include: NextJS, TypeScript, Postgres, Drizzle.