DEV Community: Gemma Vincent

Building a JAMstack shop with Strapi 4, Nuxt 3, Snipcart - part 1

Gemma Vincent — Wed, 01 Dec 2021 12:37:44 +0000

Here's a link to the shop that we've built, if you follow this series of blog posts this is what you'll also end up with Pick a Sick Wick.

We've done our own designs for this little demo and they can be found here, so as we take you through how to build this out, I will follow a design that we've done for this series.

Watch the video or follow along below.

If you are the kind of person that likes to dive straight into code, we have created example repositories for both the Nuxt and Strapi parts:

Strapi 4 👉 https://github.com/pixelhop/pick-a-sick-wick-frontend
Nuxt 3 👉 https://github.com/pixelhop/pick-a-sick-wick-backend/

I can't tell you how excited we've been, waiting in anticipation for Nuxt 3 and Strapi 4 to come out, and now they're here, and we're ready to get our hands dirty and start using them straight away. I've always wanted to build an online candle shop, so I thought now's the time, and I can show you how to do it too, so let us go and Pick a Sick Wick.

Project setup with Strapi and Nuxt

If you're the sort of person that likes to get straight into the code, then look no further; you can find the repos:

The front-end is using Nuxt 3, and the repo is here
The backend is using Strapi, and the repo can be found here

Feel free to pull it down and dig in.

Here's a step by step guide on how to build your own shop, so let's stop waffling and let's get building.

Just to give you a little heads up, our folder structure is going to look something like this:

Let's just create our folder and go into it, open up your terminal and run:

take pick-a-wick

Strapi 4

Now we're going to get Strapi 4 setup to create the data ready to be pulled through the Nuxt 3 front-end.

npx create-strapi-app@beta backend --quickstart

Let the terminal do the hard work for you, sit back have a sip of coffee and a biscuit. Once it's finished, a new tab will open in your browser here: http://localhost:1337/admin. You now just need to create your account.

Tada! How easy was that?! Here's your Strapi Dashboard; if you're used to using Strapi 3, you'll see some differences here; if you ask me (and I know you're not, but here's my opinion anyway 🙈), I think it looks a lot cleaner, lighter and nicer.

Let's jump in and start creating the architecture of the products by creating a collection type.

Create the collection type like so:

Note: I should have probably called this 'Products'.

Then add in the fields you require; for now, we'll add in these fields :

Title - Text field
Description - Text field
Image - Media field
Prices - Number field

Now that you've added in your fields, make sure you save the collection. Your fields should look something like this:

Click the button in the top left and go to Content Manager > Products and, let's add in some new entries; for me, I'm going to be adding in some candles.

Click Add new entry and fill out all the data; once you're done, click Save and Publish and add in a couple more. We have added in some silly joke names because we thought it was funny haha.

Wahoooo, now you should have a list of products 🕯🛍 !!

Now, all we need to do is make the product content public to fetch it from the front-end. To do this go to General > Settings > Users & Permission Plugin > Roles.

Click Public and open out the Product accordion and check to find and findone; finally, just save it, and your products data should now be public.

You should now be able to go http://localhost:1337/api/products and see a JSON blob with all your products in.

Nuxt 3

Wahoooo, now you're backend is all set up and ready to party; let's move on to the front-end and set up Nuxt 3. Open up terminal and type:

// pick-a-wick is the name of the directory the Nuxt installation will save into
npx nuxi init frontend

Now just head into that directory:

cd frontend

Install all of the dependencies:

npm install

If you're anything like us, we use Taliwind on every project; if you don't want to, you can just skip the next 2 steps.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Generate the Tailwind and Postcss config files

npx tailwindcss init -p

Time to open up your code in your chosen editor; for me, it's VSCode; just do that from the command line, like so:

code .

You will need to add some config to your nuxt.config.ts file, lets also add in the Google fonts whilst we are here. The ones we're using are Playfair Display and Source Sans Pro.

Your code config file should look like this:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  // Add entry css file
  css: ['tailwindcss/tailwind.css'],
  build: {
    postcss: {
      // add Postcss options
      postcssOptions: require('./postcss.config.js'),
    },
  },
  meta: {
    link: [
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      { href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap', rel: 'stylesheet' }
    ]
  }

})

