1. create and deploy app2. build blog pages3. add user management4. create user page5. build admin page6. add payment7. display static tweets
We are working hard 👷🏼‍♂️ 🏗 🚜 to continually add more.
Please email if you have requests or questions 🙋.
Contact 👽 🛸 info below.
📬

Multimedia Subscription Blog

Want hands-on practice building a fullstack web application that results in a product? One that is ready for users and payments and built with SEO in mind?

We had those problems too. We solved it with this course.

blog-example

Build your very own multimedia subscription blog and gain skills to add more features with code and to promote yourself as a professional developer to help land your dream job.

blog-example-1

Tech stack.

Frontend. NextJS pages, React, ES6, HTML, CSS
Server. NextJS routes
Cloud. MongoDB, Google login
Payments. Stripe

Features.

Stripe subscription payments and webhooks
Pages and Routes for posts, user profile, admin, and more
User Management MongoDB database, and Google login
Forms built to scale
SEO features like statically rendered table of contents and video
Social Media for cross-marketing and additional content for SEO
More on the way

When you finish building it, you have a complete project that you can monetize.

Users can sign in using Google login, subscribe with Stripe, view content containing videos, images, and text, and interact with additional functionality in your application. As an admin, you can manage users, edit user roles, build content, and perform other admin tasks.

blog-example-2

Accelerate your journey to become an independent and efficient programmer by practicing important techniques, writing code flows and logic, learning about syntax and architecture, and more.

The blog is highly customizable and can easily be incorporated into any web project. Get started today and make your blog part of your product.

Buy It

Want the product without having to build it? Contact us. We know a guy who can help.

The site is built using the lightning-fast NextJS framework.

nextjs-performance

Compared to a Wordpress site built by professional SEO experts, the NextJS application performs nearly twice as good as the Wordpress site.

wordpress-performance

Here is the WordPress site.

Build It

Tired of clunky drag-and-drop blogging editors and slow websites? Want freedom to add custom functionality without using plug-ins and themes?

Build your own lightning-fast multimedia subscription blog.

1. create and deploy app

Goals. Build the foundation for your project environment, architecture, and topic.

Setup your developer environments so that it is easy and fast to develop and push live to production. Configure VS Code, git, GitHub, Vercel, and your DNS provider.

Add the client-side and server-side architecture and boilerplate code using the NextJS quickstart.

nextjs-quickstart

Make simple but impactful architecture, layout, and style modifications. For example.

  • Create category subfolders in the content folder
  • Write functions to display posts organized by category on the hompage.
  • Create NextJS pages, routes, static functions, and more

Use developer tools like the terminal and console, see example development and code flow, and practice the basics of git, GitHub, and the command-line.

terminal-vs-code-nextjs

Build a responsive navbar, integrate Google login, and publish your application to a custom domain with Google Analytics.

google-login-authentication

Start thinking about a niche to target with your features and content. Test your website's performance to make sure it is lightning fast and optimized for SEO from the start.

Get started below.

1. Pick a Niche
2. Create Folder and Repo
3. Build NextJS Quickstart
4. Create Categories
5. Push To Production
6. Create Navbar
7. Setup User Sign In
8. Deploy Domain With Analytics
9. Share Link

2. build blog pages

Goals. Build client-side pages and functionality for displaying all posts, categories, and individual posts.

Add features intended to give an SEO boost to the application, like several statically rendered tables of contents, and configure your application to easily embed videos in your posts.

In the process, write simple algorithms for retrieving file contents and parsing html and markdown data.

blog-example

Make the table of contents look good in mobile with a hamburger menu that toggles it open and closed in small screen sizes.

hamburger-menu hamburger-menu

Work with React state and life cycle methods, objects and arrays, string concatentation, conditional statements, built-in JavaScript methods, and more.

Write static and dynamic routes, work with getStaticPaths and getStaticProps, and write function definitions using JavaScript. Continue practicing a good git workflow using branches to save your code without pushing to production until you are ready.

getstaticprops-nextjs

Begin gradually adding content through filenames, headings, and sentences. Work on features that are a complicated and fun mashup of NextJS, React, JavaScript, HTML, and CSS.

1. Create Development Branch
2. Build Static Posts
3. Build Dynamic Categories
4. Build Dynamic Post
5. Create Article Table Of Contents
6. Create Blog Table Of Contents
7. Make Mobile TOC
8. Add Videos To Posts

3. add user management

Goals. Build the architecture for a global state using React context so that user information is accessible on all your pages. Add a MongoDB connection so that you can store and retrieve user information.

mongodb-example-cloud-database

Create user authentication architecture and flows. When a user signs in for the first time, store the user's Google information and other relevant user data in MongoDB.

