Building an app to help kids improve their Mental Math, using AWS Amplify & Next.js

Building an app to help kids improve their Mental Math, using AWS Amplify & Next.js

A Figma to Code guide for AWS Amplify x Hashnode Hackathon

Joel's photo
Joel
ยทOct 1, 2022ยท

4 min read

Play this article

Table of contents

Introduction

ezgif.com-gif-maker (1).gif

Rocket Maths App Github Repo

Problem

Although anyone can use the app, the app is primarily intended for Homeschooling parents and primary school math teachers who want to help their kids with math.

At its core the problem is that - worksheets are boring. But what if there was a way to gamify these worksheets to make it fun for kids using the app while also make it easy for parents and teachers to organise all the lesson plans in one place.

Solution

Rocket Maths app gamifies math practice for kids. And makes it effortless for parents and teachers to generate new worksheets.

ezgif.com-gif-maker (1).gif

The Reward System

The ultimate social status is winning more max combos than your friends

Wether it's in a friendly classroom competition, or tying to impress your friends. The social status of having won more Max Combos than your friends is the ultimate driving force for kids to improve their math skills.

ezgif.com-gif-maker (2).gif

The reward system makes it progressively harder to win max combos.

The combos act as a micro economy that can be traded for exclusive collectables and the ultimate bragging rights.

๐Ÿง‘โ€๐Ÿ’ป Tech Stack

The main game is designed using Chakra UI because they just work and animate so beautifully and have a ton of custom components making it super easy to customise your designs

Screenshot 2022-10-01 at 7.15.39 AM.png

Screenshot 2022-10-01 at 7.17.13 AM.png

The Navigational pages like the Level Selector page is built using Amplify Studio and it makes managing the levels or adding new levels on the fly really easy and manageable

Screenshot 2022-10-01 at 7.12.23 AM.png

Screenshot 2022-10-01 at 7.12.32 AM.png

Screenshot 2022-10-01 at 7.12.53 AM.png

The whole web app is built on Next.js that keeps the app fast and snappy!

Figma to AWS Amplify Studio

Duplicating the Figma File

Screenshot 2022-09-21 at 1.59.11 PM.png

Installing the theme editor

Screenshot 2022-09-21 at 2.00.03 PM.png

Customising the theme

Screenshot 2022-09-21 at 2.02.40 PM.png

Building components in Figma

Screenshot 2022-09-21 at 2.11.18 PM.png

Final Results

Screenshot 2022-09-21 at 2.12.33 PM.png

Setting up Amplify Studio

Create a new app

Screenshot 2022-09-21 at 3.38.12 PM.png

Launch Studio

Screenshot 2022-09-21 at 3.41.10 PM.png

Building Data Models

Planning your data models

Screenshot 2022-10-01 at 5.13.46 AM.png

Deploying data model

Screenshot 2022-09-21 at 3.43.44 PM.png

Adding the content

Screenshot 2022-09-21 at 3.43.45 PM.png

Editing the content

Screenshot 2022-09-21 at 3.43.46 PM.png

Connecting to Amplify studio to Figma

Screenshot 2022-09-21 at 3.52.41 PM.png

Syncing Amplify Studio with Figma

Screenshot 2022-09-21 at 3.52.51 PM.png

Accept changes

Screenshot 2022-09-21 at 3.53.42 PM.png

Binding the UI to the Data Model

UI Library

Screenshot 2022-10-01 at 5.24.07 AM.png

Configure Component

Screenshot 2022-10-01 at 5.25.34 AM.png

Set Props

Screenshot 2022-10-01 at 5.27.06 AM.png

Adding Conditionals

Screenshot 2022-10-01 at 5.29.18 AM.png

Building Collections

Create collection of a component

Screenshot 2022-10-01 at 5.32.50 AM.png

Customise layout

Screenshot 2022-10-01 at 5.34.41 AM.png

Adding filters and orders

Screenshot 2022-10-01 at 5.35.56 AM.png

Set props as "a"

Screenshot 2022-10-01 at 5.38.04 AM.png

Setting up Next.js and Amplify

npm create-next-app your-app-name

cd into the project folder

Screenshot 2022-10-01 at 5.48.24 AM.png

npm install -g @aws-amplify/cli
npm install aws-amplify @aws-amplify/ui-react

Setting up the Theme

Installing fonts

Screenshot 2022-09-22 at 4.21.20 PM.png

Screenshot 2022-09-22 at 4.21.47 PM.png

Setting up the theme

  • SSR True
  • studioTheme from ui-components

pages/_app.js

import "../styles/globals.css";

import { ChakraProvider } from "@chakra-ui/react";

import Amplify from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import { AmplifyProvider } from "@aws-amplify/ui-react";
import awsconfig from "../src/aws-exports";
import { studioTheme } from "../src/ui-components";
Amplify.configure({ ...awsconfig, ssr: true });

function MyApp({ Component, pageProps }) {
  return (
    <AmplifyProvider theme={studioTheme}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </AmplifyProvider>
  );
}

export default MyApp;

Importing components to React

Amplify Pull

Screenshot 2022-09-22 at 5.48.17 PM.png

Responsive collections

Screenshot 2022-10-01 at 6.02.29 AM.png

<HomeCardCollection justifyContent={"center"} wrap={"wrap"} />

Routing in AWS Amplify

ezgif.com-gif-maker.gif

import { useRouter } from "next/router";

const router = useRouter();

<HomeCardCollection
            justifyContent={"center"}
            wrap={"wrap"}
            overrideItems={({ item, index }) => ({
              overrides: {
                "Card Button": {
                  onClick: () => {
                    router.push(`/${item.linkTo}`);
                  },
                },
              },
            })}
          />

Using SSR in AWS Amplify

Screenshot 2022-10-01 at 6.36.36 AM.png

import { DataStore } from "@aws-amplify/datastore";
import { Levels } from "../../src/models";
import { withSSRContext } from "aws-amplify";

export async function getStaticProps() {
  const models = await DataStore.query(Levels);
  const data = JSON.parse(JSON.stringify(models));
  return {
    props: {
      data,
    },
  };
}

export async function getStaticPaths(req) {
  const { DataStore } = withSSRContext(req);
  const models = await DataStore.query(Levels);
  const paths = models.map((item) => ({ params: { id: `${item.linkTo}` } }));
  return {
    paths,
    fallback: false, // can also be true or 'blocking'
  };
}

Did you find this article valuable?

Support Joel by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
ย 
Share this