Every developer wants to build a project more quickly and easily while having it scalable on several platforms. This is a significant challenge, and Supastarter was built to address it.
🙋♂️ What is supastarter?
Supastarter is a starter template that gives developers a head start when developing their web application/SaaS and saves valuable time. This template is built upon Next.js and Supabase.
supastarter tech stackYou can also read an interview with Jonathan Wilke, the co-founder of supastarter, who described supastarter as follows:
supastarter gives people the opportunity to ship a ready-to-use application within hours. The big goal is that developers and product owners don’t have to build the basis themselves but rather can focus on providing value to their users.
🎛️ Features of supastarter
Supastarter comes with all the features you need to build a scalable SaaS.
Authentication Supastarter has an awesome authentication system with Supabase that is ready to use. It supports all OAuth providers and also includes all authentication components such as Signup, Login, Password reset, etc.
Internationalization (i18n) Supastarter supports full internationalization with the integrated next-i18next. These translations are ready to be used with a translation management tool. In this tutorial, we will use Localazy as the tool for translation management.
Mail templates It has ready-to-use customizable templates for email notifications.
Fully customizable Components are fully customizable. Supastarter also supports the Dark mode feature with an extendable Chakra UI theme.
Serverless architecture Applications built with Supastarter can be used with serverless platforms such as Vercel. It also provides app scalability across every use case.
Data fetching Data can be easily fetched and cached using the TanStack query. This is a library for asynchronous state management and data caching.
A lot more features are available within the supastarter template. You can check them out on the supastarter official website.
🎯 Goal of this guide
In this blog, we will be exploring the i18n capabilities of Supastarter. We will build an e-commerce platform using Supastarter and handle multilingual content using Localazy. Localazy is an automated localization platform that can handle the auto-translation of contents in your application. We will follow a couple of steps to build our application.
⚙️ Create the supastarter project
⚠️ This tutorial makes use of a paid product plan from supastarter. In order to follow through the steps, you need to have a paid product plan. The pricing for each plan can be found on the official Supastarter website.
Supabase Setup
Supabase is an alternative to Firebase. We need to create our Supabase project before we can start running our supastarter project.
The first step is to sign in to your GitHub account on the Supabase website. You will be required to authorize supabase to your account to have access to the Supabase dashboard.
supabase dashboardCreate a new project and on the dashboard sidebar, navigate to Settings → APIs. In the APIs section, copy the following URLs as they would be necessary for completing the installation process.
- The URL under the Project URL
- The service_role and anon public keys under the Project API keys
Clone the supastarter repository
After successfully creating our project, we will be cloning the boilerplate from the supastarter GitHub repository into our local computer. Copy the following code snippets and paste them into the terminal of a specified directory.
git clone https://github.com/supastarter/supastarter.gitConfiguration and Installation
After cloning the repository, we need to configure our project so it can connect to Supabase. In the root directory, rename the .env.example file to .env. Within this file, fill in the variables with the necessary values.
NEXT_PUBLIC_SUPABASE_URL=YOUR_PROJECT_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_ANON_PUBLIC_KEY
SUPABASE_SERVICE_ROLE_KEY=YOUR_SERVICE_ROLE_KEYThe following step is necessary for User Management System. If your project involves managing users such as registering a new user, logging a user, and having access to a user's dashboard, it is important that you run the next step, else you can skip this step as it is not compulsory in order to have access to the demo website or your final project.
After filling in the environment variables, navigate to the supabase-db-setup.sql file in the root directory and copy its contents. Navigate to the SQL Editor in the Supabase admin dashboard and paste the contents in the editor.
Click on the Run button, and your database should be set up after a few seconds.
Supabase dashboard (SQL editor)We will be installing the dependencies and packages in the project. Run the following command to install the dependencies
npm installStart the development server by running the command below.
npm run devWhen you visit http://localhost:3000/ on your browser, you should see the deployed project.
🛍️ E-commerce Project build
You have successfully set up the supastarter template for the project at this stage. We will modify our template to build a simple e-commerce application in the next steps.
Let's call it SupaCommerce. SupaCommerce is an online e-commerce application that displays electronic gadgets such as laptops, smart wristwatches, headphones, mobile phones, etc. These products are visible in the catalog section, and it also has a blog section where updates and reviews on electronic gadgets are uploaded for visitors at intervals.
In the components/home/Features.tsx file, we will be modifying the content to suit our project. Copy the following code snippets into the file.
import {
Box,
Heading,
Stack,
useColorModeValue,
Image,
Grid,
SimpleGrid
} from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import SectionHeadline from './SectionHeadline';
export default function Features() {
const { t } = useTranslation('home');
const itemBg = useColorModeValue('white', 'gray.700');
const featureItems = [
{
title: t('items.laptop.title'),
description: t('items.laptop.description'),
imageUrl: "https://cdn.thewirecutter.com/wp-content/media/2022/07/laptop-under-500-2048px-acer-1.jpg"
},
{
title: t('items.phones.title'),
description: t('items.phones.description'),
imageUrl: "https://www.android.com/static/2016/img/one/carousel/xiaomi_phones_a3-global_1x.png"
},
{
title: t('items.headphones.title'),
description: t('items.headphones.description'),
imageUrl: "https://www.beatsbydre.com/content/dam/beats/web/product/headphones/solo3-wireless/pdp/solo3-pdp-p02.png.large.2x.png"
},
{
title: t('items.airpods.title'),
description: t('items.airpods.description'),
imageUrl: "https://media.istockphoto.com/photos/apple-airpods-pro-on-a-white-background-picture-id1208634643?k=20&m=1208634643&s=612x612&w=0&h=OyKuK4H2v_xtTSaH86BLMYFgTcO-CfmBCEmI61G3omw="
},
{
title: t('items.smartWatch.title'),
description: t('items.smartWatch.description'),
imageUrl: "https://vmart.pk/wp-content/uploads/2022/02/Kieslect-K10-Smart-Watch-Black-4.jpg"
},
{
title: t('items.smartTv.title'),
description: t('items.smartTv.description'),
imageUrl: "https://i5.walmartimages.com/asr/8782302f-5f1b-498f-af06-3cc477f95fb3.e34225d118e037e089f4eb3b3681faf5.jpeg"
},
];
return (
<Box id="catalogue" px={16} py={16} bg='#f2ebff' >
<SectionHeadline title={t('items.title')} description={t('items.description')} />
<SimpleGrid columns={[1, 2]} spacing={10}>
{featureItems.map((item, i) => (
<Stack
direction={{ base: 'column', md: 'row' }}
spacing={6}
key={i}
w="full"
p={8}
bg={itemBg}
rounded="3xl"
>
<Box flex={1}>
<Box mb={8}>
<Image src={item.imageUrl} alt='image' h='150px' />
</Box>
<Heading fontSize="xl" mb={2}>
{item.title}
</Heading>
<p>{item.description}</p>
</Box>
</Stack>
))}
</SimpleGrid>
</Box>
);
}
In the content/blog folder, we will delete the two files within and create a new MDX file called hp.mdx. Copy the following snippets into the new file:
---
title: The best HP laptops, its pros and cons
excerpt: Check out the best HP laptops in the phone industry. In this post, we would explicitly have a review about HP laptops
coverImage: /blog/images/cover.png
authorName: Mary Okosun
authorImage: /blog/images/author.png
date: '2022-10-09'
published: true
---
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.We will not be handling any form of authentication in this project, so we will delete all auth files and folders. In the component folder, we will delete the auth folder and its content. Also, we will delete every file that involves the user profile, clients, and dashboard since we don't need them for our purposes.
At the end of this post, I will drop the GitHub repository so we can compare the differences.
Another modification we have to do is to edit the default locale file. Navigate to the public/locales/en folder. Within this folder, delete the auth.json and app.json.
Copy the following snippets into the home.json file:
{
"hero": {
"title": "Welcome to SupaCommerce",
"description": "Shop whatever you like with us. We ensure shopping for gadgets an awesome experience."
},
"items": {
"title": "Catalogue",
"description": "Check out our latest product catalogue!",
"laptop": {
"title": "Laptops",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quo ducimus nemo quis possimus."
},
"phones": {
"title": "Phones",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quo ducimus nemo quis possimus."
},
"headphones": {
"title": "Headphones",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quo ducimus nemo quis possimus."
},
"airpods": {
"title": "Airpods",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quo ducimus nemo quis possimus."
},
"smartWatch": {
"title": "Smart Wristwatch",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quo ducimus nemo quis possimus."
},
"smartTv": {
"title": "Smart TVs",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quo ducimus nemo quis possimus."
}
}
} Copy the following snippets to the common.json file:
{
"colorMode": {
"dark": "Dark",
"light": "Light"
},
"language": "Language",
"footer": {
"allRightsReserved": "All rights reserved."
},
"menu": {
"catalogue": "Catalogue",
"blog": "Blog"
}
} Modify the blog.json file to have similar content as below
{
"title": "Blog",
"description": "Check out some articles on popular gadgets in 2022",
"readMore": "Read more",
"writtenBy": "Written by",
"publishedOn": "Published on",
"blog": "Blog"
} When you visit http://localhost:3000/, you should see our e-commerce application.
🚩 Managing Multilingual Content with Localazy
Now that we have our application up and running with the supastarter template, we will be maximizing the i18n capabilities of the application using Localazy.
As stated earlier, Localazy is a localization tool with powerful features that enable you to translate your app in minutes. We will use Localazy integrated into our supastarter app.
Setup Localazy project
In order to set up a new project on Localazy, you need to have a Localazy account. If you do not have one yet, you can register to have access to a free account on the official website. After registering, you will be redirected to your dashboard.
Click on the Create a new project button, and you can give it a name of your choice. Within your new project, navigate to the Project settings and click on the Access keys. You need to copy the writeKey and readKey as you would need them to complete the setup in our e-commerce application.
Localazy Project settingsLocalazy configuration
Let's start localizing our app with Localazy CLI. Localazy CLI is a command-line interface that can be used to upload files to the Localazy platform and download translations back to your application. It’s simple to start yet flexible enough for any project and has tremendous automation potential when combined with GitHub actions or similar CI/CD solutions.
The first step to getting started is to install the Localazy CLI as a dependency in our project.
npm install @localazy/cliAfter installing the CLI, in the root directory of our application, create a configuration script localazy.json that tells the CLI tool what files to upload and how to process downloaded translations.
{
"writeKey": "your-apps-write-key",
"readKey": "your-apps-read-key",
"upload": {
"type": "json",
"files": "public/locales/en/*.json"
},
"download": {
"files": "public/locales/${lang}/${file}"
}
}The upload code tells Localazy CLI how to collect files that should be uploaded and optionally can provide metadata for uploaded files.
The download section describes how to process translated files and where to write them.
As suggested in the supastarter + Localazy integration guide. We can add these commands to customize how our application can run the upload and download from our terminal. To do this, we need to add the following code snippets to the package.json file.
{
"scripts": {
// ........
"i18n:upload": "localazy upload",
"i18n:download": "localazy download"
}
}Content translation
Navigate to the public/locales, and delete the German translation, as the contents have been completely changed. Therefore, the translation would be wrong too. In your terminal, run the following code snippet to upload your source content to Localazy.
npm run i18n:upload
OR
npx localazy uploadThe command above will upload all the JSON files in the public/locales/en folder to Localazy. Navigate back to your project on Localazy, and you can add new languages you intend to translate.
For our application, we would be translating into German (de), French (fr), and Spanish (es).
After adding the languages, you can start translating your strings.
Localazy offers three approaches to choose from and combine to translate your project:
- 💪🏻 Translate on your own or invite contributors - You can start translating on your own and use our built-in suggestion system.
- 🦾 Translate everything in bulk via machine translation - With the Localazy Autopilot plan, you can instantly translate all strings by running a machine translation over the content. This is great for the first iteration and localization testing of any project.
- 🚩 Fully automate the translation process with the Continuous Localization services - Once your Localazy integration is set up, you can order translations from our vetted translators and get your project translated by professionals automatically. The service is also proactive, so you don't have to micromanage translators, and you can visit Localazy only once in a while to check the progress.
I will quickly translate everything using the built-in suggestions.
When you are done translating the content, you should see something similar to the screenshot below:
Translated ContentYou can download the translated content into your application by running the command:
npm run i18n:download
OR
npx localazy downloadThe command above will download the locales as JSON files in their respective folders. You should see the translated locales in the public/locales/${lang} folders. We need to add the new locales to the config files.
In the next-i18next.config.js file, add the new locales to the locales array
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'de', 'es', 'fr'],
},
....
};In the config/i18n.ts file, modify the content to be similar to the following
......
export const localeNames = {
de: 'German',
en: 'English',
fr: 'French',
es: 'Spanish'
};
.....🕹️ Testing your App
Congratulations! You have successfully translated your e-commerce application into 3 different locales: German, French, and Spanish. After modifying the config files, in order to see the effect of these changes, restart your server.
When you visit http://localhost:3000/, you can navigate through your application and change locales with the respective translated content displayed.
✔️ Conclusion
In this blog, we explored the i18n capabilities of supastarter. We learned how Supastarter as a tool helps product owners and developers build things in a faster and more enjoyable way. We also built an e-commerce application using supastarter as a template and handled multilingual content using Localazy.
The code for the sample project used in this blog can be accessed on the GitHub repository.
This is a companion discussion topic for the original entry at https://localazy.com/blog/guide-build-ecommerce-app-supastarter-localazy