Ribnik – Nextjs 14+ eCommerce Electronics Shop

Introduction

Ribnik is an open-source Next.js eCommerce template that helps you quickly set up an online store with a modern and intuitive design. Built with performance and scalability in mind, Ribnik is perfect for entrepreneurs, small businesses, and enterprises alike. With its comprehensive features and flexibility, you can customize it to suit your brand and products.

In this tutorial, we'll guide you through the process of setting up and using the Ribnik - Next.js 14+ eCommerce Electronics Shop. By the end of this tutorial, you'll have a fully functional eCommerce store up and running.

Step 1: Setting up Ribnik

To get started, follow these steps:

1. Clone the Ribnik repository from GitHub by running the following command in your terminal:

   git clone https://github.com/Ribnik/Electronics-Shop.git

2. Change into the cloned directory:

   cd Electronics-Shop

3. Install the dependencies by running the following command:

   npm install

4. Start the development server by running the following command:

   npm run dev

   This will start the development server and you can access your store by visiting http://localhost:3000 in your browser.

Step 2: Customizing the Store

Before we dive into the customizations, let's go over the basic structure of the Ribnik template:

• components: contains reusable UI components
• containers: contains application-level components
• pages: contains individual pages
• public: contains static assets
• styles: contains global CSS styles
• theme: contains custom theme files

To customize the store, you'll need to modify the following files and folders:

• tailwind.config.js: update the theme settings
• pages/index.js: customize the homepage
• components/ product-card.js: customize the product card component
• components/searchbar.js: customize the search bar component

Let's start with the homepage. Open the pages/index.js file and update the content to suit your needs.

Step 3: Adding Products

To add products, you'll need to create a new file in the products folder. Let's create a new file called product-sample.json and add the following content:

{
  "id": 1,
  "name": "Sample Product",
  "description": "This is a sample product description",
  "price": 99.99,
  "images": ["image1.jpg", "image2.jpg"],
  "categories": ["Electronics", "Smartphones"]
}

Repeat this process for each product you want to add. You can also use a CSV file or an external API to populate your product catalog.

Step 4: Configuring Payment and Shipping

To configure payment and shipping options, you'll need to update the following files:

• api/payment.js: update the payment gateway settings
• api/shipping.js: update the shipping rate settings

Let's focus on the payment gateway for now. Open the api/payment.js file and update the Stripe settings:

import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: "2020-08-27",
});

export default async (req, res) => {
  const { id } = req.query;
  const product = await getProductById(id);
  const cart = await getCart();

  if (cart.addItem(product)) {
    res.json({ message: "Product added to cart successfully" });
  } else {
    res.status(400).json({ message: "Error adding product to cart" });
  }
};

You'll need to update the STRIPE_SECRET_KEY environment variable and the getProductById and getCart functions.

Step 5: Launching the Store

Once you've customized the store, added products, and configured payment and shipping options, you're ready to launch the store.

To launch the store, run the following command:

npm run build

This will build your store and generate static HTML files.

Step 6: Deploying the Store

To deploy your store, you'll need to upload the generated files to your preferred hosting platform. You can use platforms like Vercel, Netlify, or GitHub Pages.

Let's deploy the store using Vercel. First, create a new Vercel project and connect your repository. Then, upload the generated files and configure the build settings.

Conclusion

That's it! You've successfully set up and customized the Ribnik - Next.js 14+ eCommerce Electronics Shop. By following this tutorial, you've learned how to set up the store, add products, configure payment and shipping options, and deploy the store.

Remember to customize the store to fit your brand and products. With Ribnik, the possibilities are endless!