Lesson 2.4: Practice — Creating Project Structure

Duration: 45 minutes

Learning Objectives

After completing this lesson, you will be able to:

• Create a complete project folder structure using only terminal commands
• Apply all the commands learned in this module
• Understand common project organization patterns
• Work confidently in the terminal

Introduction

It's time to put everything together. In this hands-on lesson, you'll create a real project structure that you'll use throughout this course series. No more clicking through folders — everything happens in the terminal.

By the end of this lesson, you'll have created a well-organized project folder with directories for source code, tests, documentation, and configuration files. This is exactly how professional developers set up their projects.

Main Content

Project Structure Overview

We're going to create this structure:

typescript-learning/
├── README.md
├── .gitignore
├── src/
│   ├── index.ts
│   └── utils/
│       └── helpers.ts
├── tests/
│   └── index.test.ts
├── docs/
│   └── notes.md
├── exercises/
│   ├── module-1/
│   ├── module-2/
│   └── module-3/
└── scripts/
    └── setup.sh

This structure includes:

• src/ — Source code (your TypeScript files)
• tests/ — Test files
• docs/ — Documentation
• exercises/ — Practice exercises organized by module
• scripts/ — Helper scripts
• README.md — Project description
• .gitignore — Files Git should ignore (you'll learn about Git soon)

Step-by-Step Creation

Let's build this together. Open your terminal and follow along.

Step 1: Navigate and Create the Main Folder

# Go to your home directory
cd ~

# Verify your location
pwd

# Create the project folder and enter it
mkdir typescript-learning
cd typescript-learning

# Verify you're in the right place
pwd

Expected output for pwd:

• macOS/Linux: /Users/yourusername/typescript-learning or /home/yourusername/typescript-learning
• Windows: C:\Users\YourName\typescript-learning

Step 2: Create the Folder Structure

# Create all directories at once
mkdir -p src/utils tests docs scripts

# Create exercise folders for multiple modules
mkdir -p exercises/module-1 exercises/module-2 exercises/module-3

# Verify the structure
ls

Expected output:

docs  exercises  scripts  src  tests

Let's see the full tree:

# If you have the 'tree' command installed:
tree

# If not, use ls recursively:
ls -R

Step 3: Create Files

# Create main files
touch README.md .gitignore

# Create source files
touch src/index.ts src/utils/helpers.ts

# Create test file
touch tests/index.test.ts

# Create documentation
touch docs/notes.md

# Create script file
touch scripts/setup.sh

Step 4: Add Content to Files

# Add content to README
echo "# TypeScript Learning Project" > README.md
echo "" >> README.md
echo "This is my project for learning TypeScript." >> README.md

# Add common ignores to .gitignore
echo "node_modules/" > .gitignore
echo "dist/" >> .gitignore
echo ".env" >> .gitignore

# Add starter content to index.ts
echo "// Main entry point" > src/index.ts
echo "console.log('Hello, TypeScript!');" >> src/index.ts

# Add content to helpers.ts
echo "// Utility functions" > src/utils/helpers.ts
echo "export function greet(name: string): string {" >> src/utils/helpers.ts
echo "  return \`Hello, \${name}!\`;" >> src/utils/helpers.ts
echo "}" >> src/utils/helpers.ts

# Add content to test file
echo "// Tests for index.ts" > tests/index.test.ts

# Add content to notes
echo "# Learning Notes" > docs/notes.md
echo "" >> docs/notes.md
echo "## Module 1: Foundations" >> docs/notes.md
echo "- Started learning command line" >> docs/notes.md

# Add content to setup script
echo "#!/bin/bash" > scripts/setup.sh
echo "echo 'Setting up project...'" >> scripts/setup.sh
echo "npm install" >> scripts/setup.sh
echo "echo 'Done!'" >> scripts/setup.sh

Step 5: Verify Everything

# View the full structure
ls -la

# Check hidden files are there
ls -la | grep "^\."

# View README content
cat README.md

# View the TypeScript file
cat src/index.ts

# List all files recursively
ls -R

Complete One-liner (For Reference)

Once you're comfortable, you could create this entire structure with fewer commands:

# Create all directories
mkdir -p typescript-learning/{src/utils,tests,docs,scripts,exercises/{module-1,module-2,module-3}}

# Navigate into project
cd typescript-learning

# Create all files
touch README.md .gitignore src/index.ts src/utils/helpers.ts tests/index.test.ts docs/notes.md scripts/setup.sh

The {a,b,c} syntax is called brace expansion and creates multiple items at once.

Common Project Patterns

Different types of projects have different structures. Here are some you'll encounter:

Web Application

my-webapp/
├── public/
│   ├── index.html
│   └── assets/
├── src/
│   ├── components/
│   ├── pages/
│   └── utils/
├── tests/
└── package.json

Node.js API

my-api/
├── src/
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   └── middleware/
├── tests/
├── config/
└── package.json

Library/Package

my-library/
├── src/
├── dist/
├── tests/
├── docs/
├── examples/
└── package.json

Practice Exercises

Exercise 1: Verify Your Structure

Navigate through your project and verify everything is in place:

cd ~/typescript-learning

# Answer these questions by running commands:
# 1. What files are in the src folder?
# 2. What's the content of .gitignore?
# 3. How many folders are in the exercises directory?
# 4. What's the full path to helpers.ts?

# 1. Files in src
ls src

# 2. Content of .gitignore
cat .gitignore

# 3. Folders in exercises
ls exercises | wc -l    # Count items
# or
ls exercises

# 4. Full path to helpers.ts
cd src/utils
pwd
# or from project root:
echo "$(pwd)/src/utils/helpers.ts"

Exercise 2: Add More Structure

Extend the project by adding:

1. A config/ folder with settings.ts inside
2. An assets/ folder with images/ and styles/ subfolders
3. A types/ folder inside src/ with index.d.ts file

cd ~/typescript-learning
mkdir -p config assets/images assets/styles src/types
touch config/settings.ts src/types/index.d.ts

Exercise 3: Navigation Challenge

Starting from your home directory, complete these tasks without using absolute paths:

1. Navigate to typescript-learning/src/utils
2. Go up to the src folder
3. Go to tests folder
4. Go back to utils folder
5. Return to your home directory

cd ~
cd typescript-learning/src/utils
cd ..
cd ../tests
cd ../src/utils
cd ~

Exercise 4: File Operations

1. Create a backup of src/index.ts called src/index.backup.ts
2. Create a new file src/app.ts with the content "// Application code"
3. Move docs/notes.md to docs/learning-notes.md (rename it)
4. Create a copy of the entire exercises folder called exercises-backup

cd ~/typescript-learning
cp src/index.ts src/index.backup.ts
echo "// Application code" > src/app.ts
mv docs/notes.md docs/learning-notes.md
cp -r exercises exercises-backup

Exercise 5: Cleanup Challenge

1. Create a folder called temp with three files: temp1.txt, temp2.txt, temp3.txt
2. List all files in temp
3. Delete all .txt files in temp using a wildcard
4. Delete the empty temp folder

mkdir temp
touch temp/temp1.txt temp/temp2.txt temp/temp3.txt
ls temp
rm temp/*.txt
rmdir temp
# or in one step: rm -r temp

Bonus: Useful Commands Reference

Here's a quick reference of everything you've learned:

Key Takeaways

• Project structure matters — organize your code from the start
• The terminal is efficient for creating complex folder structures
• Use mkdir -p to create nested directories in one command
• Brace expansion {a,b,c} creates multiple items quickly
• Always verify your work with ls and pwd
• Practice these commands until they become muscle memory
• Different project types have different standard structures

What's Next?

Congratulations! You've completed Module 2: Command Line. You now know how to:

• Navigate the file system
• Create directories and files
• Copy, move, and delete items
• Build real project structures

In Module 3: What is Programming, you'll learn about programming concepts and start understanding the code you'll soon be writing.

Resources