Project Documentation

Welcome! This guide will help you set up, run, and understand your project.

What You Need #

Before you begin, make sure you have these installed on your computer:

Node.js (Recommended: version 20.9.0+ or higher)
Download Node.js here
TypeScript (Recommended: version 5.1.0+ or higher)
A package manager (choose one):
- Yarn
- npm
- pnpm
- bun

After downloading the project, you will see 38 separate folders. Each folder is for a different Next.js project. For example, the "AI Application" folder contains all the inner pages for the AI application Next.js project. Navigate to your chosen project folder and run the following command:

Install the Project

Open your terminal (Command Prompt, PowerShell, or Terminal app) and run one of these commands:

yarn install (recommended)
# or
npm install
# or
pnpm install
# or
bun install

This will download all the files your project needs to work.

Start the Project (Development Mode)

To see your project in action while you work on it, run:

yarn dev
# or
npm run dev
# or
pnpm dev
# or
bun dev

After a few seconds, open your web browser and go to: http://localhost:3000 You should see your project running!

Build the Project (Production Mode)

When you’re ready to make your project live or share it, you need to build it:

yarn build
# or
npm run build
# or
pnpm build
# or
bun build

Start the Project (Production Mode)

To run the built project (like it would run on a real server):

yarn start
# or
npm run start
# or
pnpm start
# or
bun start

Useful Commands #

You can run these commands in your terminal to help with your project:

| Command         | What it does                                      |
| --------------- | ------------------------------------------------- |
| `yarn dev`      | Starts the project for development (live preview) |
| `yarn build`    | Prepares the project for production               |
| `yarn start`    | Runs the built project                            |
| `yarn lint`     | Checks your code for errors                       |
| `yarn lint:fix` | Fixes code errors automatically                   |
| `yarn format`   | Makes your code look neat and tidy                |

You can use npm, pnpm, or bun instead of yarn if you prefer.

Project Folder Structure #

Here’s what each folder in your project is for:

├── src/             # root
    ├── app/         # Main application files (pages, layouts, routes)
    ├── context/     # application context provider
    ├── components/  # Reusable building blocks (buttons, headers, etc.)
    ├── data/        # Data files (like JSON or Markdown)
    ├── hooks/       # Custom functions to reuse logic in React
    ├── interface/   # TypeScript types and interfaces (for code safety)
    ├── styles/      # Stylesheets (for how your project looks)
    ├── utils/       # Helper functions and utilities

In simple terms #

src/ is where the main parts of your website live.
components/ are like LEGO pieces you can use anywhere.
public/ is for assets and files you want to show on your site.
The other folders help organize your code and make it easier to manage.

Tips #

If you ever get stuck, try deleting the node_modules folder and running the install command again. You can always ask for help or search online for any error messages you see.