Skip to content

01: Create project

Welcome to the SOFA tutorial!

Introduction

SOFA is a new frontend stack by Shoptet, built on React & GraphQL. It allows you to build custom user experiences on this popular e-commerce platform, implement advanced SEO, marketing and much more.

In this tutorial, you'll build a simple e-shop from start to finish. As React & GraphQL are still relative new technologies, we'll take it from the very basics so you should be able to follow even if you've previously worked with e.g. PHP or Ruby.

Prepare your computer

Install these:

  • Node 12
  • Yarn
  • Recommended: VSCode
  • Recommended on Windows: Unix-like shell like Bash, Cygwin or Git Bash

Create new SOFA project

SOFA projects are standard Next.js projects with a couple of conventions around them (but not too many). Let's create a project skeleton:

yarn create next-app

Give your project a name like "my-shop" and go with the default Next.js starter kit. Then, run it:

cd my-shop
yarn dev

On http://localhost:3000, you should see this:

Screenshot 2020-05-08 at 09 43 36

🎉, you're prepared to take the next step.