DEV Community: Noble Okechi

🚀 Setting Up CI/CD on Vercel with GitHub Actions (Without a Vercel Pro Plan)

Noble Okechi — Tue, 29 Jul 2025 04:28:41 +0000

Introduction

Setting up Continuous Integration and Continuous Deployment (CI/CD) is a must-have for modern development teams. While Vercel offers built-in GitHub integration, its team collaboration features are gated behind a paid Pro plan. This becomes a blocker when multiple developers need to deploy but aren’t part of the paid team.

In this guide, I’ll show you how to bypass that limitation and set up a working CI/CD pipeline using GitHub Actions and the Vercel CLI — all without needing to pay for Vercel Pro or add developers to your Vercel team.

Why Not Just Use Vercel Teams?

If a non-member tries to deploy to a Vercel team project, they'll see this:

@yourgitusername is attempting to deploy a commit to the Team Name' projects team on Vercel, but is not a member of this team.

This error means:

The developer is not part of the Vercel team
The team requires a Pro plan ($20/user/month) to add members

The Solution: Use GitHub Actions + Vercel CLI

Instead of relying on Vercel’s GitHub integration, we use GitHub Actions to automate deployments via the Vercel CLI, authenticated with a token.

What You’ll Need:

A GitHub repo connected to your project
A Vercel account (personal or team)
A Vercel token
Your Vercel Org ID and Project ID
Environment variables passed from GitHub Secrets

Step-by-Step Guide

Generate a Vercel Token
Go to: https://vercel.com/account/tokens
Click "Create Token" and copy it.
Get Your Org & Project IDs
Run this in your local terminal:

npm install -g vercel
vercel link

Check the .vercel/project.json file:

{
  "orgId": "your-vercel-org-id",
  "projectId": "your-vercel-project-id"
}

Alternative: Use Vercel Dashboard → Network Tab → Inspect project requests.

Add Secrets to GitHub Go to your GitHub repo → Settings → Secrets → Actions → New Repository Secret.

Add:

VERCEL_TOKEN
VERCEL_ORG_ID
VERCEL_PROJECT_ID
And your required environment variables

Create the GitHub Actions Workflow Create .github/workflows/deploy.yml in your repo:

name: Deploy to Vercel

on:
  push:
    branches:
      - main // your deployment branch

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install Bun (if using bun.lock)
        run: |
          curl -fsSL https://bun.sh/install | bash
          echo "$HOME/.bun/bin" >> $GITHUB_PATH

      - name: Install Vercel CLI
        run: npm install -g vercel

      - name: Deploy to Vercel
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
        run: |
          vercel pull --yes --environment=production --token=$VERCEL_TOKEN
          vercel build --token=$VERCEL_TOKEN
          vercel deploy --prod --token=$VERCEL_TOKEN

Common Errors & Fixes

❌ spawn bun ENOENT
You're using bun.lock but bun isn't installed.
Fix: Add a step to install Bun in the workflow, or delete the lock file and switch to npm or yarn. A command to install bun is added to the yml file above.

❌ Invalid environment variables
Your app expects env vars at build time, but they’re missing.
Fix: Add them as GitHub secrets and pass them explicitly in env: section.

✅ Result

GitHub Actions handling CI/CD
Vercel builds and deploys on push
No team member restrictions
No need to upgrade to Vercel Pro

Conclusion

With this setup, you're no longer limited by Vercel's team billing system. You get full control over deployment, secure CI, and cost-effective collaboration, all powered by GitHub Actions + Vercel CLI.

Medusa for Developers: A breakdown

Noble Okechi — Tue, 18 Apr 2023 06:12:51 +0000

Introduction

Medusa is a collection of commerce tools and modules for developers, which are basically used for building unique e-commerce platforms.

It is an open-source commerce engine for digital commerce building blocks. Medusa’s building blocks eliminate the need to build core commerce logic from scratch and enable you to focus on the customization that moves the needle. All modules are open source and freely available on npm, so you always control your commerce stack.

Medusa equips developers with the necessary building blocks to develop a dynamic commerce store. The developers are empowered with complete control over their technology stack and the logical operation behind the commerce futures.

Prerequisites

Medusa commerce engine requires Node.js v14.8+ running on your local computer, for you to start development.

Medusa Toolkits

Medusa commerce engine has well-documented Toolkits which are listed below:

Medusa Backend

Medusa Backend is the core commerce engine for Medusa. It is a comprehensive platform for managing all aspects of a commerce store, from product management to order processing and fulfillment. It is designed to provide businesses with a flexible and scalable solution for managing their commerce operations.

Medusa Backend is a Node.js-based open-source codebase that comprises logic, modules, endpoints, services, subscribers, entities, and plugins behind the Medusa commerce engine.

It offers a range of features, including inventory management, order management, customer management, and payment processing. It also provides powerful reporting tools that give businesses insight into their performance and help them make informed decisions.

Creating a Medusa Backend project is very easy as it can be handled with just two commands.

First, install the Medusa CLI tools which enable your local machine to run Medusa;

npm install @medusajs/medusa-cli -g

Note, this command uses both npm or Yarn, see documentation.

Lastly, create a new Medusa Project;

medusa new my-medusa-store --seed

To test your project and learn more on Medusa Backend, see documentations.

Medusa Admin

Medusa Admin is a powerful and intuitive platform for managing and maintaining a commerce store's back-end operations. It provides a merchant with comprehensive set of tools for managing orders, inventory, customers, and other essential commerce functions.

It offers a range of features, including an intuitive dashboard, powerful reporting tools, and customizable workflows for managing orders and inventory. It also provides extensive customer management functionality, including tools for managing customer data and communicating with customers.

Medusa Admin depends on Medusa Backend to function, i.e it works with Medusa Backend through APIs.

Medusa Admin is a React.js frontend project that communicates data with Medusa Backend through APIs. The platform is designed to be user-friendly, with an intuitive interface that makes it easy for merchants to manage their commerce operations.

You can install Medusa Admin with the single command below;

npm install @medusajs/admin

To learn more about Medusa Admin, visit the documentation.

Medusa Storefront

Medusa Storefront is a Next.js open-source project. It is a comprehensive platform that enables businesses to create engaging and immersive commerce storefronts that offer customers a seamless shopping experience. The Storefront is built on top of Medusa's Backend, making it easy for developers to create customized and powerful online stores.

Medusa Storefront offers a wide range of features, including product browsing, cart management, checkout, and payment processing. It also provides powerful tools for customizing the look and feel of storefronts, allowing developers to create unique and engaging shopping experiences that reflect around the brand and values of their customers.

Creating a Medusa Storefront can be done with a single command;

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

To learn more about Medusa Storefront, visit the documentation.

Medusa Javascript Client

Medusa JavaScript Client is a powerful tool that enables developers to integrate Medusa's commerce functionality into their web applications seamlessly. By leveraging the client library, developers can create dynamic and interactive storefronts that offer customers a rich and engaging shopping experience.

It supports a wide range of functionality, including product browsing, cart management, checkout, and payment processing. It also offers flexible APIs that developers can use to customize and extend the client's functionality to meet their specific needs.

With its ease of use, clear documentation, and straightforward APIs, developers can quickly get up and running with the client library, allowing them to focus on creating great storefront experiences.

To install the Medusa Javascript Client run the following command:

npm install @medusajs/medusa-js

To learn more about Medusa Javascript Client, visit the documentation.

Medusa React

Medusa React is a React library that provides a set of utilities and hooks for interacting seamlessly with the Medusa backend. It is a collection of React components that make it easy for developers to integrate Medusa's commerce functionality into their web applications. With the Medusa React library, developers can quickly build dynamic and responsive storefronts that offer customers a seamless shopping experience.

The Medusa React library includes a range of pre-built components. These components are highly customizable and can be easily integrated into any React-based web application.

To install Medusa React run the command below in the directory holding your React-based storefront or admin dashboard:

npm install medusa-react @tanstack/react-query @medusajs/medus

To learn more about Medusa React, visit the documentation.

Medusa CLI

Medusa CLI (Command Line Interface) is a powerful and flexible tool that enables you to perform important commands while developing with Medusa. The CLI provides developers and system administrators with a range of tools for automating tasks and managing commerce operations from the terminal.

Medusa CLI is built on top of the Medusa JavaScript client, making it easy to integrate with other Medusa tools and modules. This integration enables developers to create end-to-end commerce solutions that provide a seamless experience for commerce and simplify operations for businesses.

Medusa CLI can be installed with the command below:

npm install @medusajs/medusa-cli -g

To learn more about Medusa CLI, visit the documentation.

Conclusion

Medusa is a robust e-commerce platform designed to provide developers with the flexibility and tools they need to create powerful and unique commerce experiences. With a range of tools and modules available, Medusa offers developers the essential building blocks they need to create custom storefronts, back-end operations, and APIs.

Medusa is built on top of modern web technologies, including Node.js, React, and GraphQL, making it easy for developers to understand and integrate with other systems. The platform also supports a range of payment gateways, shipping carriers, and tax services, providing businesses with the flexibility they need to operate in different markets and regions.

Medusa's modular architecture allows developers to mix and match different components to create custom commerce experiences tailored to their specific needs. Additionally, its open-source nature means that developers can contribute to the platform's ongoing development and improvement.

How I Built Ecommerce store with Next.js + Medusa + Stripe + Vercel

Noble Okechi — Mon, 13 Feb 2023 12:56:03 +0000

When it comes to setting up an online store, finding the right hosting provider is essential. A reliable host can ensure that your website stays up and running, even during periods of high traffic. Vercel is a hosting provider optimized for performance and scalability; it's a great choice for ecommerce storefronts.

Having a good host, however, is only half the battle; you also need a flexible ecommerce engine that can be customized to suit your needs, and this is where you need Medusa. Medusa is a composable ecommerce engine that offers many out-of-the-box features. It allows developers to choose any frontend stack and tailor the storefront as they wish.

In this tutorial, you will learn how to build a complete commerce site using Next.js, Medusa, and Stripe, and deploy the site using Vercel.

What is Vercel?

Vercel is a cloud platform that enables developers to easily build and deploy modern web projects built with frameworks like Next.js, Svelte, React.js, Nuxt.js, and more. With Vercel, you can host static sites and serverless functions. You can take advantage of the exciting features, such as automatic HTTPS, global CDN, Vercel CLI, and atomic deployments.

Vercel integrates with Git, i.e. it can connect to your Git repository and automatically deploy your code when changes are made to it. This is known as "continuous integration and deployment" (CI/CD).

Hence, you can easily deploy your projects without having to worry about managing infrastructure. Whether you're a beginner or an experienced developer, Vercel provides a seamless developer experience that allows you to focus on building great products.

Why use Vercel?

Easy Deployment and Hosting: Vercel makes it simple to deploy and host web projects with its intuitive interface and one-click setup.
Integration with Popular Frameworks and Tools: Vercel supports a many popular frameworks and tools, including React, Angular, Vue, Next.js, and more, making it a versatile option for a variety of web projects.
Automatic HTTPS and Global CDN: Vercel automatically provisions and renews SSL certificates for your domain and distributes your project's files to a global CDN, which helps to improve the performance and security of your website.

What is Next.js?

Next.js is a popular open source JavaScript framework for building server-rendered and statically-generated web applications. It is based on React, a JavaScript library for building user interfaces. It is designed to make it easy for developers to create fast, scalable web applications that are optimized for performance.

Next.js provides features and tools for building and deploying web applications, including server-side rendering, automatic code splitting, incremental static regeneration, data fetching, and support for static and dynamic routes.

It is SEO-friendly and widely used by developers to build modern web applications. It is known for its simplicity and ease of use.

Why use Next.js?

Server Rendering: Next.js is a framework for building server-rendered React applications. This means that the initial render of a Next.js application is done on the server, which can improve the performance and SEO of your website.
Automatic Code Splitting: Next.js automatically splits your code into small chunks, which helps to reduce the initial load time of your website and improve the user experience.
Hot Code Reloading: Next.js supports hot code reloading, which allows you to see changes in your code without having to manually refresh the page.

What is Medusa?

Medusa is an open source, Node.js-based, composable commerce engine. It has an amazing developer experience and endless customization options for ecommerce businesses looking to scale.

Medusa has three components: Medusa Server, Medusa Admin, and Medusa Storefront. The Medusa server can be integrated with any frontend technology of your choice, thereby making it easy for developers to use different frontend technology while building their online stores.