Finally, let's get it up and running; go to your terminal and type:

npm run dev

Note: make sure your node version is > 14

Wahoooo!! How easy was that!? Your Nuxt site should now be up and running, if you've nothing else running, it will probably be on port 3000, and the URL will be http://localhost:3000/. Open it up and go check it out. You should have something like this:

To check you've got Tailwind up and running okay, you can head back over to the code base and into the app.vue file and add a Tailwind class around

<template>
  <div>
    <h1 class="text-red-500 bg-green-200">This is a title</h1>
  </div>
</template>

On the front-end you should see something beautiful like this.

We've done some designs for this project, so I'll be following them whilst going through this tutorial.
Before we go on let's add in some default colours and fonts into tailwind.config.js.

module.exports = {
  purge: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  mode: 'jit',
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'brand-grey': {
          300: '#828282',
          DEFAULT: '#898989',
          500: '#B5B5B5',
          600: '#5E5E5E',
          800: '#383838',
        },
        'brand-beige': {
          100: '#E5E5E5',
          200: '#E3D9CD',
          300: '#EAE5E0',
          DEFAULT: '#E9BA9E',
        },
        'brand-brown-500': '#4E3924',
        'brand-orange': '#FF6721',
      },
      fontFamily: {
        'heading': ['Playfair Display', 'serif'],
        'body': ['Source Sans Pro'],
      }
    },

  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

Right, we're making headway now; if you're still with me, thank you, I'm pleased I've not bored you too much so far, hehe, and if you're not, I totally understand.
Time to get the products from Strapi coming out in the front-end. Buckle up this is going to be fun.
In the root folder, create a new directory called pages within that create a page called index.vue. This is going to be the new homepage. We're going to tidy it up and split everything into its own components in the blog post, but for the time being, we just want to try and get the data back from Strapi.
First we want to fetch all the data , then we want to loop over all the products and put the data out onto the homepage using Nuxt 3, this is really easy to do and the code is fetch the data is only 1 line, sexy if you ask me. useFetch is a global helper function provided by Nuxt 3 that will load the data for the page server side, or during static generation of the page.

