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 18 or higher)
  Download Node.js here
• A package manager (choose one):
  • Yarn
  • npm
  • pnpm
  • bun

How to Set Up the Project#

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.