Medusa has essential ecommerce features such as an admin dashboard, a multi-payment option, manual orders, multi-currency support, a shopping cart, products and image optimization, an SEO-friendly interface, and more.

Why use Medusa?

Accessible Codebase: As an open source commerce engine, Medusa has all its codebase available on its official GitHub Repository, making it more accessible for developers.
Headless Architecture: Medusa is based on Node.js and separates the frontend from the backend. It also separates the admin panel from the backend. Making changes in one part, either backend, admin, or storefront doesn’t affect the other. This will help developers know where to focus when fixing a bug.
Strong Community Support: Medusa provides 24/7 community support through its Discord channel.

What is Stripe?

Stripe is a payment processing platform that provides a simple, secure way for businesses to accept payments online. It offers a range of tools and services for processing transactions, including support for credit and debit card payments and other forms of payment such as Apple Pay and Google Pay.

Stripe provides a comprehensive set of APIs and libraries that make it easy for developers to integrate its payment processing capabilities into their websites and applications.

Why use Stripe?

Secure Payments: Stripe uses industry-standard security measures to ensure that all transactions are secure and compliant with regulations.
Scalability: Stripe can handle large numbers of transactions and can easily scale to meet the needs of growing businesses.
Robust Feature Set: Stripe offers a variety of features, including subscriptions, recurring payments, and fraud detection, which can help businesses streamline their payment process.

Prerequisites

Before starting this tutorial, ensure you have the following ready:

Node.js (v14 or later)
Stripe account (with API keys ready)
Git installation
Vercel account

Creating a Medusa Project

A Medusa project is composed of the server, storefront, and admin. All these will be installed using a single command line.

In your terminal, run the following command:

npx create-medusa-app

While the above command is running, you’ll be asked to enter the name of the directory you want the project to be installed. You can either leave the default value my-medusa-store or enter a new name.

Next, choose the Medusa server starter. The Medusa server is created from a starter template. By default, it is created from the medusa-starter-default template. So choose medusa-starter-default to enable you to follow up with this project.

Doing this will install the server under the directory my-medusa-store/backend. It will also create an SQLite database inside that directory with demo data seeded into it.

After choosing the Medusa starter, the next prompt will ask you to choose the storefront starter. Choose Next.js Starter which is what you will use for this project storefront.

Once you are successfully done with the above, you can follow the code block below to navigate around your store server, admin, and storefront:

## Medusa API
cd my-medusa-store/backend
medusa develop

## Medusa Store Admin
cd my-medusa-store/admin
npm start

## Medusa Storefront
cd my-medusa-store/storefront
npm run dev

Note: Each folder (backend, admin, and storefront) has its own Git history.

Install and Configure Stripe Medusa Plugin in Medusa Backend

The Stripe Medusa plugin will enable Stripe payment to work on this project and also create a channel for your project to communicate with Stripe APIs.

Before you start, navigate to your backend directory using the following command:

cd my-medusa-store/backend

In the root of your backend, run the following command to install the Stripe plugin:

npm install medusa-payment-stripe

Next, you need to add STRIPE API KEY and STRIPE WEBHOOK SECRET to your .env file:

STRIPE_API_KEY=example_API_key_xxxxx
STRIPE_WEBHOOK_SECRET=example_WEBHOOK_key_xxxxx

In the above, replace example_API_key_xxxxx and example_WEBHOOK_key_xxxxx with the keys gotten from your Stripe dashboard.

Note: Stripe webhook secret is not necessary to add in development. You can skip it if you wish.

Next, you need to add configurations for your Stripe plugin. In medusa-config.js, add the following at the end of the plugins array:

const plugins = [
  // ...
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
      webhook_secret: process.env.STRIPE_WEBHOOK_SECRET,
    },
  },
]

Test Medusa Server

If you’ve completed the above processes, start your store server with the command below:

medusa develop

You can navigate to localhost:9000/store/products/ to see available products in your store.

The image you see above represents a sample response containing your store products. You should see something similar.

Enable Stripe Payment Provider in a Region

Regions in Medusa are used to manage the markets where you will operate within. You can manage and add multiple countries in a region. You can also manage shipping options and payment providers.

Before you start, navigate to your admin directory and start your admin using the following command:

cd my-medusa-store/admin
npm start

Ensure your backend server is still running, then localhost:7000 on your browser to access your admin page.

If you completed the steps above successfully, then you should a page similar to the image above.

Medusa seeded your database with a demo admin that you can log in with. The email is admin@medusa-test.com, and the password is supersecret.

If you log in with the demo admin login details, you will have access to your admin dashboard.

The next step is to add Stripe Payment to your Regions, simply follow the steps below:

Go to Settings → Regions.

Click on the region you want to edit from the Regions section.

Click on the three-dot icon at the top right of the selected region and click on Edit Region Details.

Select Stripe as the payment provider.

Once done with step 4, you can click on the Save and close button to save.

Repeat these steps to add Stripe Payment to other regions.

Test Next.js Storefront

Before testing, switch to the storefront directory and rename the template environment variable file to use environment variables in development:

cd my-medusa-store/storefront
mv .env.template .env.local

Then, add Stripe public key to your Next.js storefront.

In your .env.local file (or the file you’re using for your environment variables), add the following variable:

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

Make sure to replace <YOUR_PUBLISHABLE_KEY> with your Stripe Publishable Key.

Lastly, ensure your Medusa server is running, then run the command below:

npm run dev

After a few seconds of running the above command, navigate to localhost:8000 on your browser to see your Next.js ecommerce storefront homepage.

Scroll down to select a product from the featured products on the homepage.

Click on a product to view the single product **page where you can add items to your cart.

If you click on My Bag at the top right of your store, you will view the cart review page of your store.

Click on GO TO CHECKOUT to see your Checkout page, where you will be asked to input your delivery information.

After a successful payment, you’ll see the Order Receipt Page.

Deployment to Vercel

After testing your store, the next thing is to deploy your store backend, admin, and storefront using Vercel.

Deploying Medusa Backend

Medusa has already provided different clear documentation on how to host Medusa Server in different hosting servers.

You check Medusa Server Deployment Guide to deploy your backend to any server of your choice.

Deploying Medusa Admin Panel

You can easily deploy your Medusa Admin on Netlify by following Medusa Admin Deployment Guide.

Deploying Next.js Storefront

In deploying your Next.js Storefront, you will handle this using Vercel.

Deploying Next.js storefront in Vercel can be done using Vercel CLI or Vercel for Git. For this tutorial, you can deploy using Vercel for Git, using the steps below as a guide.

Note: You should have the backend URL ready because it will be needed.

Push your storefront project to a GitHub repository.

On your Vercel dashboard, click on the import button to import a new project.

Enter the name of your project in the Project Name field.

Add the environment variables: NEXT_PUBLIC_MEDUSA_BACKEND_URL and NEXT_PUBLIC_STRIPE_KEY.

