TEAM 2137 Web App Template

Template Components & Setup Tutorials

Intro to Foundation Dev App

This is a tutorial for the Foundation Dev App Base. It will cover the basics of setting up the app, and how to use the different components and libraries that are included in the app.

  • Nodejs
  • NEXTjs (React Framework)
  • Typescript (Programming Language)
  • Tailwind CSS (Styling)
  • HTML (Markup Language)
  • MongoDB (Database)
  • bcyrypt-ts (Password Encryption)
  • JWT (JSON Web Tokens)
  • Nodemailer (sending emails)
  • React-QR-Code (QR Code generation)

Nodejs

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript code on the server-side, enabling them to build scalable and high-performance web applications. Node.js is an open-source project and is maintained by the Node.js Foundation.

Typescript

TypeScript is a superset of JavaScript that adds optional static typing to the language. It is designed to catch common bugs and improve code quality, while also providing strong typing for JavaScript. TypeScript is a compiled language, which means that it needs to be compiled into JavaScript before it can be run.

HTML

HTML (Hypertext Markup Language) is the standard markup language for creating web pages and web applications. It defines the structure and content of a web page, including headings, paragraphs, images, links, and more. HTML is the foundation of all web pages and is used to structure the content and design of web pages.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows developers to quickly build custom designs without writing a lot of custom CSS. It provides a set of pre-built classes that can be used to style HTML elements, making it easy to create responsive and consistent designs across different devices and screen sizes.

NEXTjs Framework

Next.js is an open-source web development framework built on top of React, developed by Vercel. It is designed to enable developers to create high-quality, full-stack web applications with ease. Next.js extends React's capabilities by providing additional features and optimizations, making it a powerful tool for building dynamic and interactive, full-stack, web applications.

Eample Sites and Apps Built with Next.js:

  • TikTok
  • Hulu
  • Nike
  • OpenAI
  • HBO Max

MongoDB Database

MongoDB is a popular NoSQL database that is widely used for building modern web applications. It is known for its scalability, flexibility, and ease of use. MongoDB stores data in flexible, JSON-like documents called "documents" and allows for easy querying and manipulation of the data.

Bcyrypt-ts

Bcyrypt-ts is a JavaScript library that provides easy-to-use cryptographic functions for password hashing, salting, and other cryptographic operations. It is a lightweight and easy-to-use library that can be used in a variety of applications, including web development, mobile development, and server-side development.

JWT (via jose)

JSON Web Tokens (JWT) are a type of token that is used to securely transmit information between parties as a JSON object. They are commonly used for authentication and authorization purposes, and are often used in conjunction with other security protocols, such as OAuth 2.0. For this app template we use the 'jose' library to create and verify JWT tokens.

Nodemailer

Nodemailer is a popular open-source email sending library for Node.js. It provides a simple and easy-to-use API for sending emails, and supports a wide range of email services, including Gmail, SendGrid, and more.

React-QR-Code

React-QR-Code is a React component that allows you to easily generate QR codes in your React applications. It provides a simple and easy-to-use API for generating QR codes, and supports a wide range of QR code formats, including SVG, PNG, and more.