PRODUCTION

What is "MT Next Boiler"?

"MT Next Boiler" stands for "Minute.tech's Next.js (JavaScript and React.js framework) Boilerplate (like a template). Doug current uses this to start up his web app projects for custom builds and is current a private repository, but if you would like access to poke around, just ask! This template comes packed with styles, dark/light mode switching, analytics, homepage slider, user auth, contact form, subscriber form, blog, and an admin dashboard to manage and search all that data! With just a few edits of the structures.ts and constants.ts files, the user can store any data structures they desire for their use case or change any front end designs. Once you have the app up and running, you can make further customizations to the build like any other Next.js app build!

App Accounts

These accounts may already be provided by your company, so check first!

  • GitHub - GitHub is a Microsoft company that safely stores and syncs our code base to the cloud and is an industry standard. I usually just used my personal Github account for this.
  • Vercel - Vercel is an app platform providing services for apps like databasing, web hosting, file storage and more.
  • SendGrid - SendGrid is a Twilio company that is a developer friendly, reliable email sending and management platform.
  • Tiny - Tiny MCE is a rich text editor for the custom pages and notes and more! This is free for now, but some form features like showing custom fonts may cost money.
  • Cloudflare - Cloudflare is a platform for cloud hosting, DNS, analytics, bot protections, web workers, domain registrar, and more. This is not needed for this app to work!

Computer Installs

  • Node.js - Used for running npm mainly, which is our Javascript package manager. Install the "Current" version for your OS.
  • Vercel CLI - Used to interact with the Vercel platform, deploy with the terminal command vercel.
  • Github Desktop - You can also use the CLI, but the Desktop version is much easier on my feeble brain.
  • git - This often is a question prompt when installing Node.js I believe to also install "git", so you may already have it installed from this, if not here's the link.
  • Visual Studio Code Insiders - This is just my personal preference IDE to edit code files and have an inline terminal window on, but there are many other IDEs. I use the "Insiders" VSCode because you can link a Github profile to your VSCode profile and save preferences. See bottom of README for Doug's favorite VSCode Extensions!
  • Dotenv CLI - Just run npm install -g dotenv-cli in the terminal. Allows us to use multiple env files for different environments like prod and dev.

Libraries

  • react - Component organization and front end rendering.
  • next - Next.js is a server-side generation, React framework with server and client side code in one app.
  • vercel/blob - File storage as "blobs".
  • vercel/postgres - Vercel's Postgres integration library using their servers.
  • prisma - ORM for easily calling Postgres methods.
  • @prisma/client - Client side usage of Prisma.
  • next-auth - User authentication.
  • react-hook-form - Breezy form building.
  • @hookform/resolvers - Part of the react-hook-form library.
  • styled-components - JavaScript CSS styling.
  • polished - Supplementary library to styled-components that provides utility functions to manipulate CSS.
  • lucide-react - Quickly and easily use popular icons.
  • lodash - Helper functions, primarily used for deep cloning objects.
  • @sendgrid/mail - Mail sending and templating.
  • @tinymce/tinymce-react - Rich text editor.
  • sonner - Notification alerts.
  • bcrypt - Encrypting and decrypting passwords.
  • client-only - Explicitly forcing a page to be client only for Next.js 13 app structure.
  • isomorphic-dompurify - Only needed for cleaning Rich text field string for XSS, injection, etc vulnerabilities for user inputted HTML.
  • react-datetime-picker - Datetime react component.
  • zod - Input validation.
  • Many more libraries are included in the project for various functions from form handling to styling. Refer to the package.json file for a full list.

* Minute.tech's Next.js Boilerplate is a project that was originally bootstrapped with create-next-app.

Contact Form