On subsequent sign ins, retrieve and update the user information in the database.

When a user signs in, use the Google email to retrieve user data from MongoDB and save it in the global context in your application while the user is signed in.

Display the user information in various parts of the app, like the navbar and user profile page.

google-login-navbar

Work with Promises, write more function definitions, practice the move-the-console method, see examples of good naming, add conditional statements to your code, and more.

1. Create Global State
2. Prepare User Code Flow
3. Create MongoDB Account
4. Connect NextJS to MongoDB
5. Send User to MongoDB
6. Respond With MongoDB User Data
7. Add Sign Out
8. Add Email Capabilities
9. Add Content

4. create user page

Goals. Build a private user profile page that displays the signed-in user's information.

Restrict the page so that only the user can see their information and not that of other users. The page also offers the ability to edit some user information.

user-profile-example

Create architecture and flows for the user profile page, write reusable code, and set up a form that makes it easy to add more inputs and update the database.

Plus, protect the client and server from unauthorized acccess.

Practice working with fullstack code flows, callback functions, the event object, state and lifecycle methods, conditional statements, client pages, server routes, HTTP requests, and updating MongoDB data.

handle-save-clicked

update-user-profile

While building these features, you work with the NextJS router to redirect users based on if they are signed out

1. Create Profile Page
2. Display User Info
3. Add Loader
4. Redirect Logged Out
5. Add Birthday Input
6. Send Birthday To Server
7. Send Updates To DB
8. Update Client State
9. Update Display
10. Add Favorite Category
11. Update Navbar
12. Revise Existing Content

5. build admin page

Goals. Build a private admin page accessible only to users who have the admin role. The page displays a list of all the users from MongoDB.

admin-dashboard-nextjs

Admin users can edit user roles and view when each user last signed in.

The code setup makes it easy to add more editable features in the future by reusing code you already wrote and mimicking flows you create.

handle-role-changed

Gain repetition with important concepts covered in previous chapters but in a slightly different content.

Modify the architecture, code, and approach from the profile page to make it suitable for admin purposes.

admin-example

Despite the adjustments, like in the previous chapter, you build the fullstack flow for an editable input, work with the router to redirect users based on authorization and access status, and write client pages, build server routes, and send HTTP requests.

1. Create Admin Page
2. Request Users From Server
3. Get Users From Database
4. Display Users
5. Make Role Editable
6. Update Role In MongoDB
7. Display Updated Role
8. Create Role-Based Content
9. Add More Content

6. add payment

Goals. Integrate Stripe subscription payments into your application by creating the architecture, code, and flows for a simple yet complete full purchase cycle.

Add a Stripe checkout session to your appliction so that users can subscribe to products in your Stripe account. It is a smooth and seamless user experience.

stripe-checkout-example

Implement a Stripe manage subscription portal where users can manage their subscription.

stripe-manage-checkout

Use Stripe webhooks to update the database based on user subscription status so that you can control access to content and keep your application up to date with Stripe customer status.

The setup makes it easy to test and add more Stripe payment features in the future.

stripe

Get experience with sophisticated and in-demand third-party software packages like Stripe. Work with redirect urls, npm packages, API keys, and get repetition with concepts from previous chapters.

Implement webhooks and write code flows that involve functionality outside of your project, and experience how working as a developer is so much more than just writing code.

1. Stripe Setup
2. Create Checkout Page
3. Add Subscribe Button
4. Implement Checkout Session
5. Update Database With Stripe Webhooks
6. Get Stripe Customer
7. Add Manage Subscription Button
8. Implement Stripe Customer Portal
9. Go Live With Stripe
10. Revise Existing Content

7. display static tweets

Goals. Display Tweets within your application to add cross-marketing capabilities and additional content to your pages.

Show Tweets from one or more Twitter handles relevant to your topic. Each time a handle Tweets something, the Tweet appears on your page.

static-tweet-example

Use static rendering to load the Tweets at build time and then statically regenerate the page each time one of the Twitter handles Tweets so that when a user visits your page, it show all Tweets without you having to rebuild.

static-tweets-regenerate

The Twitter API is a very sophisticated API that is great for adding utility to your application and also for learning about engineering.

After becoming comfortable, using other APIs for utility - like Google APIs for instance - becomes much easier.

Work with sequential HTTP requests, using Promise.all to simultaneously handle multiple Promises, and documentation that is really good but complicated at first.

Get repetition working with fullstack code flows and other important concepts from previous chapters.

1. Setup Twitter App
2. Request Users By Handle
3. Request Tweets
4. Static Regeneration For Tweets
5. Tweet Schedule