<script setup> allows you to use the more streamline syntax to create your Vue components (e.g. you don't have to register components or create data objects).

<template>
  <div>
    <div v-for="product in products.data" :key="product.id">
      <nuxt-link :to="`/products/${product.id}`">
        <h1 class="font-bold">{{ product.attributes.Title }}</h1>
        {{ product.attributes.Description }}
      </nuxt-link>
    </div>
  </div>
</template>

<script setup>
  const { data: products } = await useFetch('http://localhost:1337/api/products')
</script>

To get the index page showing we just need to edit our app.vue file to look like this. This is the route file that kicks everything off. Nuxt page is a component that is added by Nuxt and provides a location for your Nuxt pages to appear.

<template>
  <NuxtPage/>
</template>

If you check your browser you should have the title and description of your products wooooo 🎉

Wooo! Fingers crossed that's all working for you but if you have any questions feel free to get in touch and ask any more questions via our website or Twitter. There's going to be a few more blog posts in this series, so feel free to subscribe to our newsletter to find when they've been released.

Thank you for reading and next we will be building out the design, and all of the components etc. Once we've got it working we will then integrate Snipcart. And it won't be too long until you can have your own shop.

Creating an internationalised site with Strapi and Nuxt

Gemma Vincent — Mon, 17 May 2021 08:13:26 +0000

This post was first published on our site, you can subscribe for more posts like this here: https://www.pixelhop.io/writing/.

We were really excited when Strapi released a new update a few weeks ago that included internationalisation! This post will show you the basics of creating an internationalised site using Strapi and Nuxt.

Watch the video or follow along below.

If you are the kind of person that likes to dive straight into code, we have created example repositories for both the Nuxt and Strapi parts:

Strapi 👉 https://github.com/pixelhop/strapi-i18n
Nuxt 👉 https://github.com/pixelhop/nuxt-i18n

Setting up Strapi

First things first, let's set up our Strapi CMS. Create a folder to hold this project, and then let's create a new Strapi project using your terminal and the following command:

npx create-strapi-app strapi --quickstart

After npm is finished installing your new Strapi instance, it will start the Strapi dev server and ask you to create an admin login. Go ahead and make your user, and voilà you've got a brand spanking shiny new headless CMS at your disposal. "Now we're sucking on diesel"*

*We have been watching far too much Line of Duty.

Adding some content

What's the point of a CMS if you've got no content? For the purpose of this demo, we are going to create a basic content type.

Head to the Content Types Builder in the Strapi admin: http://localhost:1337/admin/plugins/content-type-builder/content-types/

Once there, let's create a new single type by clicking the "+ Create new single type" link in the left sidebar.

Let's give our content type a name of "Home", and before clicking "Continue", navigate to the "Advanced settings" tab. Once there, make sure to check the "Enable localisation for the Content-Type" checkbox. You need to do this for any content type you would like to be localised. Once you have done that, it's safe to click "Continue".

Adding fields

A content type can't hold any content if it doesn't add any fields, so the next step is to add some. We are going to keep it super simple and will add three fields.
Create a text field called "Title":

Click "+ Add another field". Then add a rich text field called "Body":

Click "+ Add another field", and finally let's add media field called "Image" and set its' type to "Single media" so we only need to upload one image.

Next, go to the "Advanced settings" tab.

Frequently when creating a localised site, you won't want all fields to be localised. By default, you will have to re-enter content for each field in the new language when you switch between locales.

In our case, we want the Image field to keep the same image across all languages.
Uncheck the "Enabled for localisation" checkbox.

Now we can click "Finish" to create our fields. Take a second to give yourself a pat on the back; you're one step closer to localisation euphoria.

Adding your locales

Next up, we need to add your desired locales in Strapi. The locales are basically the different languages you want your site to support.

You can get to the locale settings by going to Settings > Internationalisation: http://localhost:1337/admin/settings/internationalization in the Strapi admin.

Once you are there, you should see that you already have one locale, English. You can add another one by clicking the "Add locale" button in the top right.

Choose your desired language in the modal that appears and click the "Add locale" button. Just like that, your CMS is now multilingual! Add as many languages as you need.

Set content type permissions

We are going to need Nuxt to be able to access our Stapi API to pull in content. By default, Strapi makes any new content type private, so we will need to change that.

Go to Settings, and under the "Users & Permissions Plugin" heading, click "Roles".

Click on the "Public" role, scroll down to the permissions and tick the "find" checkbox under "Home"

Save your changes. This will make the GET [http://localhost:1337/home](http://localhost:1337/home) endpoint publicly accessible.

Add some content

We are done setting up Strapi, and now it's time to add some content. Click "Home" under the "Single Types" section of the admin sidebar and enter content for your default locale.

Once you are happy you have created a masterpiece, save and publish it.

Now it's time to get out your foreign language dictionary and enter content for your second locale. To change the current locale, use the dropdown switch found in the right sidebar. We fancied French next.

Make sure to save and publish again. Each locale gets published separately. Repeat for all your locales. Hopefully, none of you decided to add the world's 6500+ languages; otherwise, it might take you longer than expected to finish this tutorial!

Next up is Nuxt

Your time as a content editor has come to an end, and now you need to get into your favourite hacker pose and start coding.

First up is creating a new Nuxt site. In a new folder, use the terminal to run the following:

npx create-nuxt-app nuxt

Answer the questions via the CLI. In our case, we choose the following:

Language: JavaScript
Package manager: NPM
UI framework: TailwindCSS
Linter: ESLint
Rendering mode: Singe Page App
Deployment target: Static

Once that has done, cd into the new nuxt folder and start the dev server:

npm run dev

Your Nuxt site should now be running at http://localhost:3000/

Install Nuxt Strapi and i18n

Next, we need to install a few Nuxt modules. The Nuxt Strapi module will allow us to easily communicate with our Strapi API, and the Nuxt i18n module will enable us to add localisation.

Install both the modules:

npm i nuxt-i18n @nuxtjs/strapi

Once that is done, we need to add both modules to nuxt.config.js and configure them with options. First, let's register the modules.

// nuxt.config.js
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
  '@nuxtjs/strapi',
  'nuxt-i18n'
],

Next, we can configure the i18n module. Add the following to your nuxt.config.js:

i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
},

