My Portfolio

Presentation of the project

This is my first ever project made with ReactJS and NextJS. The idea was to build a portfolio with my favorite technologies so I could experiment with them and learn how they work and get a job where I could work with all of them.

The steps of building this project

This whole project was a big challenge for me since I had to learn how to use TypeScript, NextJS 13, and Server vs. Client components. Here are the steps of the whole project.

Designing my portfolio 

I started by designing this project on Figma, I am not a designer, but after seeing many models, and developing many websites for 3 years, I got the basics of design. So I made a basic model of the home page and the project page.

Building the UI

 I never really worked with React and NextJS applications, and since I am used to writing Custom CSS, I wasn't sure how to build the UI. After some experimentation, I decided to use Tailwind CSS.

Designing the database

Since this is my first completely custom application and I am used to working with some CMS, fetching data was a mystery to me. I am used to just getting the data through a Twig when I was using CraftCMS or just with Elementor for WordPress fetching the data for me. Then I discovered Prisma OSM, an easy database management framework that allows me to create the tables in a schema file, push it, and fetch the data easily. I linked Supabase and then

The fun of Authentication

Authentication is something I have always been scared of. The security, the how does everything work... I thought that Supabase would work out. But after experimenting with everything, I noticed that all the requests are made on the client side! This is not practical, because the API route and the API token are being exposed in the network tab... I wasn't sure this was a good thing... Did some research, and this API token is very limited in what's possible to do with it, but I was still not liking it. After some discussion with some dev friends, we agreed this was not that much of a good thing. So I decided to go to a good old MYSQL database, good thing that the Prisma OSM framework has a schema file so I just pushed the database schema and everything was ready. Then after some research and experimentation, NextAuth.js was the winner of my authentication provider. Linked with Github and the database to check if the user exists, I was able to make a secure server-side authentication!

What I learned

As I said many times, this is my first project using ReactJS, and I am going to say that, at times, it was a challenge. The authentication part of the website was the most challenging part of it all. Trying to secure something that is not meant to be, Supabase is made so you can fetch data and log in from the client side. When I set up NextAuth.js, I faced so many issues, trying to understand and convert the obsolete documentation. When I switched databases, I learned how to fetch, mutate, and delete data with MySQL2 directly in Javascript, this was fairly easy, I just needed to know how SQL works.

As this project is coming to an end, I plan to make updates to this project and experiment with all of it, this project will stay in constant evolution.