Blog
What technologies for my website?
What technologies for my website?
19 juin 2023
•
Guillaume DucuingIn this article I explain the technologies I used to code meetguillaume.dev!
Guillaume DucuingIn this article I explain the technologies I used to code meetguillaume.dev!
Javascript, the essential
I'm a front-end web developer, so it's no surprise that I work with... Javascript & Typescript! It's a flexible, fairly permissive language that I really like. I chose the React library to have super responsive content and all with the Next.js framework in order to structure the application and save me time. My choice also fell on this framework since the entire site is linked with Prismic, a headless CMS which uses Slicemachine, which favors the use of JS frameworks.
Source: Next.jsJavascript, the essential
Next.js: The engine of my dynamic website!
When I started designing my website, I wanted a solution that would allow me to quickly develop dynamic, high-performance web applications. This is where Next.js came into play.
Next.js is a React-based JavaScript framework that offers advanced features such as server-side rendering (SSR) and client-side rendering (CSR). This means that my website can be rendered on the server side to improve performance and user experience, while still maintaining the ability to make real-time updates with client-side rendering. With Next.js + Prismic, I was able to create reusable pages and components easily, which significantly accelerated the development process.
Source : prismic.ioI've used Wordpress in the past and it's a real gas plant. Coding with it involves adding code on top of code and the user interface is not very intuitive and particularly busy. Prismic is completely the opposite since we start from a blank page and build the templates for the client with the design planned with them. You create “slices” with the desired content and the client just has to add these slices wherever they want on the page. The interface is intuitive, very clean and updates are very regular. It is a CMS that requires coding everything upstream, which as a developer is much more appreciable than a turnkey and overloaded solution like WP. Each project delivered to the client is unique and efficient!
Prismic also offers a preview system to allow you to view content before publishing it online. It is also possible to locate the site very easily: you will notice in the header that I have set up 2 buttons to swap the FR or EN version of your choice. With Prismic and the addition of additional routes on Next.js, it's a breeze to add additional languages. (You still have to translate each page manually).
Source : Firebase - GoogleFor real-time data management, user authentication, I chose Firebase. It is a web application development platform offered by Google. I used Firebase Realtime Database to store and sync my data in real time. This means the website can instantly display data updates without requiring a page refresh. For user authentication, Firebase allowed me to easily set up a login system with Google (I wanted the login to be quick and easy for users). In addition and to secure sending to the database, I set up reCaptcha.
Firebase is active on all articles in the comment area!
That's it for the main points! I also used GSAP for some minor animations on the site. It's a super powerful Javascript animation library that allows you to do very cool things! Next.js and Nuxt.js really changed the way I code and some things that seemed very tedious to me have become super simple with these 2 frameworks that I highly recommend!
