A Course Platform template built using React and Tailwind CSS

Last update: May 6, 2022

Course Platform

CleanShot 2021-10-26 at 17 32 13@2x

👉 I go over the details of why and how I built this demo during my talk, presented at Next.js conf 2021.

⚠️ This repo + README are a work in progress. I plan to maintain this example and add more features over time. If you see any room for improvement, feel free to submit a PR 😄

Live demo: https://epic-course-platform.vercel.app/

Tech Stack

Course Platform template built using the following tools:

  • Next.js (fullstack React framework)
  • next-mdx-remote (Add support for MDX when using Next.js)
  • next-auth (authentication for Next.js apps)
  • Prisma (Next-gen ORM for Node.js & TypeScript)
  • PlanetScale (Serverless MySQL Database)
  • TailwindCSS (Styling)
  • Vercel (Deployment)
  • SendGrid (Sending emails)
  • TypeScript

Why this stack

This stack is awesome for the following reasons:

  • Make fewer errors when using TypeScript and you also get zer-cost type-safe database access when using Prisma
  • All tools offer fantastic developer experience
  • All of the tools have great developer communities
  • All of these tools allow you to easily scale (Vercel + PlanetScale)

Setting up the project

To set up the project locally, run the following commands:

git clone https://github.com/m-abdelwahab/course-platform.git

cd course-platform

npm install

npm run dev

This will install the project and start a local development server at localhost:3000.

❗️ Make sure your rename the .env.example to .env

Setting up the database

To set up a database on PlanetScale, check out this detailed guide, which goes over how to work with PlanetScale and Prisma.

Setting up an email sending service

I'm using SendGrid. Hee's what you need to do to get started:

First, create an account and setup a sender email for testing your integration.

creae account on sendgrid

After that, go to the Integration Guide in the Email API dropdown on the left sidebar. Next, pick SMTP relay

Picking SMTP as the integration

Finally, create an API key and add the following variables to your .env file

EMAIL_SERVER_USER= 'apikey'
EMAIL_SERVER_PASSWORD= 'YOUR_PASSWORD'
EMAIL_SERVER_HOST= 'smtp.sendgrid.net'
EMAIL_SERVER_PORT= '587'
EMAIL_FROM = '[email protected]'

CleanShot 2021-10-26 at 12 07 05@2x

Setting up Stripe Checkout

Creating an account at stripe.com and login into your dashboard. Next, go to the products tab and add a product

Add product

After that, go to the product details page by clicking on the product from the product list and grab the API ID from the pricing section and include it in the /api/checkout file

pick PriceId from product settings

Finally, to add support for webhooks, go to the "Developers tab" and click "add endpoint".

Webhooks

You can test in a local environment using Stripe's CLI by forwarding events to your webhooks and triggering a charge.succeeded event.

Setting up a webhook endpoint

stripe listen --forward-to localhost:3000/api/webhook

stripe trigger charge.succeeded

If you followed all the previous steps correctly, you should see a newly added user in your database, while listening to the charge.succeeded event.

For production, you need to set the endpoint URL to domain-of-your-deployment/api/webhook and select the charge.succeeded event. Finally, you need to grab the signing secret, which will be set to the STRIPE_WEBHOOK_SECRET when deploying to Vercel.

Webhook secret

Credits

GitHub

https://github.com/m-abdelwahab/course-platform
You might also like...

An Instagram clone made using Tailwind CSS, Firebase, and React

Instagram Clone An Instagram clone made using React, Firebase, Tailwind, and more. Usage Clone/Download the repo Run yarn install to install all the d

Dec 28, 2021

Giggle ⚡ (Google Search Clone) using React and Tailwind CSS

Search for up-to-date results, news, images,and videos.Built a fully responsive modern UI with integrated Dark mode using React and Tailwind CSS. Implemented Dynamic Routing using react-router-dom. Used useDebounce hook for debouncing fast changing search value. Deployed on Netlify.

Nov 21, 2021

Building Instagram from Scratch Using React, Tailwind CSS, Firebase

Building Instagram from Scratch Using React, Tailwind CSS, Firebase

Building Instagram from Scratch Using React, Tailwind CSS, Firebase 💰 Extended paid version he

May 15, 2022

NFT Marketplace on Ethereum Blockchain based on course. Made in React/Next JS, Solidity and Typescript.