When configuring your environment variable, ensure you set the backend URL with your production server (for example: https://my-medusa-server.com) and your live Stripe public key.

Click on deploy to start the deployment process.

Once the deployment process is completed, your storefront is ready. You can visit the domain link to view your storefront.

Note: Before testing, ensure you update your server’s STORE_CORS environment variable with the new Vercel URL to avoid CORS issues. You can check CORS configurations on Medusa documentation.

Conclusion

In this tutorial, you learned how to build a Vercel ecommerce site using Next.js, Medusa, and Stripe. You’ve gone through the steps of setting up Medusa Server, Medusa Admin, and Medusa Next.js Storefront.

You can also add various features to your store, like Algolia search engine service, Mailchimp email marketing service for newsletters, Segment data platform for collecting analytics, and many more.

You can learn more about Medusa commerce engine from Medusa’s Documentation.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

How I Built a Food Ecommerce Restaurant with Next.js, Paystack and Medusa

Noble Okechi — Thu, 05 Jan 2023 14:21:41 +0000

Food restaurants remain one of the best lucrative businesses around the world. They get patronage on a daily basis without being much affected by a country's economy because people depend on food for survival.

Creating an avenue for your food restaurant to sell online helps your business reach a wide range of people who won’t be available to buy in your physical shop and increases your daily sales

In this tutorial, you will learn how to build a complete food ecommerce restaurant using Medusa ecommerce engine with Paystack integration.

The full code for this project is on this GitHub repository.

What is Medusa?

medusajs / medusa

The world's most flexible commerce platform.

Medusa

Documentation | Website

Building blocks for digital commerce

Getting Started

Visit the Documentation to set up a Medusa application.

What is Medusa

Medusa is an ecommerce platform with a built-in framework for customization that allows you to build custom commerce applications without reinventing core commerce logic. The framework and modules can be used to build advanced B2B or DTC ecommerce stores, marketplaces, PoS systems, service businesses, or any product that needs foundational commerce primitives. All commerce modules are open-source and freely available on npm.

Learn more about Medusa’s architecture and commerce modules in the Docs.

Upgrades & Integrations

Follow the Release Notes to keep your Medusa project up-to-date.

Check out all available Medusa integrations.

Community & Contributions

The community and core team are available in GitHub Discussions, where you can ask for support, discuss roadmap, and share ideas.

Our Contribution Guide describes how to contribute to the…

View on GitHub

Medusa provides bespoke commerce infrastructure for developers. Its composable commerce engine addresses the challenges of existing ecommerce platforms which APIs offer bad developer experiences, extension capabilities are insufficient, and results are hacky and hard to maintain.

The solutions ships as a headless backend with a comprehensive feature set covering core elements related to order, product, and customer handling. In addition, it provides advanced features related to promotions, multi-currency handling, RMA flows, customer group handling and much more. For a comprehensive overview of the solutions and integrations, see Medusa’s documentation.

If you like this tutorial, please give Medusa a 🌟 on GitHub

What is Next.js?

vercel / next.js

The React Framework

Next.js

Getting Started

Used by some of the world's largest companies, Next.js enables you to create full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

Visit our Learn Next.js course to get started with Next.js.
Visit the Next.js Showcase to see more sites built with Next.js.

Documentation

Visit https://nextjs.org/docs to view the full documentation.

Community

The Next.js community can be found on GitHub Discussions where you can ask questions, voice ideas, and share your projects with other people.

To chat with other community members you can join the Next.js Discord server.

Do note that our Code of Conduct applies to all Next.js community channels. Users are highly encouraged to read and adhere to it to avoid repercussions.

Contributing

Contributions to Next.js are welcome and highly appreciated. However, before you jump right into it, we would like you to review our…

View on GitHub

Next.js is a JavaScript open source framework for building superfast and extremely user-friendly frontend websites using React. It is a server-rendered, lightweight, and flexible React framework that requires little or no configuration during usage.

Using Medusa commerce engine to build your online stores gives you the opportunity to work with Medusa Next.js storefront starter, which can be easily installed through CLI commands.

Medusa Next.js storefront is a 100% ready-to-use Medusa storefront template. It comes with all ecommerce storefront features such as product display, featured products, shopping cart, checking out, multiple payment processing, and more.

What is Paystack?

Paystack is the #1 African payment gateway that helps businesses to accept online payments through their ecommerce stores, websites, and applications. Paystack provides other services such as point-of-sale (PoS), payment through an invoice, and more.

The integration between Medusa and Paystack can be achieved using a community plugin, which you’ll learn in this tutorial.

Prerequisites

Before you start, be sure you have the following:

Node.js (version 14 or above)
Paystack Account with API Secret and Public Key

Set up Your Food Restaurant Ecommerce with Medusa

To start building with Medusa, follow these simple steps below:

Install Medusa CLI

Medusa CLI tool can be installed either using npm or yarn, but this tutorial is based on npm. Use the command below to install Medusa CLI:

npm install @medusajs/medusa-cli -g

Creating Your New Food Restaurant Store Server

The command below will create a new Medusa store for you:

medusa new my-food-restaurant --seed

my-food-restaurant will be your project name, but you can change this to your preferred choice of name.

Switch to the project directory:

cd my-food-restaurant

Installing Paystack Medusa Plugin

In the root of your project, my-food-restaurant, run this command to install Medusa Paystack plugin:

npm install medusa-payment-paystack

Next, you need to configure your Paystack plugin in your project. To do this, first, add PAYSTACK SECRET KEY to your .env file:

PAYSTACK_SECRET_KEY=example_key_xxxxx

In the above, replace example_key_xxxxx with the secret key gotten from your Paystack API Key.

In medusa-config.js, add the following at the end of the pluginsarray:

{
    resolve: `medusa-payment-paystack`,
    options: {
      secret_key: process.env.PAYSTACK_SECRET_KEY,
    },
  },

The above code snippet adds Medusa Paystack plugin to your project configurations.

Installing MinIO Medusa Plugin

Managing images in Medusa requires a file service plugin for uploading images of products. Medusa provides different options for handling image upload for products, but this tutorial will focus only on using MinIO file service plugin.

MinIO is a high-performance open source object storage solution that provides S3 storage functionality. You can follow this documentation to learn how to install it and create a bucket.

Install MinIO plugin in the Medusa server directory with the command below:

npm install medusa-file-minio

Next, add the following block of code to your .env:

MINIO_ENDPOINT=<ENDPOINT>
MINIO_BUCKET=<BUCKET>
MINIO_ACCESS_KEY=<ACCESS_KEY>
MINIO_SECRET_KEY=<SECRET_KEY>

Note: <ENDPOINT> is the URL of your MinIO server, <BUCKET> is the name of the bucket you created earlier, and <ACCESS_KEY> and <SECRET_KEY> are the keys you generated in the previous section.

Finally, in medusa-config.js, add the following at the end of the pluginsarray:

{
    resolve: `medusa-file-minio`,
    options: {
        endpoint: process.env.MINIO_ENDPOINT,
        bucket: process.env.MINIO_BUCKET,
        access_key_id: process.env.MINIO_ACCESS_KEY,
        secret_access_key: process.env.MINIO_SECRET_KEY,
    },
  },

If you’ve completed the above processes, start your store server with the command below:

medusa develop

You can navigate to localhost:9000/store/products/ to see available products in your store.

Creating Medusa Admin for your Food Restaurant

To set up your Medusa Admin, follow the steps below.

Clone the Medusa Admin repository and change to the newly created folder:

git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin

Run the command below to install all necessary dependencies:

npm install

Test it:

(Note: Ensure your Medusa store server is running before testing your admin.)

npm start

By default, Medusa Admin runs on port 7000. You can go to localhost:7000 on your browser to access your admin page.

Medusa Server comes with admin login details, which are admin@medusa-test.com as the email address and supersecret as the password. This demo data is a result of --seed added while creating your store server.

You can visit the User Guide to learn more about Medusa Admin.

Adding Paystack Payment Provider to your Regions

Food restaurants could be inter-state or international businesses, which means your store should be focused on selling products to a particular country.

This tutorial will be focused on using the Nigerian currency since it’s one of the Paystack-supported countries.

If you are not selling to Paystack-supported African countries, you can easily integrate Medusa Stripe Payment Plugin in your store.

To add Paystack to your regions, follow the steps below to set your store currency;

Go to Settings ⇒ Currencies.

2. Click on the Edit currencies button in the Store Currencies section.

3. In the new window that opens, click on the Add Currencies button and select all the currencies you want to add.

4. Click on the Save and close button.

Note: Set your default currency to Nigerian Naira after the 4th step.

You can learn more about how to manage currencies.

Adding Paystack to your Region:

Go to Settings ⇒ Regions.

2. Click on the plus icon at the top right of the Regions section .

3. In the form that opens, enter the Regions details. It is required to enter a title, choose a currency, enter a tax rate, and choose at least one country where your restaurant is based, payment provider (select Paystack), and fulfillment provider.

Once done, click on the Create region button at the top-right side.

Learn more about Regions from Medusa User Guide.

Adding Food Products to your Admin

Medusa Admin supports product management which includes adding new products, editing, publishing, unpublishing, duplicating, and deleting products.

By default, the Medusa store server comes with a few products. You’ll delete them and add new products according to your restaurant's food menu.

Visit Medusa Products Overview for a complete user guide on how to manage products in your store.

Creating Medusa Next.js Storefront

In this tutorial, you will use the Medusa Next.js Storefront Template to build your storefront.

Medusa Next.js Storefront Template already has every feature you may need in your storefront in it; this helps to quicken your development process when you choose to work with Medusa as your commerce engine.

The steps below will help you create your food restaurant Storefront:

Run the command below to create a new Next.js starter project:

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa food-restaurant-storefront

food-restaurant-storefront represents the name of your project; you can rename it as you wish.

Switch to the newly created directory food-restaurant-storefront and rename the template environment variable file to use environment variables in development:

cd food-restaurant-storefront
mv .env.template .env.local

Customizing Your Storefront

Since you have successfully created your food restaurant storefront, you can customize your storefront to your taste.

You can find all images used for this project in the GitHub repository.

Modify Your Homepage Banner: To do so, locate src/modules/home/components/hero/index.tsx and replace its contents with the code below:

import UnderlineLink from "@modules/common/components/underline-link"
import Image from "next/image"

const Hero = () => {
  return (
    <div className="h-[90vh] w-full relative">
      <div className="text-white absolute inset-0 z-10 flex flex-col justify-center items-center text-center small:text-left small:justify-end small:items-start small:p-32">
        <h1 className="text-2xl-semi mb-4 drop-shadow-md shadow-black">
          Easy Life Food Restaurant
        </h1>
        <p className="text-base-regular max-w-[32rem] mb-6 drop-shadow-md shadow-black">
          Eat heathy and Live heathy | We sale morethan just foods
        </p>
        <UnderlineLink href="/store">Food Menu</UnderlineLink>
      </div>
      <Image
        src="/h2-slide.jpg"
        layout="fill"
        loading="eager"
        priority={true}
        quality={90}
        objectFit="cover"
        alt="homepage banner"
        className="absolute inset-0"
        draggable="false"
      />
    </div>
  )
}

export default Hero

The above code block will change the banner image and change the text.

Secondly, modify your Featured Product section. To do so, locate src/modules/home/components/featured-products/index.tsx and replace its contents with the code below:

import { useFeaturedProductsQuery } from "@lib/hooks/use-layout-data"
import UnderlineLink from "@modules/common/components/underline-link"
import ProductPreview from "@modules/products/components/product-preview"
import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"

const FeaturedProducts = () => {
  const { data } = useFeaturedProductsQuery()

  return (
    <div className="py-12">
      <div className="content-container py-12">
        <div className="flex flex-col items-center text-center mb-16">
          <span className="text-base-regular text-gray-600 mb-6">
            Enjoy More on
          </span>
          <p className="text-2xl-regular text-gray-900 max-w-lg mb-4">
            Our Today's Food Menu
          </p>
          <UnderlineLink href="/store">Food products</UnderlineLink>
        </div>
        <ul className="grid grid-cols-2 small:grid-cols-4 gap-x-4 gap-y-8">
          {data
            ? data.map((product) => (
                <li key={product.id}>
                  <ProductPreview {...product} />
                </li>
              ))
            : Array.from(Array(4).keys()).map((i) => (
                <li key={i}>
                  <SkeletonProductPreview />
                </li>
              ))}
        </ul>
      </div>
    </div>
  )
}

export default FeaturedProducts

The above code snippet will change the default texts to match what you are building the store for.

Third, modify your part of the footer section. To do so, locate your src/modules/**layout**/components/footer-cta/index.tsx and replace its content with the code below:

import UnderlineLink from "@modules/common/components/underline-link"
import Image from "next/image"

const FooterCTA = () => {
  return (
    <div className="bg-gray-800 w-full">
      <div className="content-container flex flex-col-reverse gap-y-8 small:flex-row small:items-center justify-between py-16 relative">
        <div>
          <h3 className="text-3xl-semi text-white">Flavourful Flame</h3>
          <h3 className="text-2xl text-white">Grilled Chicken</h3>
          <p className="text-white">Marinated for 24 hours in our herb-infused traditional marinade, the perfectly grilled chicken on your plate is the healthiest and tastiest in town!</p>
          <div className="mt-6 text-white">
            <UnderlineLink href="/store">Order Now</UnderlineLink>
          </div>
        </div>

        <div className="relative w-full aspect-square small:w-[35%] small:aspect-[28/36]">
          <Image
            src="/more.jpg"
            alt=""
            layout="fill"
            objectFit="cover"
            className="absolute inset-0"
          />
        </div>
      </div>
    </div>
  )
}

export default FooterCTA

The above code block will change the background image and text.

Enable Paystack Payment

To enable using Paystack to accept payments from your storefront, you follow the steps below accordingly:

Install the React Paystack library:

npm install react-paystack

Once the library is installed successfully, it will add the react Paystack package to your storefront project.

Add the Paystack public key to your .env.local file:

NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY=pk_test_xxxxxx

On the above, replace pk_test_xxxxxx with the secret key gotten from your Paystack API Key.

Modify your payment buttons by adding the block of code below into your src/modules/checkout/components/payment-button/index.tsx file:

import clsx from "clsx"
import { PaystackButton } from "react-paystack"

The above code will import your Paystack button from react-payment library, and clsx library for Paytsack button styling.

Next, add PaystackPaymentButton among the switch case for the payment session:

case "paystack":
      return (
        <PaystackPaymentButton notReady={notReady} session={paymentSession} />
      )

Finally, add the block of code before your last line of code on this same file:

const PAYSTACK_PUBLIC_KEY = process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY || ""

const PaystackPaymentButton = ({
  session,
  notReady,
}: {
  session: PaymentSession
  notReady: boolean
}) => {
  const { cart } = useCart()
  const { onPaymentCompleted } = useCheckout()

  const txRef = String(session.data?.paystackTxRef)
  const total = cart?.total || 0
  const email = cart?.email || ""
  const currency =
    cart?.region.currency_code.toUpperCase() // Update this to your currency

  return (
    <PaystackButton
      amount={total}
      publicKey={PAYSTACK_PUBLIC_KEY}
      email={email}
      currency={currency}
      reference={txRef}
      text="Pay with Paystack"
      onSuccess={onPaymentCompleted}
      className={clsx(
        "w-full uppercase flex items-center justify-center min-h-[50px] px-5 py-[10px] text-small-regular border transition-colors duration-200 disabled:opacity-50",
        "text-white bg-[#3bb75e] border-[#3bb75e] hover:bg-white hover:text-[#3bb75e] disabled:hover:bg-gray-900 disabled:hover:text-white"
      )}
    />
  )
}

The above code block will add Paystack button as part of the payment option for your storefront.

PaystackButton triggers the checkout payment button to process the payment whenever it’s clicked on your storefront.

To be sure you got the above two code blocks correctly, you can make a reference here.

Modify your payment container by adding the code block as part of the PaymentInfoMap collection. Here is the file path src/modules/checkout/component/payment-container/index.tsx:

paystack: {
    title: "Paystack",
    description: "Secure payment with Paystack",
  }

The above code makes it possible for Paystack to appear as part of the payment option in your storefront.

To be sure you got the above code block correctly, you can make a reference here.

Test your Storefront

Ensure your Medusa Server is running, then run this command:

npm run dev

If you navigate to localhost:8000, you’ll see your storefront homepage.

If you click on Food Menu you’ll see all foods populated from your Medusa Server.

If you click on any of the food items, you’ll see the single product page and an Add to cart option.

If you click on My Bag after adding an item to the cart, you should see the Shopping Bag page.

If you click on GO TO CHECKOUT, you’ll see your Checkout Page, where you will provide your delivery information.

If you click on “PAY WITH PAYSTACK” you’ll see the Paystack Payment pop-up:

If you select Success and click on the Pay button, your payment will be processed and you’ll see the Order Receipt Page;

You can confirm the orders from your Medusa Admin panel for this project.

Conclusion

In this tutorial, you have learned how to use the Medusa commerce engine as your ecommerce store for food restaurants, working with Medusa’s Next.js Storefront Template and Integrating Paystack payment gateway into Medusa.

You can learn more about building awesome ecommerce stores with Medusa; check out Medusa’s Documentation for more guides.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

An Introduction to RedwoodJS

Noble Okechi — Mon, 12 Dec 2022 01:16:20 +0000

RedwoodJS is a full-stack serverless web application framework to help developers build their front-end and back-end with one single codebase. This framework provides the mechanism to build JAMstack applications very fast.
The front end is a React application, while the back end is a GraphQL server. RedwoodJS features an end-to-end development workflow that weaves together the best parts of React, GraphQL, Prisma, TypeScript, Jest, and Storybook.
In this tutorial, you'll learn how to build a Todo App with RedwoodJS.

Prerequisites

Before you start this tutorial, ensure you have;

Node.js v 14.19.x or <=16.x
Yarn v 1.15 or later

Setting Up RedwoodJS

To setup a new Redwood.js project on your computer, you can follow any of these steps below

Creating a new Project using RedwoodJS CLI

You will run the command below to install a new project from your terminal.

yarn create redwood-app my-redwood-project

my-redwood-project will represent your project name on the above command, which you can also change to a preferred name.
Then change into that directory and start the development server:

cd my-redwood-project
yarn redwood dev

Creating a new RedwoodJS starter project

Another easy method to create a new RedwoodJS project is by cloning RedwoodJS Starter Project.
You can achieve that by visiting RedwoodJS Starter Repository.
If you completed any of the above process successfully, your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links out to a ton of great resources:

Working with RedwoodJS

In this tutorial, you will learn how to build a Todo App with RedwoodJS, which you will cover some of the basic features of this framework.

Redwood File Structure

RedwoodJS file structure is classified into Backend and Frontend, which entirely makes up a full-stack development tool.
This is what the RedwoodJS file structure looks below;

├── api
│ ├── db
│ │ └── schema.prisma
│ ├── dist
│ ├── src
│ │ ├── directives
│ │ │ ├── requireAuth
│ │ │ └── skipAuth
│ │ ├── functions
│ │ │ └── graphql.js
│ │ ├── graphql
│ │ ├── lib
│ │ │ ├── auth.js
│ │ │ ├── db.js
│ │ │ └── logger.js
│ │ └── services
│ └── types
│
├── scripts
│ └── seed.js
│
└── web
 ├── public
 │ ├── favicon.png
 │ ├── README.md
 │ └── robots.txt
 └── src
 ├── components
 ├── layouts
 ├── pages
 │ ├── FatalErrorPage
 │ │ └── FatalErrorPage.js
 │ └── NotFoundPage
 │ └── NotFoundPage.js
 ├── App.js
 ├── index.css
 ├── index.html
 └── Routes.js

In the above file structure, RedwoodJS has three directories, API, scripts and web. Redwood separates the backend (API) and frontend (web) concerns into their own paths in it code-base.
Thescripts folder holds any Node.js scripts you may need to run from your command line that aren't directly related to the API or web sides.
The seed.jsis your database seeder file, it is used to populate your database with data that needs to exist for your app to run effectively.

Creating Pages

In this tutorial, you will create a page which will serve as your home page for this Todo App.
RedwoodJS has a command line tool which is used to generate web pages, which makes it unique from some other frameworks.
Use this command to generate your home page.

yarn redwood generate page home /

This command will create a new page folder named 'HomePage'. This is the path to your newly generated home page web/src/pages/HomePage/HomePage.js
If your page generated successfully, then you should have same screen as shown below on your browser.

Now, you successfully created a home page for this project, you will revisit the HomePage.js later to write some script as you build along.

Creating the Database Schema

Before you continue with creating a database schema for this project, you will first decide the data you need for this project (i.e the fields).
You will create a table called todo which will take the following fields.

id a unique identifier for this todo app (it will be auto-incremented)
body a string data type, which will contain the actual content for each todo
status a string data type with a default value off, it will be used to know when a todo is marked or not. RedwoodJS uses Prisma to talk to the database. Prisma has another library called Migrate that lets you update the database's schema in a predictable way and snapshot each of those changes. Each change is called a migration and Migrate will create one when we make changes to our schema. Now, you can define the data structure for this project. Open api/db/schema.prisma, remove the model UserExample and add the Todo model below.

model Todo {
 id Int @id @default(autoincrement())
 body String
 status String @default("off")
}

Now you will need to snapshot the schema changes as a migration, run this command for that:

yarn rw prisma migrate dev

You'll be prompted to give this migration a name.

In the case of this project, use Todo.
Note, for other projects,use something that best describes what your database model does.
You can learn more about Redwood Database Schema.

Creating an SDL & Service

Now you'll create the GraphQL interface to access the Todo table. You can do that with this command:

yarn rw g sdl Todo

This will create a few new files under the api directory:
api/src/graphql/todos.sdl.js: defines the GraphQL schema in GraphQL's schema definition language
api/src/services/todos/todos.js: contains your app's business logic (also creates associated test files)
Now you will need to define a Mutation types for this Todo model.
Open up api/src/graphql/todos.sdl.js and define the Mutation as shown below.

type Mutation {
 createTodo(body: String!): Todo @skipAuth
 updateTodoStatus(id: Int!, status: String!): Todo @skipAuth
 renameTodo(id: Int!, body: String!): Todo @skipAuth
 }

You can a see a complete code for this file below:

export const schema = gql`
 type Todo {
 id: Int!
 body: String!
 status: String!
 }
type Query {
 todos: [Todo!]! @requireAuth
 }
input CreateTodoInput {
 body: String!
 status: String!
 }
input UpdateTodoInput {
 body: String
 status: String
 }
type Mutation {
 createTodo(body: String!): Todo @skipAuth
 updateTodoStatus(id: Int!, status: String!): Todo @skipAuth
 renameTodo(id: Int!, body: String!): Todo @skipAuth
 }
`

To complete the SDL and Service, you'll open api/src/services/todos/todos.js and write this block of code:

import { db } from 'src/lib/db'
export const todos = () => db.todo.findMany()
export const createTodo = ({ body }) => db.todo.create({ data: { body } })
export const updateTodoStatus = ({ id, status }) =>
 db.todo.update({
 data: { status },
 where: { id },
 })
export const renameTodo = ({ id, body }) =>
 db.todo.update({
 data: { body },
 where: { id },
 })

Creating Components

Components are independent and reusable bits of code that serve the same purpose as JavaScript functions, but work in isolation and return HTML.
In this project, you will create a few component, these components will ensure a proper flow of data within this app.

Creating a AddTodoForm Component

RedwoodJS has command line tool that generates a component.
Now, you will run this command below to create a component called AddTodoForm.

yarn rw g component AddTodoForm

After running the above command, you can locate your component in web/src/components/AddTodoForm.
Now, open your AddTodoForm.js and write this block of code inside.
This is the file path web/src/components/AddTodoForm/AddTodoForm.js.

import styled from 'styled-components'
import { useState } from 'react'
import Check from 'src/components/Check'
const AddTodoForm = ({ submitTodo }) => {
 const [todoText, setTodoText] = useState('')
const handleSubmit = (event) => {
 submitTodo(todoText)
 setTodoText('')
 event.preventDefault()
 }
const handleChange = (event) => {
 setTodoText(event.target.value)
 }
return (
 <SC.Form onSubmit={handleSubmit}>
 <Check type="plus" />
 <SC.Body>
 <SC.Input
 type="text"
 value={todoText}
 placeholder="What to do"
 onChange={handleChange}
 />
 <SC.Button type="submit" value="Add Todo" />
 </SC.Body>
 </SC.Form>
 )
}
const SC = {}
SC.Form = styled.form`
 display: flex;
 align-items: center;
`
SC.Body = styled.div`
 border-top: 1px solid #efefef;
 border-bottom: 1px solid #efefef;
 width: 100%;
`
SC.Input = styled.input`
 border: none;
 font-size: 18px;
 font-family: 'Inconsolata', monospace;
 padding: 10px 0;
 width: 75%;
::placeholder {
 color: #e1e1e1;
 }
`
SC.Button = styled.input`
 float: right;
 margin-top: 5px;
 border-radius: 6px;
 background-color: #8000ff;
 padding: 5px 15px;
 color: white;
 border: 0;
 font-size: 18px;
 font-family: 'Inconsolata', monospace;
:hover {
 background-color: black;
 cursor: pointer;
 }
`
export default AddTodoForm

styled was imported from RedwoodJS styled-components which you used for styling of Form, Body, Input and Button.
useState was imported from react library for state management within this project.
Check was imported from Check Component, which will created before this component.
const AddTodoForm function, is used to handle the submit event of this project, in which this component will be called on the next component for processing.

Creating a SaveTodo Component

This component handle data saving communication between your Form and Database.
Run this command to create the component:

yarn rw g component SaveTodo

If you have created this component successfully, locate the path web/src/components/SaveTodo/SaveTodo.js and write the below code.

import { useMutation } from '@redwoodjs/web'
import AddTodoForm from 'src/components/AddTodoForm'
import { QUERY as TODOS } from 'src/components/TodoListCell'
const CREATE_TODO = gql`
 mutation SaveTodo_CreateTodo($body: String!) {
 createTodo(body: $body) {
 id
 __typename
 body
 status
 }
 }
`
const SaveTodo = () => {
 const [createTodo] = useMutation(CREATE_TODO, {
 update: (cache, { data: { createTodo } }) => {
 const { todos } = cache.readQuery({ query: TODOS })
 cache.writeQuery({
 query: TODOS,
 data: { todos: todos.concat([createTodo]) },
 })
 },
 })
const submitTodo = (body) => {
 createTodo({
 variables: { body },
 optimisticResponse: {
 __typename: 'Mutation',
 createTodo: { __typename: 'Todo', id: 0, body, status: 'loading' },
 },
 })
 }
return <AddTodoForm submitTodo={submitTodo} />
}
export default SaveTodo

useMutation is a RedwoodJS hook, which allow you to execute the mutation when we're ready.
__typename is required here in order for optimistic responses to function properly.
const SaveTodo adds the data into the Todo database model and trigger a re-render of any affected components, so we don't need to do anything but update the cache.
The above code block summerizes saving data in RedwoodJS, you can learn more about Saving Data.

Modify HomePage

You hae successfully completed your SaveTodo component, which add every TODO into the database.
It's time for you to modify the HomePage and add the SaveTodo component inside.
Open web/src/pages/HomePage/HomePage.js path and write this code:

import styled from 'styled-components'
import { MetaTags } from '@redwoodjs/web'
import SaveTodo from 'src/components/SaveTodo'
const HomePage = () => {
 return (
 <>
 <MetaTags title="Todos" description="Your list of todo items" />
<SC.Wrapper>
 <SC.Title>Todo List</SC.Title>
 <SaveTodo />
 </SC.Wrapper>
 </>
 )
}
const SC = {}
SC.Wrapper = styled.div`
 width: 600px;
 margin: 0 auto;
`
SC.Title = styled.h1`
 font-size: 24px;
 font-weight: bold;
 margin-top: 100px;
`
export default HomePage

In the above block, you have imported SaveTodo for adding new Todos.
Now check your browser to see if you will get same result as the screenshot below.

Creating Check Component

This component will be used for improving users experience in this project.
You will create a new component called Check with the commands below.

yarn rw g component Check

If you complete the above command, locate the path web/src/components/Check/Check.js and write the below code.

import styled from 'styled-components'
import IconOn from './on.svg'
import IconOff from './off.svg'
import IconPlus from './plus.svg'
import IconLoading from './loading.svg'
const map = {
 on: <IconOn />,
 off: <IconOff />,
 plus: <IconPlus />,
 loading: <IconLoading />,
}
const Check = ({ type }) => {
 return <SC.Icon>{map[type]}</SC.Icon>
}
const SC = {}
SC.Icon = styled.div`
 margin-right: 15px;
`
export default Check

In the above code block, you imported some svg files which has not been created yet.
In your web/src/components/Check folder, create the following svg files and write the svg codes inside.
loading.svg this is svg code for this file:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<circle cx="10" cy="10" r="9" fill="white" stroke="#8000FF" stroke-width="2"/>
<circle cx="10" cy="10" r="4" fill="#8000FF"/>
</svg>

off.svg this is the svg code for this file:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<circle cx="10" cy="10" r="9" fill="white" stroke="#8000FF" stroke-width="2"/>
</svg>

on.svg this is the svg code for this file:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<circle cx="10" cy="10" r="9" fill="#8000FF" stroke="#8000FF" stroke-width="2"/>
</svg>

plus.svg this is svg code for this file:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path d="M10 0.3125C4.64844 0.3125 0.3125 4.64844 0.3125 10C0.3125 15.3516 4.64844 19.6875 10 19.6875C15.3516 19.6875 19.6875 15.3516 19.6875 10C19.6875 4.64844 15.3516 0.3125 10 0.3125ZM15.625 11.0938C15.625 11.3516 15.4141 11.5625 15.1563 11.5625H11.5625V15.1563C11.5625 15.4141 11.3516 15.625 11.0938 15.625H8.90625C8.64844 15.625 8.4375 15.4141 8.4375 15.1563V11.5625H4.84375C4.58594 11.5625 4.375 11.3516 4.375 11.0938V8.90625C4.375 8.64844 4.58594 8.4375 4.84375 8.4375H8.4375V4.84375C8.4375 4.58594 8.64844 4.375 8.90625 4.375H11.0938C11.3516 4.375 11.5625 4.58594 11.5625 4.84375V8.4375H15.1563C15.4141 8.4375 15.625 8.64844 15.625 8.90625V11.0938Z" fill="#8000FF"/>
</svg>

Now, if you've created the above svg files inside the web/src/components/Check path, your Check folder should look the image snapshot below.

Creating TodoItem Component

You will create a TodoItem Component using this command:

yarn rw g component TodoItem

Locate the path web/src/components/TodoItem/TodoItem.js and write the below code.

import styled from 'styled-components'
import Check from 'src/components/Check'
const TodoItem = ({ id, body, status, onClickCheck }) => {
 const handleCheck = () => {
 const newStatus = status === 'off' ? 'on' : 'off'
 onClickCheck(id, newStatus)
 }
return (
 <SC.Item>
 <SC.Target onClick={handleCheck}>
 <Check type={status} />
 </SC.Target>
 <SC.Body>{status === 'on' ? <s>{body}</s> : body}</SC.Body>
 </SC.Item>
 )
}
const SC = {}
SC.Item = styled.li`
 display: flex;
 align-items: center;
 list-style: none;
`
SC.Target = styled.div`
 cursor: pointer;
`
SC.Body = styled.div`
 list-style: none;
 font-size: 18px;
 border-top: 1px solid #efefef;
 padding: 10px 0;
 width: 100%;
`
export default TodoItem

The above block of the code is returning an item list of TODOS, considering the status of every todos.

Working with RedwoodJS Cell

Cells are a declarative approach to data fetching and one of Redwood's signature modes of abstraction. By providing conventions around data fetching, Redwood can get in between the request and the response to do things like query optimization and more, all without you ever having to change your code.
RedwoodJS Cell are used to execute a GraphQL query and manage its lifecycle. The idea is that, by exporting named constants that declare what you want your UI to look like throughout a query's lifecycle, RedwoodJS can assemble these into a component template at build-time using a Babel plugin. All without you having to write a single line of imperative code.
You can generate a Cell with RedwoodJS Cell generator. Run this command to generate a TodoListCell:

yarn rw generate cell TodoList

If you've completed the above command, open up web/src/components/TodoListCell/TodoListCell.js and write the below code:

import styled from 'styled-components'
import TodoItem from 'src/components/TodoItem'
import { useMutation } from '@redwoodjs/web'
export const QUERY = gql`
 query TODOS {
 todos {
 id
 body
 status
 }
 }
`
const UPDATE_TODO_STATUS = gql`
 mutation TodoListCell_CheckTodo($id: Int!, $status: String!) {
 updateTodoStatus(id: $id, status: $status) {
 id
 __typename
 status
 }
 }
`
export const Loading = () => <div>Loading…</div>
export const Empty = () => <div></div>
export const Failure = () => <div>Oh no</div>
export const Success = ({ todos }) => {
 const [updateTodoStatus] = useMutation(UPDATE_TODO_STATUS)
const handleCheckClick = (id, status) => {
 updateTodoStatus({
 variables: { id, status },
 optimisticResponse: {
 __typename: 'Mutation',
 updateTodoStatus: { __typename: 'Todo', id, status: 'loading' },
 },
 })
 }
const list = todos.map((todo) => (
 <TodoItem key={todo.id} {…todo} onClickCheck={handleCheckClick} />
 ))
return <SC.List>{list}</SC.List>
}
export const beforeQuery = (props) => ({
 variables: props,
})
const SC = {}
SC.List = styled.ul`
 padding: 0;
`

In the above code block, you all TODOS using RedwoodJS GraphQL query and mapped these todos into the TodoItem created above, which will be imported on the HomePage.js.

Getting Ready for Testing

Before you test this project, there are few things you need to do.

Modifying HomePage

First, is modifying your Homepage by importing some of the components you created.
Open web/src/pages/HomePage/HomePage.js path and write this code:

import styled from 'styled-components'
import { MetaTags } from '@redwoodjs/web'
import SaveTodo from 'src/components/SaveTodo'
import TodoListCell from 'src/components/TodoListCell'
const HomePage = () => {
 return (
 <>
 <MetaTags title="Todos" description="Your list of todo items" />
<SC.Wrapper>
 <SC.Title>Todo List</SC.Title>
 <TodoListCell />
 <SaveTodo />
 </SC.Wrapper>
 </>
 )
}
const SC = {}
SC.Wrapper = styled.div`
 width: 600px;
 margin: 0 auto;
`
SC.Title = styled.h1`
 font-size: 24px;
 font-weight: bold;
 margin-top: 100px;
`
export default HomePage

In the above block, you have imported TodoListCell for displaying Todos from database and SaveTodo for adding new Todos.

Fixing styled-components in RedwoodJS

For you to avoid styled-components error in all the components where you imported it, add styled-components package to your web/package.json.
Open up web/package.json and add this code among the dependencies.

"styled-components": "⁵.3.3"

The above code will fix styled-components error.

Test your Todo App

Now you have completed this project, restart your RedwoodJS server with any of the commands below:

yarn redwood dev

yarn rw dev

Here the output of this project:

Conclusion

In this tutorial, you've known what RedwoodJS is about and why you need RedwoodJS for your startups. You've learnt how about RedwoodJS page generate tool, RedwoodJS Database Schema, RedwoodJS SDL and Service, RedwoodJS Components and, also how to work with RedwoodJS Cell.

You can learn more about RedwoodJS from its tutorial documentation.

You can clone this project from this GitHub repository https://github.com/noblefresh/todo-app-with-redwoodjs

A TIP FROM THE EDITOR: Some time ago, we introduced RedwoodJS; check it out at RedwoodJS, a new framework.

Originally published at https://blog.openreplay.com.

How I Built a Vue.js Ecommerce Store with a Node.js Backend

Noble Okechi — Wed, 07 Dec 2022 15:19:44 +0000

Ecommerce is no small undertaking. Aside from building a great customer experience on the frontend, you’ll also need to have the right setup to handle all cart, customer and order data, product information, etc…

In this tutorial, you’ll get a sneak peek into how it can be done!

In this tutorial, you’ll get set up with the necessary prerequisites for a great ecommerce experience. Vue.js is a great choice for a frontend framework because it’s open source, it has a component-based architecture, and it is reactive.

For the backend, you’ll learn how to use Medusa, an open source Node.js commerce engine that ships with all necessary ecommerce functionality including an easily navigatable admin system.

The full code for this Vue.js project is located in this GitHub repo. Below is a quick sneak peek of the final result.

What is Vue.js

Vue.js is an open source progressive JavaScript framework. It can be used to build a variety of types of apps, including websites, mobile apps, or desktop apps. This can be done by using Vue.js along with other platforms like Electron or Ionic.

Vue.js has been rising in popularity since it was first released due to its many advantages. It is easy to learn and use, with concise documentation and a smooth learning curve. It also has a tiny size, a reactive system, and a component-based, reusable architecture.

What is Medusa

medusajs / medusa

The world's most flexible commerce platform.

Medusa

Documentation | Website

Building blocks for digital commerce

Getting Started

Visit the Documentation to set up a Medusa application.

What is Medusa

Learn more about Medusa’s architecture and commerce modules in the Docs.

Upgrades & Integrations

Follow the Release Notes to keep your Medusa project up-to-date.

Check out all available Medusa integrations.

Community & Contributions

The community and core team are available in GitHub Discussions, where you can ask for support, discuss roadmap, and share ideas.

Our Contribution Guide describes how to contribute to the…

View on GitHub

Medusa is the #1 open source, Node.js commerce platform on GitHub. Its composable and headless architecture allows it to be incorporated with any tech stack to build cross-platform ecommerce stores, ranging from web to android and iOS applications.

Medusa allows developers to build scalable and maintainable ecommerce stores. It ships with many advanced ecommerce features such as an admin store dashboard, product configurations, manual orders, multi-currency support, and much more. Likewise, it easily integrates with different payment, CMS, and shipping options.

Please star if you like the tool 🌟

Prerequisites

Before you start, be sure you have Node.js version 14 or above.

Create a Server with Medusa Commerce Engine

To set up the Medusa server on your local machine, follow the steps outlined in the sections below.

Install Medusa CLI Tool

Medusa CLI can be installed using npm or yarn, but this tutorial uses npm. Run the following command to install the Medusa CLI:

npm install @medusajs/medusa-cli -g

Create a New Medusa Store Server

To create a new Medusa store server, run the command below:

medusa new my-medusa-store --seed

Note: my-medusa-store represents the project name; you can change yours to your preferred project name.

If you created a new Medusa project successfully, you should get a result similar to the screenshot below.

Test Your Medusa Server

To test your Medusa server, change to the newly created directory and run the develop command using Medusa’s CLI:

cd my-medusa-store
medusa develop

You can test it by sending a request to localhost:9000/store/products/ which lists the available products in your store.

Medusa Admin Installation

To set up your Medusa Admin, follow the steps below.

Clone the Medusa Admin repository:

git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin

Run the command below to install all necessary dependencies:

npm install

Test it:

npm start

By default, Medusa Admin runs on port 7000. You can go to localhost:7000 on your browser to access your admin page.

Since you included the --seed option while installing the Medusa server, a dummy admin user has been created. The email is admin@medusa-test.com, and the password is supersecret.

With the Medusa Admin, you can create new products and collections for your store. You can also edit, unpublish, duplicate and delete products from the admin.

You can visit the User Guide to learn more about Medusa Admin.

Create a New Vue.js Project

The next thing is to create and set up a new Vue.js project for the ecommerce project. You can run this command to set up a new Vue.js project:

npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript and testing support.

Ensure you choose the same option as the ones in the above screenshot.

Once the project is created, use the following commands to install the necessary dependencies:

cd vuejs-ecommerce
npm install

Tailwind CSS Installation

Tailwind CSS is a CSS framework that allows you to effortlessly style your ecommerce storefront. In this tutorial, you’ll use Tailwind CSS in your Vue.js ecommerce storefront.

In the vuejs-ecommerce directory, run the following command to install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The above command will generate both the tailwind.config.js and postcss.config.js files in your Vue.js project.

Configure Your Template Paths

In your tailwind.config.jsfile, replace the content array with the following snippet:

content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
  ],

