Introduction: Getting Started with Your Cooking App

Welcome to your first step in building the AI Cooking Helper! In this lesson, you will learn how to set up the foundation of your web application using TypeScript and Express, a popular web framework for Node.js. Express is lightweight, easy to use, and perfect for beginners who want to build web apps quickly with TypeScript.

By the end of this lesson, you will have a working Express project written in TypeScript, connected to a database. This setup is essential for storing recipes, user data, and more as you continue to develop your cooking app. Everything you learn here will be used in future lessons as you add more features and functionality.

TypeScript Project Structure Basics

Before we dive in, let’s quickly review how TypeScript projects are usually organized in a Node.js environment. A typical TypeScript project has an entry point file (like src/index.ts) that starts the application, and folders (like src/routes/ and src/) that hold different parts of the code, such as routes and database logic.

For example, your project might look like this:

  • src/index.ts is where your application starts.
  • The src/routes/ folder keeps your code organized by separating different route handlers.
  • src/config.ts holds configuration values.
  • src/db.ts manages the database connection.
  • prisma/ contains your database schema if you use Prisma as your ORM.

This structure helps keep your code clean and easy to manage as your project grows.

Setting Up an Express Application in TypeScript

Let’s start by creating a basic Express application in TypeScript. In your src/index.ts file, you will need to import Express and create an app instance.

Here’s what’s happening:

  • import express from "express" imports the Express library.
  • const app = express() creates a new Express application.
  • app.get("/health", ...) defines a simple route for checking if the server is running.
  • app.listen(3000, ...) starts the server on port 3000.

You can add more configuration and middleware as your app grows. For example, to parse JSON request bodies, add:

Connecting Prisma and Initializing the Database

To work with a database in TypeScript, you can use an ORM (Object-Relational Mapper) like Prisma. Prisma makes it easy to interact with your database using TypeScript code.

To connect Prisma to your Express app, create a src/db.ts file:

In your src/index.ts, you can import and use the Prisma client as needed. For example, to check the database connection when the server starts:

The prisma.$queryRaw is used to test the database connection when your server starts. It sends a simple SQL query (SELECT 1) to the database, which always succeeds if the connection is working. If there’s a problem connecting to the database, this line will throw an error, letting you know right away that something is wrong with your database setup.

We will be using a sqlite database that is already set up for you in the Codesignal environment, no need to worry about it!

Organizing Routes with Express Routers

As your app grows, you’ll want to keep your code organized. Express routers help you split your routes into different files. This makes your code easier to read and maintain.

For example, you can define a recipes router in src/routes/recipes.ts:

Then, in your src/index.ts, import and use the router:

This keeps your main application file clean and lets you organize your routes by topic or feature.

Running the App and Accessing the Database

To run your app, use the script defined in your package.json:

You should see output like:

You can now check if your app is running by sending a request to the health endpoint using curl:

You should see a response like:

Using environment variables with dotenv

As your projects grow, it’s important to keep sensitive information — like your database URL and other configuration values — secure. In real-world applications, you should use environment variables or a separate configuration file (not committed to version control) to store these settings, rather than hard-coding them in your source code. In Node.js/TypeScript projects, you can use the dotenv package to load environment variables from a .env file:

This helps protect your data and makes your app easier to configure for different environments.

Summary and What’s Next

In this lesson, you learned how to:

  • Set up a basic Express application in src/index.ts using TypeScript
  • Configure your app to use a database with Prisma
  • Connect Prisma and initialize your database tables
  • Organize your routes using Express routers for a clean code structure
  • Use environment variables to keep sensitive information organized

You now have a solid foundation for your AI Cooking Helper. In the next practice exercises, you’ll get hands-on experience with these steps, making sure you can set up and run your own Express project with a working database. This setup will support all the features you’ll build in the rest of the course!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal