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.
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.
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.
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.
Compared to a Wordpress site built by professional SEO experts, the NextJS application performs nearly twice as good as the Wordpress site.
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.
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.
Build a responsive navbar, integrate Google login, and publish your application to a custom domain with Google Analytics.
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.
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.
Make the table of contents look good in mobile with a hamburger menu that toggles it open and closed in small screen sizes.
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.
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.
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.
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.
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.
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.
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.
While building these features, you work with the NextJS router to redirect users based on if they are signed out
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 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.
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.
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.
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.
Implement a Stripe manage subscription portal where users can manage their subscription.
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.
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.
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.
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.
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.