Add the Tailwind Directives to your CSS

Go to src/assets/main.css and replace the entire code with the snippet below:

@tailwind base;
@tailwind components;
@tailwind utilities;

The baselayer handles things like reset rules or default styles applied to plain HTML elements.
The components layer handles class-based styles that you want to be able to override with utilities.
The utilities layer handles small, single-purpose classes that should always take precedence over any other styles.

You can visit Tailwind CSS documentation to learn more.

Integrate Vue.js Ecommerce Storefront with Medusa

In this section, you’ll prepare to integrate the Vue.js ecommerce storefront with the Medusa server to interact with APIs later on.

Create a Base URL Environment Variable

The baseURL environment variable is the URL of your Medusa server. Create a .env file in the vuejs-ecommerce directory with the following content:

VITE_baseUrl=http://localhost:9000

Note: If for any reason, you changed the default port number of your Medusa Server, you must change the 9000 to your port number here.

Install Axios in the Vue.js Project

You’ll use Axios to send requests to your Medusa server. You can install Axios by running the following command:

npm i axios

Now that Axios is installed, the next step is integrating Medusa API into your project.

Creating Components for Your Vue.js Project

In this section, you will create components such as Header, Footer, and Products components. These components will be used on different pages of your storefront.

In some components images are used to implement a better design for the storefront. You can find all images used for this project in the GitHub repository.

