Multimedia Subscription Blog

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.

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.

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.

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

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.

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.

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.