Personal Web site

next steps

• expand the skills section
• add a text editor
• implement SWR and a service layer to fetch the data

Features

• Nextjs
• TypeScript
• ESLint
• Prettier
• Tailwind CSS
• next-i18next
• Jest
• React Testing Library
• Docker
• Storybook
• [] SWR

Architecture

For this project I used the atomic design pattern (here is my documentation). So I will structure the code in the following way:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

Component structure

I made the component structure like:

project
└─── <component>
    │-  index.ts (required, the provider of the component utilities for the rest of the project)
    │- <component>.tsx (required component file)
    │- <component>.spec.ts (required, in the future)
    │- <component>.module.css (optional)
    │- <component>.types.ts (optional)
    │- <component>.constants.ts (optional)

Notes

• https://notiz.dev/blog/floating-form-field-with-tailwindcss
• https://unicode.org/emoji/charts/full-emoji-list.html#1f468_200d_1f3eb

Things that I want to implement

• Nextjs built-is-css
• JSS

Getting Started

First, install dependencies:

npm i

Second, run the docker development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Documentation

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• God like Docker tutorial
• Docker images article: Talk about hot reloading
• Docker documentation multiple compose files
• Docker compose file
• Docker compose useful commands
• Setting up Jest (with the Rust Compiler) on Next.js
• Upgrade React to v18: Because I get some problems installing the @testing-library/react package.
• Update Next.js to v12: Because I get some problems installing the [email protected] package.
• Test with i18next and Jest: Because I get some problems with the translation instance.
• Getting started
• tailwind and css variables
• css variable using js
• Adding stortbook on nextjs
• Nextjs, tailwind and storybook
• Storybook addon to nextjs

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.