Page Header Component

Create the file src/components/PageHeader.vue and add the following code to it:

<template>
    <div>
        <div class="fixed z-50 bg-white topNav w-full top-0 p-3 md:bg-opacity-0">
            <div class="max-w-6xl relative flex mx-auto flex-col md:flex-row">
                <a href="" class="md:hidden absolute top-1 right-14">
                    <div class="relative">
                        <img src="/src/images/icon.png" class="bottom-1 cursor-pointer relative">
                        <div class="absolute px-1  bg-red-500 -top-1 -right-1 rounded-full border-2 border-white text-white" id="cart2" style="font-size: 10px"></div>
                    </div>
                </a>
                <div class="absolute h-10 flex justify-center bars items-center w-10 text-white right-1 -top-2 rounded-lg shadow-lg md:hidden cursor-pointer border-2 border-white bg-red-500">
                    <i class="fa fa-bars"></i>
                </div>
                <div class="flex-grow font-bold text-lg">
                    <router-link :to="{ name: 'home'}" >
                        <span class="">Noble's Shop</span>
                    </router-link>
                </div>
                <div class="menu hidden md:flex flex-col md:flex-row mt-5 md:mt-0 gap-16">
                    <div class="flex flex-col md:flex-row gap-12 capitalize">
                        <div class="">
                            <router-link :to="{ name: 'home'}" >
                                <span class="text-red-400 font-bold border-b border-red-400">home</span>
                            </router-link>
                        </div>
                        <div class="">
                            <router-link :to="{ name: 'products'}" >
                                <span class="">products</span>
                            </router-link>
                        </div>

                    </div>
                    <div class="flex gap-12">
                        <a href="#" class="hidden md:block">
                            <div class="relative">
                                <img src="/src/images/icon.png" class="bottom-1 cursor-pointer relative">
                                <div v-if="productId.length > 0" class="absolute px-1  bg-red-500 -top-1 -right-1 rounded-full border-2 border-white text-white" id="cart" style="font-size: 10px">{{productId.length}}</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        productId:Array
    }
}
</script>

