Як був створений цей вебсайт з Next.js

While previous versions were focused on demonstrating my tech skills, portfolio showcase, etc., the current website is mostly created as a space to collect and share my notes.

Design

I'm not a web designer, so the idea was to use some UI library with ready-made UI components.

Easy to customize styles throughout the app.

Tech Stack

Before starting any project I write down what I expect from it. So, I built a list of the next requirements for my personal website/blog:

1. No hardcoded content. Separate content from the code base.
   The idea is to build a system where I can update any content without going directly to code. Easy to fill content.
2. No hardcoded content. Separate content from the code base.
   The idea is to build a system where I can update any content without going directly to code. Easy to fill content.
3. SEO support
   It's a blog. So would be nice to have the possibility to easily share posts on social media, and help search engines find my website.

What I also kept in mind:

- Easy to scale in the future(add new pages, courses, etc.)

In the end, I settled for Next.js, Prismic.io, Material UI, Prisma, Vercel Postgress, and Vercel for deployment.

Next.js

Next.js is a framework built on top of React. Here are some reasons why I decided to use Next.js over basic React:

1. Static Site Generation (SSG): Next.js supports static site generation, which allows you to pre-render pages at build time. This is useful for creating highly performant and SEO-friendly websites, blogs, and marketing pages.
2. Static Site Generation (SSG): Next.js supports static site generation, which allows you to pre-render pages at build time. This is useful for creating highly performant and SEO-friendly websites, blogs, and marketing pages.
3. Development Experience: Next.js comes with a great development experience out of the box, including hot module reloading, a development server, and a fast refresh feature that makes the development process more efficient.

Prismic.io

Prismic.io is a headless content management system (CMS). It allows you to separate content management from the application codebase, which can lead to faster development and easier content updates.

Reasons why I decided to use it:

1. Localization and Internationalization: Prismic.io supports multi-language content, making it suitable for building multilingual websites or applications.
2. Localization and Internationalization: Prismic.io supports multi-language content, making it suitable for building multilingual websites or applications.
3. It's free for 1 user

Material UI 5

Material UI 5 as a UI framework. Why I chose it:

1. Design Consistency: Material UI provides a set of pre-designed components and a consistent design language based on Google's Material Design principles. If you want your application to have a consistent and polished look and feel, Material UI can be a good choice.
2. Design Consistency: Material UI provides a set of pre-designed components and a consistent design language based on Google's Material Design principles. If you want your application to have a consistent and polished look and feel, Material UI can be a good choice.
3. Community and Ecosystem: Material UI has a large and active community, which means you can find a wealth of resources, documentation, and third-party libraries/extensions to enhance your Next.js application.

1const customTheme = createTheme({
2  typography: {
3    fontFamily: `${roboto.style.fontFamily}, ${arimo.style.fontFamily}`,
4    h1: {
5      fontSize: '50px',
6      fontFamily: roboto.style.fontFamily,
7    },
8    body1: {
9      fontFamily: arimo.style.fontFamily,
10    },
11  },
12  palette: {
13    primary: {
14      main: 'rgb(244, 200, 197)',
15    },
16    secondary: {
17      main: '#2e3039',
18    },
19  },
20  components: {
21    MuiCssBaseline: {
22      styleOverrides: {
23        '& a': {
24          color: 'inherit',
25          textDecoration: 'none',
26        },
27      },
28    },
29  },
30});
31
32const theme = responsiveFontSizes(customTheme);
33
34export default responsiveFontSizes(theme);

Vercel

Vercel as a hosting platform. Why I chose it:

1. Vercel offers a free tier
2. Vercel offers a free tier
3. Custom Domains and SSL: It's easy to configure custom domains and SSL certificates.

Prisma and Vercel Postgress

Prisma as the ORM for migrations and database access

Vercel Postgres as the database

So, at that point, my website was built and deployed. One thing left was to add a Contact form. I had a few options on how to implement its functionality. The most obvious way was to send data from the Contact form to my personal email using Nodemailer. However, browsing through Vercel documentation I came across the tutorial on how to use Vercel Postgres and decided to store user data in a database.

Additional libraries:

• Formik, Yup for working with forms
• Formik, Yup for working with forms
• React Syntax Highlighter for displaying code blocks in blog posts

The Future

Focus on adding posts. Add auth functionality. Add comments section.