The above tells the i18n plugin that we will have three locales English, French and German.

Feel free to adjust those to whichever languages you set up earlier in Strapi. It's important to note the locale codes you use should match the ones used when setting up locales in Strapi.

You can also set the sites default locale.

Now we can move on to configuring the Strapi module. Add the following:

strapi: {
    entities: [
      { name: 'home', type: 'single' },
    ]
},

This tells the module that we have a content type called "home" and it's a single. This will allow us to retrieve it easily later.

Loading localised content from Strapi into Nuxt

Now it's time to load content from Strapi into Nuxt. In pages/index.vue replace the script section with the following:

<script>
export default {
  async asyncData ({ $strapi, i18n }) {
    const home = await $strapi.$home.find({ _locale: i18n.locale })
    return {
      home
    }
  }
}
</script>

To load in the data, we can use the asyncData hook that will be run at build time. The Nuxt i18n plugin adds the i18n object to the context object that is passed into the function. This allows us to get the current locale with i18n.locale.

The Nuxt Strapi plugin also injects itself into the asyncData context, so we can then make a request to our API to get the home content. The import part here is how we filter the request by locale to retrieve the correct language:

const home = await $strapi.$home.find({ _locale: i18n.locale })

All being well, the home content should now be available in your page component. Let's add it to the template. Replace the pages/index.vue template with the following:

 <div class="container flex flex-col items-center">
    <div class="flex flex-col items-center">
      <h1 class="mb-4 text-pink-700 font-bold">
        {{ home.Title }}
      </h1>
      <div class="mb-4 text-green-700">
        {{ home.Body }}
      </div>
            <!-- Usually you should store the Strapi host in an env var -->
      <img :src="`http://localhost:1337${home.Image.url}`" class="w-1/4 mb-6" alt="Featured Image">
    </div>
  </div>

There should be nothing that surprises you here; we just use standard Vue.js templating to output our page title, body and bind the image URL to the image src.

Hopefully, by this point, you can see the content you added appearing on your page.

<template>
  <nav>
    <ul class="flex">
      <li
        v-for="locale in availableLocales"
        :key="locale"
        class="py-4 px-4 text-xl font-bold"
      >
        <nuxt-link :to="switchLocalePath(locale)">
          {{ locale }}
        </nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  computed: {
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  }
}
</script>