The above code block covers the header page of this project. It includes the page routes, website name, and shopping cart icon.

This component will be added later in src/App.vue of this project to add a header on every page of this storefront.

Footer Component

Create the file src/components/FooterComponent.vue with the following content:

<template>
    <div>
        <div class="bg-purple-300 py-32 px-4 gap-y-20 justify-center items-center">
            <div class="font-extrabold text-4xl text-center space-y-3">
                <div class="">Join Our Wait List And Get</div>
                <div class="text-red-custom">Discount Up to 50%</div>
                <div class="">
                    <div class="py-1 flex relative max-w-xl mx-auto">
                        <input type="text" placeholder="Enter Your Email Here" class="text-sm border w-full pr-52 focus:ring-red-400 focus:border-red-400 relative px-5 placeholder-gray-400 py-6 -right-1 border-red-400 rounded-lg flex-grow">
                        <span class="bg-btn-color absolute text-base -right-1 uppercase rounded-lg z-10 text-white px-16 py-6 bg-opacity-25" style="top: 5px">
                            sign in
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-purple-800 py-32 PX-4">
            <div class="max-w-6xl gap-6 mx-auto grid grid-cols-1 md:grid-cols-9">
                <div class="md:col-span-3 py-3 space-y-4">
                    <div class="text-2xl font-bold text-gray-100">Noble's Shop</div>
                    <div class="text-gray-300 w-60 pr-0">We sell only but quality and first grade Hoddies, Joggers, Shorts and lot more.</div>
                </div>
                <div class="md:col-span-2 py-3 space-y-4">
                    <div class="text-2xl font-bold text-gray-100">Information</div>
                    <div class="text-gray-300 w-60 space-y-2 pr-0">
                        <div class="">About Us</div>
                        <div class="">More Search</div>
                        <div class="">Online Order</div>
                        <div class="">Support</div>
                    </div>
                </div>
                <div class="md:col-span-2 py-3 space-y-4">
                    <div class="text-2xl font-bold text-gray-100">Our Services</div>
                    <div class="text-gray-300 w-60 space-y-2 pr-0">
                        <div class="">Clothing</div>
                        <div class="">Fashion</div>
                        <div class="">Design</div>
                        <div class="">Privacy</div>
                    </div>
                </div>
                <div class="md:col-span-2 py-3 space-y-4">
                    <div class="text-2xl font-bold text-gray-100">Contact Us</div>
                    <div class="text-gray-300 w-60 space-y-2 pr-0">
                        <div class="">+234 098-897-8888</div>
                        <div class="">info@domain-name.com</div>
                        <div class="">Terms & Condition</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

In the above component, you covered everything about the footer page of this ecommerce app. You’ll use it later across your pages where you want to add a footer.

Products Component

Create the file src/components/Products.vue with the following content:

<template>
    <div>
        <div class="py-28">
            <div class="max-w-6xl mx-auto py-4 space-y-5">
                <div class="flex">
                    <div class="flex-grow text-4xl font-extrabold">Special Qualities For You</div>
                </div>
                <div class="grid gap-20 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-3">
                    <div v-for="(products, i) in fetchData" :key="i" class="rounded-lg shadow-xl" style="">
                        <router-link :to="{ name: 'single-product', params: { id: products.id }}">
                        <div class=" bg-white w-full flex justify-center items-center">
                            <img :src="products.thumbnail" alt="" srcset="">
                        </div>
                        <div class="bg-purple-100 py-8 relative font-bold text-xl w-full flex flex-col justify-center px-6">
                            <div class="">{{ products.title}}</div>
                            <div class="">
                                &euro; {{ products.variants[0].prices[0].amount / 100 }}
                            </div>
                        </div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { RouterLink } from 'vue-router';

export default ({
    data(){
        return{
            fetchData:[]
        }
    },
    mounted(){
        // calling the fetchProducts method when the page has loaded
        this.fetchProducts();
    },
    methods:{
        fetchProducts(){
            axios.get(`${import.meta.env.VITE_baseUrl}/store/products`)
            .then((data) => {
                    this.fetchData = data.data.products
                }).catch(err => console.log(err.products));
        }
    }
})
</script>

The product component is where the products are fetched using Medusa’s APIs. fetchProducts method is used to fetch products from the Medusa Server. Notice how you use the baseURL defined in the .env file.

In addition, the Vue router is being used to route each selected product to a single product page which you’ll add later.

Creating Vue.js Router File for Routing Pages

The next thing to do is to create a router file for routing our pages. By default, a route file is always generated when creating the vue.js project. Find the src/router/index.js file and replace the code inside with the below content:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SingleProductView from '../views/SingleProductView.vue'
import ProductView from '../views/ProductView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/products',
      name: 'products',
      component: ProductView
    },
    {
      path: '/single-product/:id',
      name: 'single-product',
      component: SingleProductView
    }
  ]
})

export default router

In the above component, you specified all your routes, including the route path, name, and components. The routes you added are for the homepage, products page, and single product page.

Create Storefront Pages

In this section, you’ll create pages for your storefront. Before you start creating these pages, go to src/App.vue and replace the code with the following:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import PageHeader from './components/PageHeader.vue'

</script>

<template>
  <header>
    <page-header :productId="products" />
  </header>

  <RouterView @addp="addP($event)" />
  <div class="fixed top-12 bg-green-600 text-white z-50 border text-md uppercase shadow-lg py-1 px-4 rounded-lg transistion-all duration-700" :class="notify">item added successfully</div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      products:[],
      notify:'-right-64',
      cartId:'',
      product_variant_id:null
    }
  },
  mounted(){
    this.checkCartID()
  },
  methods:{

      getCartID(){
        axios.post(`${import.meta.env.VITE_baseUrl}/store/carts`).then((res) => {
        localStorage.cart_id = res.data.cart.id;
      });
    },

    checkCartID(){
      this.cartId = localStorage.cart_id;
      if (!this.cartId) {
        this.getCartID();
      }
    },

    addP(data){
        this.cartId = localStorage.cart_id;
        axios.post(`${import.meta.env.VITE_baseUrl}/store/carts/${this.cartId}/line-items`, {
          variant_id: data,
          quantity: 1,
        })
        .then(({ data }) => {
            this.products.push(data)
            localStorage.cart = this.products
            this.notify = 'right-3'
            var inter = setInterval(() =>{
              this.notify='-right-64'
              clearInterval(inter)
            },1000)
        })
    }
  }
}
</script>

Here, you import the header component so that it appears on all pages.

You also add some methods related to the cart. The checkCartID method checks on page load if there’s a cart ID in the local storage, and if so calls the getCartID method. The getCartID method is used to fetch cart and its items from the Medusa server.

The addP method is used to add products to your store cart. It will be called later on the Single Product page.

You can learn more about Medusa carts in the documentation.

Homepage View

Create the file src/views/HomeView.vue with the following content:

<script setup>
import PageHeader from '../components/PageHeader.vue'
import Products from '../components/Products.vue'
import FooterComponent from '../components/FooterComponent.vue'
</script>

<template>
  <main>
    <div class="bg-purple-300 w-full">
      <div class="" style="height: 92vh">
          <div class="max-w-6xl mx-auto h-full flex items-center">
              <div class="grid gap-1 px-3 grid-cols-1 mt-8 md:grid-cols-5">
                  <div class="md:col-span-2 order-2 flex flex-col justify-center space-y-12">
                      <div class="space-y-5">
                          <div class="font-extrabold w-full text-6xl">
                              Nothing But Qualities
                          </div>
                          <div class="text-lg leading-7 max-w-md">
                              We sell quality Hoddies, Joggers, Shorts and lot more
                          </div>
                      </div>
                      <div>
                        <router-link :to="{ name: 'products'}">
                          <span class='w-fit  cursor-pointer transistion-all duration-300 hover:text-purple-400 text-white px-3  py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded flex justify-center items-center'>
                                Explore More
                          </span>
                        </router-link>
                      </div>
                  </div>
                  <div class="md:col-span-3 flex justify-center md:order-2">
                      <img src="/src/images/hoddie.png" class="bottom-1 relative h-11/12" style="">
                  </div>
              </div>
          </div>
      </div>
      <div class="flex justify-center bg-purple-300 py-4 pb-10 w-full">
          <div class="h-14 rounded-2xl relative" style="border: 1px solid black;padding:3px 6px 3px">
              <div class="bg-black rounded-full relative top-10" style="padding: 3px"></div>
          </div>
      </div>
    </div>

    <products/>

    <footer-component/>
  </main>
</template>

<script>
export default {
  mounted(){
    this.handlePageScroll()
  },
  methods:{
    handlePageScroll(){
      window.scrollTo(0, this.scrollposition);
      this.scrollposition = window.pageYOffset;
    }
  }
}
</script>

You import the Products and FooterComponent components inside this file and display them on the Homepage.

Products Page View

Create the file src/views/ProductView.vue with the following content:

<script setup>
import PageHeader from '../components/PageHeader.vue'
import Products from '../components/Products.vue'
import FooterComponent from '../components/FooterComponent.vue'
</script>

<template>
    <main>
        <products/>
        <footer-component/>
    </main>
</template>

You also import the Products and FooterComponent components inside this file to display them in the Products listing page.

Single Product Page

Create the file src/views/SingleProductView.vue with the following content:

<script setup>
import FooterComponent from '../components/FooterComponent.vue'
</script>

<template>
    <main ref="addProd">
        <div class='py-20 px-4'>
            <div class='text-white max-w-6xl mx-auto py-2'>
                <div class='grid md:grid-cols-2 gap-20 grid-cols-1'>

                    <div class=''>
                        <div class="relative">
                            <img :src="imgArr[currentImg]" alt="no image" />
                            <div class="absolute overflow-x-scroll w-full bottom-0 right-0 p-4 flex flex-nowrap gap-4">
                                <div  v-for="(er,i) in imgArr.length" :key="i" class="flex w-full flex-nowrap gap-4 rounded-lg">
                                    <div @click="currentImg = i" :title="imgArr[i]" class="w-16 h-24 flex-none">
                                        <div class="h-full w-full rounded-lg cursor-pointer shadow-lg border overflow-hidden">
                                            <img :src="imgArr[i]" alt="" class="h-full w-full">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class=''>
                        <div class='flex md:flex-col flex-col space-y-7 justify-center'>
                            <div class='text-black space-y-3'>
                                <h2 class='font-bold text-xl text-black'>{{product.title}}</h2>
                                <p class='text-sm'>{{product.description}}</p>
                            </div>

                            <div class='space-y-3'>
                            <div class='font-bold text-md text-black'>Select Size</div>
                            <div class='flex flex-row flex-wrap gap-4'>
                                <div v-for="(size,i) in sizes" :key="i" class="">
                                    <div @click="currentSize = size ; currentPrice = priceList[i] ; variants_id = product.variants[i].id" :class="currentSize == size ? 'border-purple-300 bg-purple-100':'border-gray-100' " contenteditable="false" class='border-2 rounded-md cursor-pointer flex justify-center py-3 px-5'>
                                        <span class=' text-black text-sm'>{{size}}</span>
                                    </div>
                                </div>
                            </div>
                            </div>

                            <div>
                            <div class='flex flex-col space-y-3'>
                                <div>
                                <span class='text-gray-700 text-2xl font-san'>&euro; {{ currentPrice }}</span>
                                </div>

                                <div @click="addProduct()" class='bg-gray-900 cursor-pointer text-white w-full text-sm font-semibold py-3 flex justify-center cursor pointer hover:bg-white hover:border hover:border-gray-900 hover:text-black '>
                                    ADD TO CART
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer-component/>
    </main>
