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 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.