Next.js Personal website

💻 Personal website using JavaScript, Next.js, React, SWR, Tailwind CSS, Jest and React Testing Library.

Live Preview   |    Configuration   |    License

Personal website buit with Next.js, React and Tailwind CSS utility-first framework.

Acceptance criteria defined for each route:

Route	Description
/	Users should be able to see my personal information (name, brief description, current location, email and the links of my social networks) and send me a message.
/blog	Users should be able to see all my posts.
/posts/[slug]	Users should be able to see a full blog post.

The home page will be pre-rendered at build time using data from GitHub API. Some blog posts will also be pre-rendered at build time. However, new posts will be rendered as users request them. All blog data comes from DEV Community API.

All of these pages are configured to perform re-generation after a few seconds. Learn more in the Next.js documentation, on Incremental Static Regeneration.

The list of the latest blog posts is fetched using the SWR library. Which performs a HTTP cache invalidation strategy. This means that first the component will return the data from cache (stale), then it will send the fetch request (revalidate), and finally, it will come with the up-to-date data. In this way, the data will be updated constantly and automatically.

An additional API endpoint (/api/contact) has been created to handle sending emails from the contact form. The SMTP Service provided by SendGrid was used for this purpose.

An integration with Google Tag Manager was also implemented. This can be used to manage measurement and marketing optimization JavaScript tags (such as the Google Analytics tag).

The code base is covered by automated tests with Jest and React Testing Library. React Testing Library is a lightweight solution for testing React components. When testing with it, we render our React components and then assert on the output. Since we test the user behaviour, we can refactor implementation without touching our tests.

The website is hosted on Vercel. And a CI workflow created on GitHub Actions is responsible for automatically test the source code, generate a coverage report and upload it on Codecov. All these jobs are activated by a push or pull request event on main branch.

⚙️ Configuration

To clone and run this application, you’ll need to have Git and Node.js installed on your computer.

From your command line:

# Clone this repository
$ git clone https://github.com/dyarleniber/next-personal-website.git

# Go into the repository folder
$ cd next-personal-website

# Create a new .env.local file based on .env.example and set new values
$ cp .env.example .env.local

# Install dependencies
$ npm install

# Run the app in the development mode (open http://localhost:3000 to view it in the browser)
$ npm run dev

To run the tests, run the following command:

$ npm run test

For more information about the deploy process, access the Vercel website.

📝 License

This project is under the MIT license. See the LICENSE for more information.

---

Made with ♥ by Dyarlen Iber 👋 Get in touch!