</template>

<script>
import axios from 'axios'

export default {
    activated() {
        window.scrollTo(0, 0);
    },
    data(){
        return{
            currentImg : 0,
            imgArr:[],
            productData:[],
            product:[],
            productId:'',
            sizes:[],
            currentSize:'S',
            priceList:[],
            currentPrice: '',
            variants_id: 0
        }
    },
    mounted(){
        window.scrollTo(0, 0);
    },
    beforeMount(){
        this.productId = this.$route.params.id
        axios.get(`${import.meta.env.VITE_baseUrl}/store/products/${this.productId}`)
        .then((productData) => {
                this.product = productData.data.product;
                console.log(this.product);
                this.product.images.forEach(data => {
                    this.imgArr.push(data.url)                                    
                });
                this.currentPrice = this.product.variants[0].prices[0].amount / 100
                this.variants_id = this.product.variants[0].id
                this.product.variants.forEach(data => {
                    this.sizes.push(data.title)                    
                    this.priceList.push(data.prices[0].amount / 100)                    
                });
            }).catch(err => console.log(err));
    },
    methods:{
        addProduct(){
            this.$emit('addP',this.variants_id)
        }
    }
}
</script>

In the above code block, you are fetching a single product from the Medusa server using its id. Then, you display the product’s information including its price, size, and description.

When the Add to Cart button is clicked, the addProduct method is executed. This method calls the addP method defined in src/App.vue passing it the selected variant ID.

Change Vue.js Port

In the vite.config.jsfile, add this code snippet inside the object parameter passed todefineConfig:

server: {
    port:8000
},

In the above code block, you change the port of the Vue.js ecommerce storefront to 8000. This allows you to avoid cors issues when sending requests to the Medusa server.

Test the Storefront

You can now test your Vue.js ecommerce storefront with the following steps:

Run the Medusa server:

medusa develop

Run the Vue.js app:

npm run dev

When you open the storefront on localhost:8000, you’ll see the following home page:

If you scroll down or click on the Products item in the navigation bar, you’ll see products populated from your Medusa server.

Try clicking on any of the products, a new page will open showing the products details.

You can add the product to the cart by clicking the “Add to Cart” button.

What’s Next?

In this tutorial, you learned how to create a Vue.js Ecommerce storefront with the help of Medusa. This storefront only implements the product listing and add-to-cart functionality, but there’s much more to add to your storefront.

Check out the following documentation pages for help on how to move forward:

Add a checkout page.
Install Stripe plugin to process payments.
Add advanced search functionality with MeiliSearch.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord

Ecommerce Website Breakdown: Using Medusa as a Case Study

Noble Okechi — Tue, 18 Oct 2022 12:17:59 +0000

Introduction

If you want to own an eCommerce store and have been facing challenges in choosing the best eCommerce platform to build your store on, this article will walk you through selecting the best eCommerce platform to work with.

In this article, you’ll learn the key concepts of an eCommerce platform, the different types of eCommerce and an overview of eCommerce platforms. You’ll learn how to start up your own store, the benefits of using Medusa eCommerce Platform, and why you should use Medusa.

What is eCommerce?

eCommerce, the short form for Electronic Commerce, enables the buying and selling of goods and services or sending data and funds via the internet.

eCommerce simply is a place where we can buy or sell different items. Today, we have many eCommerce platforms; examples include Medusa, Shopify, Amazon, Alibaba, eBay and others.

Types of eCommerce Websites

As said earlier, we have many eCommerce websites, and they fall into different categories, including:

Business to Business (B2B)
Business to Consumer (B2C)
Consumer to Consumer (C2C)
Consumer to Business (C2B)
Business to Administration (B2A)
Consumer to Administration (C2A)

Business to Business (B2B)

B2B is a process where the transaction of goods and services is done between two companies or business owners, i.e. selling to another (as wholesale services). This process does not involve the end user yet (consumer).

Business to Consumer (B2C)

B2C involves the consumer itself, i.e. selling products and services to the consumer. This model is the most popular today across different countries. Examples are McDonald’s, Walmart, Amazon, and many others.

Consumer to Consumer (C2C)

C2C involves the selling goods between two consumers. Let’s say you bought pizza from McDonald’s, and after getting home, you found out that you were given beef pizza instead of the chicken pizza you requested. You then decide to sell it to your friend since he or she enjoys eating beef pizza. That whole process is called C2C, it can also be done through platforms like eBay ****and more, where you have to put the goods online for other consumers to see.

Consumer to Business (C2B)

C2B is the opposite of Business to Consumer (B2C). This involves the transaction between a consumer and business owners and companies. For example, rendering your service as a photographer, graphics designer, or web developer to a company or business owner to buy or use.

Business to Administration (B2A)

B2A transaction occurs between companies and public administration or government bodies. The products and services rendered to them are social security, employment, legal documents, and so on.

Consumer to Administration (C2A)

C2A is the opposite of B2A, but products or services are rendered by individuals to government bodies or public administration. This type of eCommerce applies in the areas of health, education, social security, and so on.

What is Medusa?

Medusa is an open-source composable commerce engine that enables developers to create amazing digital commerce experiences.

As an open-source eCommerce platform, you can contribute to it and customize certain things based on your preference. Medusa can also be used by beginners (developers), not just experienced developers.

Why Should You Use Medusa?

Medusa is a free, developer-friendly, open source, eCommerce website. Unlike other eCommerce websites that have so many limitations and are not free, Medusa gives you the full authority, power, and access, to control, customize, and modify every line of code in your store however you want it.

Medusa is so flexible that your business can grow with it. As your business grows over the years, you may feel the need to add some new features or change some things in your store. Medusa makes it very easy for you to write some lines of codes to achieve what you want.

How Medusa Works

Medusa functions as a Headless commerce engine, its headless architecture makes it easy for third-party integrations such as Payment providers, Analytics, Notification providers, Search integration, CMS, and storage integration.

Medusa has a pre-built Admin Panel, Nextjs Storefront, and Gatsby Storefront, which make it easier for building. It is easy to set up a Medusa eCommerce store using all pre-built codebase and third-party integrations.

How to Get Started with Medusa

Getting started with Medusa eCommerce website is as simple as cloning an open source codebase from a GitHub repository.

Medusa has a well-written documentation, which makes the setup easier. Medusa eCommerce website can be completely integrated with a few lines of commands as stated in the Quickstart Guide Documentation.

For more details on how to use Medusa, visit the documentation website.

Benefits of Medusa over other eCommerce Platforms

1. Medusa Flexible Backend

Medusa as an open source headless commerce engine, which has similar feature as other ecommerce platforms. But the Medusa backend is built such that developers can easily study, understand and write new codes depending on what the developer intends to achieve.

2. Medusa Site Performance

Medusa decouples the frontend from the backend and also decouples the admin panel from the backend, i.e Medusa frontend, backend and admin panel stand on a separate codebase.
The frontend only fetches and posts data to backend as well as the admin panel, which makes Medusa site performance to be faster.

3. Medusa Supports Multi-currency

With Medusa, there is no need to create or have multiple stores just to handle multiple currencies. Medusa lets you do it all from one admin dashboard. You can create multiple regions in the same store and select the currency of the region. Then, you’ll be able to set the price of the product differently for each currency.

Read: How Medusa resolved Multi-currency issue.

4. Medusa supports Integration

As an eCommerce platform, medusa supports any third-party integrations, unlike other eCommerce platforms that only support a few third-party integrations.

It only requires a basic understanding of Medusa code-base to enable you integrate any third-party service.

Conclusion

Medusa remains the best platform for developers; its characteristics of being open source, developer-friendly, and free are very interesting and something you must try. To set up your own medusa store visit Medusa Quickstart Guide.

Always remember to reach out to the Medusa team via Discord if you need more clarity on any issue you are facing.

Building REST API with Laravel 9x

Noble Okechi — Fri, 16 Sep 2022 19:50:53 +0000

Laravel is a PHP framework that is build for web Artisan. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as authentication, routing, sessions, and caching.

Laravel aims to make the development process a pleasing one for the developer without sacrificing application functionality.

Laravel is accessible, yet powerful, providing powerful tools needed for large, robust applications. A superb inversion of control container, expressive migration system, and tightly integrated unit testing support give you the tools you need to build any application with which you are tasked.

Laravel is a backend framework that provides all of the features you need to build modern web applications, such as routing, validation, caching, queues, file storage, and more. However, we will be learning steps on how to build REST API with Laravel 9x.

Laravel 9 continues the improvements made in Laravel 8.x by introducing support for Symfony 6.0 components, Symfony Mailer, Flysystem 3.0, improved route:list output, a Laravel Scout database driver, new Eloquent accessor / mutator syntax, implicit route bindings via Enums, and a variety of other bug fixes and usability improvements.

Laravel 9 has been one of the most prevalent PHP frameworks for a long time now. It is adaptable, scalable, versatile, and has become one of the in fact the systems for engineers and companies working with PHP.

Contents

Prerequisites
Create a Laravel Project
Setup a Database
Create a Database Migration
Create an API Routes
Create a Controller
Code your Functions
Code Modules
Conclusion

Prerequisites

To follow along with this tutorial, you need to ensure that PHP and Composer is installed on your local computer for artisan commands. If you are building frontend on a same file, I recommend you install Node for NPM commands. But for this content, we shall be using Postman for testing and I recommend you to go through my content on how to setup postman with laravel.

Create your Laravel Project

To create a laravel project, run the commands below

composer global require laravel/installer

laravel new laravel-9x

composer is a dependency manager for PHP that provides a standard format for managing dependencies of PHP software and required libraries.

The first command composer global require laravel/installer is used to install laravel on your local machine.

laravel new laravel-9x command installs a fresh laravel project on your computer.

Note: laravel-9x can be replace with any preferred name of your choice, as it serves as the project name.

After the project has been created, cd into the project directory.

cd laravel-9x

After migrating into your project with the above command, run the next command below.

composer install

The above command creates a new vendor folder on our project and gives access to run to run artisan commands.

Setup a Database

To setup your database on laravel, locate .env file inside your project files.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=testproject
DB_USERNAME=root
DB_PASSWORD=

For this project, I will be using MySQL database and that is while I have the above code snippet.

DB_DATABASE=testproject represents your database file name, which testproject can be changed to any preferred name of your choice.

Having created a database connection as shown above, you can run the below command to migrate your database model.

php artisan key:generate

php artisan migrate

The command above generate an APP_KEY on the .env file for your project, while the second command migrate your database.

Create a Database Migration

A migration file in laravel represents a database table file in the core PHP code. Migration file is often generated according preferred name of your database table.

We will generate a migration file called contact, which will serve as contact table for testing our REST API.

php artisan make:model Contact -m

The above command will generate a model and database migration file called contact.

Locate the migration inside your project on database/migrations/2022_09_16_042805_create_contacts_table.php. Note that the file name is been named with the current data attached to it.

public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->string('tel');
            $table->timestamps();
        });
    }

Copy and replace the up() function with the snippet above.

Note, we only added the code block below to the function up()

$table->string('name');
$table->string('email');
$table->string('tel');

After completing the above, run migration to migrate/create your table contact on your database.

php artisan migrate

Create an API Routes

In laravel, we can register all our API routes inside routes/api.php file.

We will be registering two post API routes before the middleware routes function. We are creating save_data and fetch_data routes.

Route::post('save_data', [ContactController::class, 'save_data'])->name('api.save_data');
Route::post('fetch_data', [ContactController::class, 'fetch_data'])->name('api.fetch_data');

The above code block demonstrate how your route should lock like.

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;


Route::post('save_data', [ContactController::class, 'save_data'])->name('api.save_data');
Route::post('fetch_data', [ContactController::class, 'fetch_data'])->name('api.fetch_data');

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

This is my entire api.php route file codes, you can copy and replace with yours.

Create a Controller

Controllers can group related request handling logic into a single class.
A Controller is that which controls the behavior of a request. It handles the requests coming from the Routes. In Laravel, a controller is in the app/Http/Controllers directory.

We will have to create a controller named ContactController using the command below.

php artisan make:controller ContactController

After creating our controller, we can locate the controller on app/Http/Controllers.

Code your Functions

