Coding Terminology Part 1

Frameworks

When you install a framework, you are installing a folder of files and folders that contain the code for the framework. The framework provides a structured foundation for building applications by setting up the architectural infrastructure of your project so you don’t have to do it yourself. It also gives you a structured way/place to add to your project (i.e. pages, components, etc.).

You can think of a framework as a starter package that makes creating a project significantly easier than if you were to do it all by yourself.

For our MVP, we will leverage Next.js to ensure efficiency and scalability. In the image above, you can see the file structure of a Next.js project. It is a directory of folders and files that contain the code for the project. It has a particular file structure that is used to organize the code. Different functionalities will live in different folders in your project that leverages this framework.

Another popular framework typically used for setting up static websites includes Astro.

Practice: Explore a NextJS Project

1. If you would like to peek into a framework and explore the files within the NextJS project, we would recommend you first install Node following the instructions in the Getting Started section.

Then, run the following command in your Terminal (Command Line):

npx create-next-app@latest

The Step-by-Step guide in this section will walk you through the files in more detail of a NextJS project (you don’t have to do this until you start the end-to-end tutorial though)!

Libraries

Libraries are sets of functions and routines that help perform specific tasks. When you import a library into your project, you can use the functions and routines it provides to help you accomplish your goals. They don’t usually dictate the overall structure of your application; instead, they just provide tools that you can use wherever needed.

To make this more concrete, let’s say you have data that sits in your database, and you want to display a chart of the data. Instead of writing the data visualization code yourself, you can download and import a library like Rechart to help you accomplish this. For instance, adding the following code to your project will allow you to display a chart of the data (without having to define and plot the chart yourself).

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
{ month: 'Jan', sales: 4000 },
{ month: 'Feb', sales: 3000 },
{ month: 'Mar', sales: 5000 },
];

const MyBarChart = () => (
<ResponsiveContainer width="100%" height={300}>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Bar dataKey="sales" fill="#8884d8" />
  </BarChart>
</ResponsiveContainer>
);

export default MyBarChart;

As you build your project, you will be able to import libraries like this and others to add the functionality you need for your application. Typically, the AI agent will help you identify which libraries you need to install and write the code to use them. Examples: React, Rechart, Axios, etc.

In order to install a library, you will often have to enter a command like the following in your Terminal:

npm install rechart

Packages

Packages are collections of prewritten code that add functionality to your projects. You can think of them as a means of obtaining code (either library, scripts, or full applications).

You will typically install packages using a package manager like npm or yarn. Typical commands to download packages look like:

npm install package-name

or

yarn add package-name

Packages that you will be using in this course include but are not limited to: Next.js, Tailwind CSS, Supabase, OpenAI, etc.

Frameworks, Libraries, and Packages in our Workflow

We will be using Next.js as our framework for this course. We will begin our project by installing the Next.js framwework by downloading the package using npm or yarn (package installers).

Then, as needed, we will install packages containing libraries and functions to help build our project (like Supabase, Tailwind CSS, OpenAI API, etc). All of this installation will happen while we are in our project directory.

Tip

💡 Pro-tip: Cursor will sometimes tell you as part of the implementation to install a package. You will need to run the npm command in your Terminal (or Command Line if you have Windows).