This is a Next.js project. Full process and video lectures how to create the application can be found here: NFT Marketplace in React, Typescript & Sol

May 4, 2022

A React Finance Application, made during the Ignite React Course, from Rocketseat

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Mar 1, 2022

Task tracking application from the React crash course

React Crash Course 2021 (Task Tracker App) This is the project from the YouTube crash course. It includes the react ui as well as JSON-server for our

May 7, 2022

React Course Demo App

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Mar 24, 2022

Prometheus API End Challenge Dev FullStack Course

Prometheus API End Challenge Dev FullStack Course

Prometheus API Desafio Final do curso de Dev FullStack @Gama Academy / @Cogna Sobre o projeto O PROMETHEUS é uma aplicação web desenvolvida para capta

Nov 26, 2021

Learn to build Udemy Web Clone with ReactJS. ... This is a front to back `Udemy Web Clone` course for absolutely everybody.

Udemy Clone React Learn to build Udemy Web Clone with ReactJS. ... This is a front to back Udemy Web Clone course for absolutely everybody. What is th

Feb 20, 2022
Comments
  • 1. Setup authorization behind private lessons

    • CSR without data for private lesson page
    • SWR for client side fetching
    • loading skeleton for the lesson
    • /api/lessons/[lesson] for authorizing users and sending private lesson data
    Reviewed by YassinEldeeb at 2021-10-31 01:43
  • 2. next-auth supported node versions

    Add warning for the only supported nodejs versions in next-auth cause otherwise when you run yarn install it'll install older version which don't have next-auth/react and when you try to install it manually you'll get this error

    Screenshot 2021-10-30 173952

    Reviewed by YassinEldeeb at 2021-10-30 15:41
  • 3. Adding Prettier Config

    Prettier config file is needed, cause everyone prettier configuration is different and this would miss up the code formatting styles and makes it harder for code reviews.

    so It's just a simple .prettierrc file that contains the following config as you used throughout this project: 1- Single Quote 2- TrailingComma 3- add semicolon

    Reviewed by YassinEldeeb at 2021-10-30 14:53
Token-sale-platform - A Token Sale Platform For EOS,Built With React.js
Token-sale-platform - A Token Sale Platform For EOS,Built With React.js

EOS Token Sale Platform A decentralized Token Sale platform, which allows users

Apr 8, 2022
Quoted - A Quote Generator Built Using ReactJS And Tailwind CSS
Quoted - A Quote Generator Built Using ReactJS And Tailwind CSS

Quoted Solution for a challenge from Devchallenges.io. Demo | Solution | Challen

Feb 3, 2022
Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations
Peer-Learning-Platform - A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations

A platform designed specifically as an additional layer on top of Google Classroom for students to gain the best out of online evaluations. Facilitates students to look at solutions from the perspective of their peers. A platform that goes beyond learning and instils ethics and moral integrity within the community.

Apr 2, 2022
Application built following the Udemy course "React Front To Back 2022"
Application built following the Udemy course

Github finder app This project was built based on "React Front To Back 2022" course on Udemy. General information The "Github finder" application uses

Feb 19, 2022
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.
TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

May 14, 2022
Application of a finance manager developed in Rocketseat's Ignite ReactJS course using ReactJS and TypeScript
Application of a finance manager developed in Rocketseat's Ignite ReactJS course using ReactJS and TypeScript

dtmoney Application of a finance manager developed in Rocketseat's Ignite ReactJ

Jan 24, 2022
A basic to-do application built with React and Tailwind CSS.
A basic to-do application built with React and Tailwind CSS.

I'm currently integrating a backend REST API built with Express and MongoDB to handle user data, as well as implementing user authentication with auth

Dec 2, 2021
A simple quiz app built with React and Tailwind CSS.
A simple quiz app built with React and Tailwind CSS.

Quizzify An simple quiz app with 5-question quizzes on different topics, built with React and Tailwind CSS. See it live here. Screenshots Light mode:

Apr 17, 2022
Dreamland App Built With React And Tailwind CSS

Dreamland (buy you dream apartment) This is a full stack project. Users and admin are separated by role.

Jan 7, 2022
React-wordle - A fun Wordle clone made using React, Typescript, and Tailwind CSS

React Wordle This is a clone project of the popular word guessing game we all kn

May 10, 2022