This is the sweetest part of this article is the coding aspect, here can write your codes according your coding preference, but for a better clarity, you can make reference to my codes.

Inside the ContactController.php, we will be having two functions according to our routes on routes/api.php, where we have save_data and fetch_data routes.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    // code here
}

The above code block, represents everything in our ContactController.php before we write our functions inside.

Now, we will be writing our first function, which is the save_data function.

 public function save_data(request $request)
    {
        if(isset($request->name) && isset($request->email) && isset($request->tel)){
            // proccess data
            $contact = new contact;
            $contact->email = $request->email;
            $contact->name = $request->name;
            $contact->tel = $request->tel;
            if ($contact->save()) {
                return response()->json([
                    'status' => 'success',
                    'message' => 'Data saved successfully',
                    'data' => $contact
                ]);
            } else {
                return response()->json([
                    'status' => 'error',
                    'message' => 'An error occured'
                ],500);
            }

        }else{
            return response()->json([
                'status' => 'error',
                'message' => 'Missing Paramiter'
            ],501);
        }
    }

The isset() function checks whether a variable is set, which means that it has to be declared and is not NULL. This function returns true if the variable exists.

The above code block will save data coming from our REST API routes into our contact model in the database.

For this article, I will be testing with postman, if you are new to postman, I will suggest you check this article on how to setup postman with laravel.

From postman, we will be sending name, email, and tel as required on the save_data function.

If you have sent the exact data as mine on the snapshot above, you will be getting same response as mine.

"status": "success",
    "message": "Data saved successfully",
    "data": {
        "email": "okechinoble@gmail.com",
        "name": "Noble Okechi",
        "tel": "+2349097784784",
        "updated_at": "2022-09-16T14:47:45.000000Z",
        "created_at": "2022-09-16T14:47:45.000000Z",
        "id": 1
    }

Now, that we have achieved the save_data function, it is time to work build our fetch_data function for getting all stored data from contact model.

public function fetch_data()
    {
        $fetch = contact::latest()->get();
        if ($fetch) {
            return response()->json([
                'status' => 'success',
                'message' => 'Data fetched successfully',
                'data' => $fetch
            ]);
        } else {
            return response()->json([
                'status' => 'error',
                'message' => 'An error occured'
            ],500);
        }

    }

latest() fetches the most recent set of data from the Database. it sort its data using the created_at column.

Now, we can create fetch_data request on postman to test the fetch_data function.

After setting up postman request to fetch data from fetch_data API, I got an array of data as response below.

"status": "success",
    "message": "Data fetched successfully",
    "data": [
        {
            "id": 2,
            "name": "Developer Noble",
            "email": "dev@gmail.com",
            "tel": "+234000000000",
            "created_at": "2022-09-16T15:20:39.000000Z",
            "updated_at": "2022-09-16T15:20:39.000000Z"
        },
        {
            "id": 1,
            "name": "Noble Okechi",
            "email": "okechinoble@gmail.com",
            "tel": "+2349097784784",
            "created_at": "2022-09-16T14:47:45.000000Z",
            "updated_at": "2022-09-16T14:47:45.000000Z"
        }
    ]

Wow, if you have gotten it to this extent, bravos.

Code Modules

We can now wrap up our code by posting the entire codes module by module.

ContactController Module

ContactController module is located at app/Http/Controllers

<?php

namespace App\Http\Controllers;

use App\Models\contact;
use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function save_data(request $request)
    {
        if(isset($request->name) && isset($request->email) && isset($request->tel)){
            // proccess data
            $contact = new contact;
            $contact->email = $request->email;
            $contact->name = $request->name;
            $contact->tel = $request->tel;
            if ($contact->save()) {
                return response()->json([
                    'status' => 'success',
                    'message' => 'Data saved successfully',
                    'data' => $contact
                ]);
            } else {
                return response()->json([
                    'status' => 'error',
                    'message' => 'An error occured'
                ],500);
            }

        }else{
            return response()->json([
                'status' => 'error',
                'message' => 'Missing Paramiter'
            ],501);
        }
    }

    public function fetch_data()
    {
        $fetch = contact::latest()->get();
        if ($fetch) {
            return response()->json([
                'status' => 'success',
                'message' => 'Data fetched successfully',
                'data' => $fetch
            ]);
        } else {
            return response()->json([
                'status' => 'error',
                'message' => 'An error occured'
            ],500);
        }

    }
}

Contact Migration Module

If you can recall, we buildup our database contact model fields inside migration folder and can be located at database/migrations.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->string('tel');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
};

API Routes Modules

API routes is located at routes/api.php.

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;


Route::post('save_data', [ContactController::class, 'save_data'])->name('api.save_data');
Route::post('fetch_data', [ContactController::class, 'fetch_data'])->name('api.fetch_data');

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Conclusion
In this article, we successfully explored different modules in laravel 9x and we demonstrated easy steps on how to build REST APIs on laravel 9x.

With laravel 9x, it is easy to build standard REST APIs for every frontend.

Paystack Payment Initialization using PHP Laravel Backend

Noble Okechi — Mon, 12 Sep 2022 13:51:12 +0000

Initializing paystack transaction from your backend is safer way of building a secured payment integration.

For this content, I will be using postman for my testing. If you are new to postman, check my post on how to setup postman with laravel backend.

Create a Route

Create a route on api.php file with any preferred name.

Route::post('initialize_paystack', [PaystackController::class, 'initialize_paystack'])->name('api.initialize_paystack');

Create a Controller

For this solution, I have a controller called PaystackController and a function inside the controller called initialize_paystack.

To initialize payment, see the code below.

private $initialize_url = "https://api.paystack.co/transaction/initialize";

public function initialize_paystack(Request $request)
    {
        // $amount = number_format($request->amount,2);
        $fields = [
            'email' => $request->user()->email,
            'amount' => $request->amount * 100,
        ];
        $fields_string = http_build_query($fields);
        //open connection
        $ch = curl_init();
        //set the url, number of POST vars, POST data

        curl_setopt($ch,CURLOPT_URL, $this->initialize_url);
        curl_setopt($ch,CURLOPT_POST, true);
        curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        "Authorization: Bearer ".env('PAYSTACK_SECRET_KEY'),

        "Cache-Control: no-cache",

        ));

        //So that curl_exec returns the contents of the cURL; rather than echoing it

        curl_setopt($ch,CURLOPT_RETURNTRANSFER, true); 
        //execute post

        $result = curl_exec($ch);
        $response = json_decode($result);

        return json_encode([
                'data' => $response,
                'metadata' => [
                    'payment_for' => 'token'
                ]
           ]);
    }

Send data from postman

To trigger the initialization, I will send the amount from postman which can also be sent from your frontend.

Your response will return payment link, which you can use to make a payment or return back to the frontend.

"data": {
        "status": true,
        "message": "Authorization URL created",
        "data": {
            "authorization_url": "https://checkout.paystack.com/zbm34791mm5t9wk",
            "access_code": "zbm34791mm5t9wk",
            "reference": "dod8hghbhc"
        }
    },

The image above is response gotten after clicking the payment link.

How to Setup Postman with Laravel Project

Noble Okechi — Mon, 12 Sep 2022 13:00:12 +0000

Postman is an API platform for developers to design, build, test and iterate their APIs. Often, postman has been an essential API tool for developers.

As a Laravel developer, it is advisable you know how to work in postman while building your projects.

In this content, I'm going to be listing simple clear steps on how to can communicate with your laravel project through postman.

Step 1
Own a Postman Free Account

Create a free postman account by visiting POSTMAN or click on signup for postman.

Step 2
Create a Workspace and Collection

You can choose any preferred name as your workspace name.

Create Collection

After you are done creating a workspace, it is advisable you create a Collection with any preferred name of your choose as indicated below.

Step 3
Download and Install Postman Agent
To download postman desktop agent, click DOWNLOAD, after downloading, don't forget to install it.

Step 4
Working with Laravel

If you've already setup your laravel project, follow the codes blocks to setup and test your connection.

Create a route on route -> api.php



Route::post('test_data', [TestController::class, 'test_data'])->name('api.test_data');

Goto your controller and create a function according to your the name used in api.php route.



 public function test_data(Request $request)
    {
        return $request;
    }

Next thing is to serve your project by running php artisan serve on your terminal, copy the link and lets move to the next step.

Step 5
Testing the Connection

Add a request by clicking the add a request as shown on the image above.

Now, you can now paste the copied link, after we served the project on terminal and click on "send".

If it return and empty array [] for you, it means you got it right.

We can decide to send a extra parameter as request and return the response from you controller.

If you got similar results as mine on the screenshot above, congratulation.

How to clone and setup Laravel project from GitHub

Noble Okechi — Wed, 07 Sep 2022 18:13:25 +0000

Knowing how to clone and setup your Laravel project from GitHub is one of the most important thing you can know as a software developer. It gives you the ability to have access to millions of open source laravel projects out there.

In this content, I will be dropping a clear steps on how to clone laravel projects from github.

Step 1
Locate the Repository

If you already have a Laravel project you want to clone before now, it is advisable you copy the repository link as directed on the snapshot above.

Step 2
Move to Visual Studio Code Editor

On VS Code Editor, go to Source Control Tab or use Ctrl+Shift+G to locate the control source tab as shown on the image above.

Step 3
Clone Repository

Click on Clone Repository, then enter the repository link copied and click on clone.

Step 4
Select Local Directory

After Step 3, the computer automatically promote you to select the local directory to clone the Laravel Project into.

For me, I'm cloning the project into my htdocs because I'm using XAMPP Server.

At this point, your project is now cloning.

Step 5
Open Cloned File

After our project has successfully been cloned, we can now go ahead to open it.

Step 6
Setting Up Project

Laravel projects requires extra setups before it can run on your local computers.

First, we are going to install Node Module and Vendor files.

To install node module run npm install on your VS Code Terminal and wait for it to complete.

To install your Vendor file run composer install on your VS Code Terminal and wait for it to complete.

Step 7
Setup .env file

To setup your .env, kindly duplicate your .env.example file and rename the duplicated file to .env.

Step 8
Setup Database

For this content, I'm using PHP MyAdmin Database.

On your .env file, locate this block of code below.



DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=subnetweb
DB_USERNAME=root
DB_PASSWORD=

The block of code above represents your Database connection and subnetweb is my database name, which you can create your database name to be something else.

Step 9
Commands

To finalize this everything, run the following commands on your terminal.



npm run dev

php artisan key:generate

php artisan migrate

php artisan server

Step 10
Conclusion

If you finished step 1 - 10 successfully, congratulation!!! you have just cloned your first Laravel Project from GitHub.

Click here to follow my youtube tutorial on this content.

How to Publish Project to GitHub

Noble Okechi — Fri, 02 Sep 2022 23:12:39 +0000

Having your project stored on GitHub is sweetest and easiest way to backup your project for future purpose.

In this content, I will be reviewing different methods of publishing projects to GitHub.

Before we start, we assume you already have created a GitHub Account, but if you don’t, kindly click here to see how to create a fresh GitHub Account.

Method 1: The Create and Upload Method

This is the method I recommend if you are just trying to backup any project or documented files in GitHub, also this method is best recommended to beginners.

Step 1

If you are under your Repositories Tab, you should be having a similar screen just like mine above.

Click on the New green button as directed on the snapshot above to start the process.

Step 2

Choose a preferred repository name to suit your project, but for this content, we’ll be using testproject as our repository name.

Complete this process by clicking Create repository button as demonstrated on the snapshot above.

Step 3

Once your repository has been created successfully according to to Step 2, you should have the above snapshot on your screen.

Click on “uploading an existing file” to continue the process.

Step 4

Drag your Project and drop them or choose your files as demonstrated on the snapshot above.

You are free to add statement as commit and lastly, click on commit changes button to complete this method.

Method 2: Publishing from Visual Studio Code Editor

This is the best method I recommend for every software developer.

To start the process, make sure you have written at least “a line of code” in your project and also sign in your GitHub account your VS Code Editor.

To Sign In, click the above icon on your Visual Studio Code Editor

Step 1

Click on “Publish to GitHub” button to continue.

Step 2

Select your repository visibility by clicking on it.

Private: Anyone on the internet can see this repository. You choose who can commit.

Public: You choose who can see and commit to this repository.

Step 3

Your project is been published to GitHub and creating its first commit.

Step 4

This what you see once your project has published successfully.

Step 5

We can now check our GitHub Repositories to know if the project really completed.

Bravos!!! our project completed successfully.