Create CryptoConscious App

[elicharlese]

CryptoConcious template

Crypto teaching, as well as a Zapper like profile for managing and bridging opportunities (with a debit card access to metamask funds)

import React from 'react';
import Navbar from './Navbar';

const LandingPage = () => {
  return (
    <div>
      <Navbar />
      <div className="hero-section">
        <h1>Cryptocurrency University</h1>
        <p>Learn everything you need to know about cryptocurrency and blockchain technology.</p>
        <a href="#courses" className="button">View Courses</a>
      </div>
      <div className="courses-section" id="courses">
        <h2>Our Courses</h2>
        <div className="course-card">
          <img src="course-1.jpg" alt="Course 1" />
          <h3>Crypto Investing 101</h3>
          <p>Learn the basics of investing in cryptocurrency.</p>
          <a href="#" className="button">Enroll Now</a>
        </div>
        <div className="course-card">
          <img src="course-2.jpg" alt="Course 2" />
          <h3>Blockchain Development</h3>
          <p>Learn how to develop blockchain applications.</p>
          <a href="#" className="button">Enroll Now</a>
        </div>
        <div className="course-card">
          <img src="course-3.jpg" alt="Course 3" />
          <h3>Crypto Trading Strategies</h3>
          <p>Learn advanced trading strategies for cryptocurrency.</p>
          <a href="#" className="button">Enroll Now</a>
        </div>
      </div>
      <div className="cta-section">
        <h2>Ready to Start Learning?</h2>
        <p>Sign up for our newsletter and receive a free ebook on cryptocurrency.</p>
        <form>
          <input type="email" placeholder="Enter your email" />
          <button type="submit" className="button">Subscribe</button>
        </form>
      </div>
      <div className="footer-section">
        <p>© 2023 Cryptocurrency University</p>
      </div>
    </div>
  );
};

export default LandingPage;

SST, Next.js and AWS

Install the Serverless Stack Toolkit (SST) globally using the npm package manager:

npm install -g serverless-stack

Create a new SST app using the sst-app command:

sst-app create my-app

This will create a new directory called my-app with a basic SST app structure.

Initialize a Next.js project in the my-app directory:

cd my-app
npx create-next-app

This will create a new Next.js app inside the my-app directory.

Install the @serverless-stack/resources package as a dev dependency in the my-app directory:

npm install --save-dev @serverless-stack/resources

This package provides a set of reusable resources that we can use in our app.

Open the sst.json file in the my-app directory and update it with the following:

{
  "app": "my-app",
  "buildCommand": "next build",
  "stacks": [
    {
      "name": "frontend",
      "env": {
        "REGION": "us-east-1"
      },
      "resources": [
        {
          "type": "@serverless-stack/resources/s3-static-site",
          "params": {
            "buildOutput": "out",
            "indexDocument": "index.html",
            "errorDocument": "index.html"
          }
        }
      ],
      "hooks": {
        "build": "next build && next export"
      }
    }
  ]
}

This defines a stack called "frontend" that creates an S3 bucket for hosting our static files. We've also specified a build command that will run next build and next export to build and export our Next.js app as static files.

Build and deploy the app using the deploy command:

sst deploy

This will build and deploy the app to AWS. Once the deployment is complete, you should see a URL where you can access your app.

That's it! You now have a serverless Next.js app running on AWS.