Ok, let's break down what's happening here.
First, we get a list of the available locales in a computed function:

 computed: {
    availableLocales () {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  }

Next we loop over these in our template using a v-for and we add a nuxt-link to allow us to switch between each site. The switchLocalePath function is added by the Nuxt i18n module returns the current routes localised variants.

For example, we were on a page "/about" and we called the function like this switchLocalePath('fr') it would return "/fr/about".

See here:

<li
    v-for="locale in availableLocales"
    :key="locale"
    class="py-4 px-4 text-xl font-bold"
>
    <nuxt-link :to="switchLocalePath(locale)">
        {{ locale }}
    </nuxt-link>
</li>

And that's the locale switcher finished.

Now let's add it in to our page component:

<template>
  <div class="container flex flex-col items-center">
    <div class="flex flex-col items-center">
      <h1 class="mb-4 text-pink-700 font-bold">
        {{ home.Title }}
      </h1>
      <div class="mb-4 text-green-700">
        {{ home.Body }}
      </div>
      <img :src="`http://localhost:1337${home.Image.url}`" class="w-1/4 mb-6" alt="Featured Image">
      <LocaleSwitcher />
    </div>
  </div>
</template>

<script>
import LocaleSwitcher from '~/components/LocaleSwitcher.vue'
export default {
  components: {
    LocaleSwitcher
  },
  async asyncData ({ $strapi, i18n }) {
    const home = await $strapi.$home.find({ _locale: i18n.locale })
    return {
      home
    }
  }
}
</script>

You now have an easy way to switch between your locales!

That's a wrap

And that's it. You should now have a fantastic internationalised site powered by Strapi and Nuxt. We have only touched on the basics, but hopefully, it gives you a good idea of what's involved in building this sort of site.

We are super impressed with how easy the Strapi and Nuxt teams have made this, so big props to them!

As always, if you have any questions or like this post, let us know on Twitter: @pixelhopio.

If you would like to see more posts like this then subscribe to our site, we promise we won't spam you! You can sign up here https://www.pixelhop.io/writing/.

Be the Forest kickoff

Gemma Vincent — Sun, 10 May 2020 10:03:18 +0000

🌳 An API that plants trees

Today we are excited to kick off the first of our 7 side projects in 28 weeks. We talk about that here:

Master Plan - 7 Projects / 28 Weeks

Gemma Vincent ・ May 6 ・ 3 min read

#sideprojects #productivity #webdev #startup

Be the Forest, an API that plants trees! Inspired by sites like Ecosia (the search engine that plants trees) we thought it would be great to give developers a simple way to build similar experiences and add carbon offsetting to their digital products or services.

Got an online store? You could add the option to offset carbon emissions as part of your checkout.
Making a game? Plant a real tree for every tree digital someone plants in the game.
Teaching your children to save? Hack together a digital money bank that automatically plants a tree for every £1 they save.

Those are just some of the possibilities being able to plant trees using and API would enable and we know there will be many more we haven't thought about!

Sooooo, we have already set up a holding page here, where you can subscribe for more updates. We've even got a little logo already, if you fancy checking it out!

💡 How did the idea come about?

One Friday evening we were sat in the living room after having a couple of wines and watching a documentary about the world and what a mess it's in. With wildfires, global warming, deforestation, and so on and so forth. I just had an overwhelming sense of sadness and anger about what is going on.

We do our fair share for the environment, we've stopped eating meat and dairy, we try not to buy foods in plastic where possible, we shop locally and support our local refill shops like the lovely Harriets of Hove, all important things to us but it just didn't feel like enough.

Feeling helpless but wanting to help we got our flip chart out and started brainstorming ideas. Our imaginations went wild, or more my imagination went wild. Within about 5 minutes I had decided I was going to pack my bags and head over to Australia to help the Fireman to put out the wildfires and save all the animals. Zef bought me back to reality and said that wasn't realistic. He was right, as he so often is!

Back to the drawing board, I suppose. Zef said we should use the skills we have (eg. tech) to come up with something to help, and that's where this idea blossomed from.
We both use the search engine Ecosia where ad revenue from your searches plants trees and we thought wouldn't it be cool if it was easy for people to build similar experiences?!

👩‍🏫 How will it work?

Our initial idea is quite simple and may expand in the future, but for the moment this is roughly how we see it working.

Users. for example online shop keepers, signup up to our API and add billing details.
When they want to plant a tree they use our API and will be billed based on the number of trees they want to plant. For example when a customer purchase they can also have the option to add on planting a tree to offset the impact of delivery.
We pool everyone's contributions into a pot, and at the end of each month, we donate to one of the leading tree-planting charities on behalf of everyone.
We create monthly reports providing full transparency on how the money donated has been spent and distributed.
Users will be able to use the API to see how their contributions have helped and get stats for the estimated number of trees they have planted etc.

🤝 Trust is earned

We know the key to a service like this is transparency and trust. People need to be sure that the money they provide is actually used for planting trees, and not for funding flotilla holidays in the Mediterranean!

The monthly reports that show how we have spent the money will be crucial to this and will hopefully give everyone some peace of mind.

On top of that, we do not intend to make a profit from this service. Our aim is to give as big of a proportion of the money donated as possible directly to the tree planters. We will need to use a small proportion of the money to cover expenses, and while we can't say for certain how much that will be yet, we will be completely transparent about this in the monthly reports.

💻 How are we going to build it?

Technically this project is relatively simple, but there will be four things we need to build for it to be a success.

🔌 1) API

Of course, the API is core to the whole idea. Our goal is to make it as simple and easy to use as possible. We will be using NodeJS because we are most productive when writing JavaScript.

📚 2) API Documentation Site

An API is useless if it doesn't have good documentation. We will need comprehensive documentation that explains how to use the API with clear examples. We will use Vuepress for this as it makes creating docs with markdown super simple.

📈 3) Customer Portal

