Forem: Atashi Sato

My Real Project: FREE ATS CV and Resume Builder

Atashi Sato — Thu, 31 Jul 2025 14:54:33 +0000

I'm an enthusiastic web developer. Web development started as a hobby for me, but I stepped away from it for several years. A few years ago, I decided to return to the field to catch up on the latest trends and technologies. Since then, I've immersed myself in various programming languages, libraries, and frameworks.

I now have a solid understanding of HTML, CSS, JavaScript, Node.js, Next.js, React.js, MySQL, MongoDB, PostgreSQL, MariaDB, Strapi, Contentful, JSON, and many other related concepts and functionalities.

I'm capable of deploying projects on any hosting platform, integrating various APIs, and, in principle, developing complete full-stack web applications.

Artificial intelligence has been a significant help in my learning journey and project development. With AI's assistance, I've built several websites, including an AI Blog where I publish AI-generated blog posts.

Project Overview

I have already done a Free ATS CV and Resume Builder web application. This platform will enable users to create and manage their CVs and resumes online, offering features like PDF and other format downloads, as well as Google Drive sharing functionality.

The primary goal of this project is to provide a sophisticated, free platform where individuals can create ATS (Applicant Tracking System)-friendly CVs and resumes.

Current Development Status

I've already started working on this website and am making regular updates daily and weekly.

The Free ATS CV and Resume Builder is currently live. I'm using Next.js for the frontend and MongoDB for the backend to store user data.

A core objective for me is to ensure the complete security of user personal information and other data. Soon, as the project approaches completion, all user data in MongoDB will be fully encrypted, making it unreadable and undecipherable even by administrators. In the future, I plan to release the codebase on GitHub as an open-source project.

Implemented Features

Currently, the website includes the following functionalities:

Authorization/Registration System: Secure user sign-up and login.

Profile Editing: Users can manage and update their personal information.

Dashboard: A personalized area for users to manage their CVs and profiles.

CV Creation and Saving: Users can create and save multiple CVs.

PDF Download: Users can download their created CVs in PDF format.

Upcoming Features and Public Profiles

At present, only one CV template is available. However, I am actively working on adding 10 new templates within the next week.

Additionally, registered users can control the visibility of their profiles from their dashboard, choosing between public or private status. By default, all profiles are private and must be explicitly made public by the user. If a user makes their profile public, they'll receive a unique shareable link. Private profiles remain inaccessible to others.

The purpose of the public profile page is to provide a visually appealing, resume-like online presence that users can directly share with potential employers.

For optimal search engine optimization (SEO), the public pages of the website are equipped with Open Graph tags and essential meta-information.

What is Offshore Hosting and Why it need

Atashi Sato — Tue, 11 Mar 2025 21:39:26 +0000

The role of the state in people’s daily lives is expanding more and more as time goes on. With the introduction of new regulations and laws, governments are attempting to increasingly restrict speech of freedom. The online world is no exception.

Any information spread on the internet—be it texts, photos, videos, or anything else—is inevitably stored somewhere. You might think you’re protecting yourself or that your information is securely stored on a reliable hosting service or server, but in reality, that’s not entirely true.

Ultimately, the state can “track down” any information by approaching the company where you store it, such as on various servers. In fact, any government can contact a hosting provider—sometimes with a court order, officially—and retrieve your data.

If you want to protect your information, you need to use several methods together.

For example, there are so-called offshore hosting services (in this blog post - Offshore Hosting 2025: Protection of Sensitive Data and Freedom of Speech, I’ve written about various offshore hosting options and their services, which might be useful to you).

What does offshore hosting mean?

In the traditional sense, offshore hosting means that the hosting service you use is located in a different country from yours—one with a legal framework different from your own country’s regulations.
For instance, if you’re in the U.S., it implies that the hosting should be in another country, like the Netherlands.

You can research your country’s legislation to see how well it protects personal information and how reliable its legal system is, because in any case, if they need to, they can obtain any information.

Additionally, when choosing an offshore hosting service, you should select a country with a relatively better legal system that effectively protects personal data. Some hosting providers even offer registration without requiring personal information.

Personal information is considered relatively well-protected in places like the Netherlands, Iceland, and Sweden.

It’s important to consider the physical location of the server where you plan to store your information.

How to Fetch and Display Blog Articles from Contentful in a Next.js Application

Atashi Sato — Wed, 22 Jan 2025 23:07:00 +0000

In my previous blog post, I explained how to connect your Next.js application to Contentful CMS, where you can store and manage your blog articles.

In this post, I’ll show you how to fetch those articles, retrieve specific data like the title and publication date, and display them on your Next.js app using server-side rendering (SSR).

Overview

Before diving into the details, let me quickly summarize what you’ve done so far and explain the workflow.

What You’ve Accomplished

In the previous blog post, you:

Set up Contentful CMS to host your blog articles.

Created a Content Type with fields like title and description to store article-specific data.

Built a Next.js application that serves as the front end to display these articles to your audience.

Now, it’s time to fetch the articles you’ve added to your CMS and display them on your application’s page, making them accessible to readers.

The Goal

For this example, let’s create a page at /pages/articles/index.js where you’ll display a list of articles with the titleand publication date.

How to Display Articles

Your Contentful Content Type automatically provides an endpoint that contains your articles. To display these articles in your application, you need to fetch the data from this endpoint and render it on your page.

There are two main ways to fetch data in a Next.js application:

Client-Side Rendering (CSR)
Server-Side Rendering (SSR)

Why SSR is the Better Choice

If you fetch data using Client-Side Rendering (CSR), all the data will be loaded directly into the client’s browser. This includes every single article stored in your Contentful CMS, not just the one currently being viewed.

For example, if a user is reading an article titled "How to Create a Next.js App", their browser will load not only this article but all other articles as well. This approach has several drawbacks:

Security Concerns: The endpoint where your articles are stored will be exposed in the browser, making it accessible to anyone.

Poor SEO: Search engines cannot effectively crawl your content if it is fetched on the client side (More about SEO read: The Ultimate Guide to SEO Optimization in Next.js for Beginners).

To demonstrate this, you can inspect the network requests in your browser (e.g., Chrome > Inspect > Network). You’ll notice that every article is downloaded to the client’s browser, even though the user only sees one article on the page.

For these reasons, Server-Side Rendering (SSR) is the recommended approach. With SSR, the data fetching happens on the server, and only the requested data is sent to the client.

Fetching Articles with SSR

Below is an example of how to fetch and display articles using SSR in a Next.js application. The following code will render the titles and publication dates of your blog articles on the /pages/articles/index.js page:

// Import the Contentful client
import { client } from "@/lib/contentful";

// Fetch data from Contentful during SSR
export async function getServerSideProps() {
  const response = await client.getEntries({
    content_type: 'myblogs', // Replace with your Content Model ID
    select: 'fields.title,fields.date', // Only fetch title and date fields
  });

  const articles = response.items.map((item) => {
    const rawDate = new Date(item.fields.date);
    const formattedDate = `${rawDate.getDate().toString().padStart(2, '0')}/${(rawDate.getMonth() + 1)
      .toString()
      .padStart(2, '0')}/${rawDate.getFullYear()}`;

    return {
      title: item.fields.title,
      date: formattedDate,
    };
  });

  return {
    props: { articles },
  };
}