This is where users will sign up, log in, manage billing, get their API credentials, and see their stats. To build this we will be using Vue.js and Tailwind UI to give us a bit of a head start.

💚4) Marketing Site

This will explain who we are, what we are doing and trying to achieve and how we plan to go about it. It's important that there's a lot of information here and that we are totally transparent so people trust us. We will have stats for all the donations and expenses leaving no stone unturned.

We will use Gridsome and Tailwind UI to build the marketing site.

🧱 Time to get building!

So there you have it! We have planned everything out, written our kick-off blog post, created the project in Clubhouse, now it's time to get building! We will be back in a week to update you all on how it's going, the hurdles we have hit, the ones we've leapt over and just give a general update on where we are at.

If anyone has any comments or feedback, we would love to hear from you, so don't be shy!

Master Plan - 7 Projects / 28 Weeks

Gemma Vincent — Wed, 06 May 2020 16:44:05 +0000

👋 Hello!

My name is Gemma and my partner is Jozef. We are both web developers with a passion for making all kinds of things. We live in Hove with our two little rabbits. We have recently started our own development studio, Pixelhop.

Zef and I are constantly talking about different ideas and "things" we want to build and projects we want to start. Over the years we have started countless side projects but have finished only a few. It's hard to keep side project momentum around busy lifestyles and full-time jobs.

We have decided enough is enough. We need to plan everything out properly, write down our goals, create a real roadmap, and keep ourselves accountable. So that is exactly what we've done!

We've come up with personal, business and work goals, as well as a list of projects we have been meaning to start forever. We have a MASTER PLAN!

Building in the open

To help keep us accountable we have decided to share our plan publicly. If we don't stick to it everyone can hold us accountable 😬

Here is our project timetable for the rest of the year. We have given each project code names so we don't ruin all the surprises to come.

But we never finish...

One of the biggest problems our side projects have faced in the past is finishing them! Zef and I both have busy lives and have to work on our side projects around our "real" jobs.

All too often we have been overly ambitious and before we know it we have been working on something for six months, and we are still no closer to releasing it. At this point, we wouldn't have validation whether the project was a good enough idea to be worth spending that amount of time working on, and it's easy to get bored of a project when working on it for so long with no end in sight.

To hopefully solve this problem we have decided to limit each project to a strict 4-week timeframe. This should help us keep focused and not get too carried away with creeping features and endless tweaks. At the end of the 4 weeks our goal is to have something releasable, however MVP it might be.

It's going to be hard, but I think the limitation will help us to get something out the door.

A template for success

Given the short timeframes for each project, we have planned at a process that we will follow for every project, hopefully becoming more efficient as we go along. The steps in the process will act as waypoints guiding us to (hopefully) launching a decent MVP at the end of the 4 weeks.

🏁Kick-off

To kick-off we will do the following:

Kick-off post - This will essentially act as our brief and explain the goals of the project and what we want to produce.
Project landing page - We will create a basic project landing page where people can subscribe for updates. We have bought Tailwind UI to help speed this up.
Set up Clubhouse - We ❤️ Clubhouse as our project management tool. We will scope out and add as many tasks as possible to the project so we can get a sense of how we are doing over the coming 4 weeks.

🤓Mid Project

The day to day of working on the different projects will vary, but we plan to post a weekly status update outlining our current progress and what is left to do. Hopefully, this will be an interesting read to anyone following along and again it should help us to stay accountable and on track.

🚀Launch

At the end of the 4-weeks, our goal is to have something launch-able. What does that mean exactly? Well ideally it would mean we would be launching a fully-fledged product, but if we are being realistic I think we will have achieved our goal if we have an MVP launched that is ready for Beta testers. Again this will be slightly dependant on the specific project.

Another way of putting it, I think we will have succeeded if it the end of the four weeks there are users other than us using our product 😀

7 Products / 28 weeks

By the end of this process, we hope to have launched 7 products within 28 weeks of sprint time. It's a lofty goal we know, but we are excited about trying to accomplish it and can't wait to see the results.

The plan is going to allow us to validate our ideas quickly, we will learn so much along the way, and when we come out the other side we will have 7 great projects we can add to our Pixelhop portfolio.