// Render the articles on the page
export default function ArticlesPage({ articles }) {
  return (
    <div>
      <h1>Blog Articles</h1>
      <ul>
        {articles.map((article, index) => (
          <li key={index}>
            <h2>{article.title}</h2>
            <p>Published Date: {article.date}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Explanation of the Code

Fetching Data on the Server The getServerSideProps function is used to fetch articles from Contentful during server-side rendering. Only the title and date fields are fetched to minimize the amount of data sent to the client.

2.Formatting Dates
The raw date retrieved from Contentful is formatted into the DD/MM/YYYY format on the server side. This ensures that the client receives properly formatted dates, preventing any hydration errors or mismatched content between the server and client.

3.Displaying Data
The ArticlesPage component renders the fetched articles as a list. Each list item includes the article’s title and publication date

Next Steps

Once your articles are displayed on the /pages/articles/index.js page, the next step is to create dynamic pages for individual articles.

For example, clicking on an article’s title could take the user to /pages/articles/how-to-create-nextjs-app, where they can read the full article. To achieve this, you’ll need to set up dynamic routes in Next.js and use the slug field from your Contentful Content Type.
I’ll cover how to create dynamic routes and generate individual article pages in my next blog post.

If you found this guide helpful, be sure to follow my blog for more content.

How to connect nextjs app to contenful cms - 2025

Atashi Sato — Tue, 21 Jan 2025 08:54:01 +0000

Hello, I am an amateur web developer, or more precisely, self-taught. I’ve learned several programming languages to a certain extent, and I’m capable of solving fairly complex tasks and challenges. It started as a hobby, but recently, I’ve delved deeper into it.

Now I’m building my own AI Blog. I’ve decided to share my knowledge with you, showing how things are done and providing everything with code examples.

After following this guide, you’ll have half the work done for your own blog. I’ll share the continuation in the next article, enabling you to fully set up your blog.

This is a very simple and detailed guide on how to connect a Next.js app to Contentful’s CMS, allowing you to create a news website or your own blog.

This guide is truly practical, as it’s written and tested using the most up-to-date methods.

Step 1: Register on Contentful

First, you need to register on the Contentful website and create an account.

Once you’re logged in, go to Content Model and create a new Content Type (name it in lowercase, e.g., myblogs).

Since this guide is focused on creating a blog, let’s proceed with that example.

What does a blog need? At minimum, a title, description, publication date, and slug. It may require additional fields, but let’s stick with these for now.

Above on image example is from my blogs contenteful account, I have some extra fields.

Accordingly, you need to create fields in the Content Type for these properties. As you try adding fields, you’ll figure out which types of fields you need. Don’t rush—experiment, modify, and play around. There’s no problem if you make a mistake. Just remember to add the fields you’ll need and ensure they are relevant.

Once you’re done adding the fields, go to Content, create a few entries (articles) to test with, and publish them.

At this point, Step 1 is complete. You’ve created the minimal infrastructure necessary for a blog. Now, it’s time to connect it to your Next.js app so it becomes accessible and visually readable to others.

Step 2: Create an API Token

The next step is to create an API token, so your front-end application can access the blog API and fetch the articles.

Connecting Contentful to a Next.js App
To display the articles you’ve added to Contentful in your Next.js web app, you need to connect your project’s endpoints to the Next.js application.

1. Create a Next.js App

First, create a new Next.js app by running:
npx create-next-app@latest my-blog
2. Then install Contentful in your Next.js

npm install contentful
3. Set Up Contentful Integration

Next, create the following file:
/lib/contentful.js

Add the following code to the file:

// lib/contentful.js
import { createClient } from "contentful";

export const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
});

4. Configure Environment Variables

Create a .env.local file in the root of your project. This file will store your Space ID and Access Token securely. It should look like this:

Click on the Open code sample and the you see your Space ID and Access Token.

`CONTENTFUL_SPACE_ID=your-space-id
CONTENTFUL_ACCESS_TOKEN=your-access-token`

Replace your-space-ID and your-access-token with the corresponding values from your Contentful account.

By following these steps, you’ll have the foundation ready for displaying your Contentful articles in your Next.js application. Stay tuned for the next article, where I’ll explain how to fully structure your blog and enhance it further.

In the next post I explain you how to fetch and display articles from your contentful API endpoint.