Wander List Project Documentation

Table of Contents

1. Introduction
2. Project Structure
3. Installation
4. Scripts
5. Configuration
6. Components
7. Data
8. Styling
9. Linting
10. Building and Running

Introduction

Wander List is a React-based project designed to help users manage their packing lists. This documentation provides an overview of the project structure, installation steps, available scripts, and other essential details.

Project Structure

The project has the following structure:

.gitignore
biome.json
data.js
eslint.config.js
index.html
package.json
pnpm-lock.yaml
public/
README.md
src/
	App.jsx
	assets/
	components/
		Form.jsx
		Item.jsx
		Logo.jsx
		PackingList.jsx
		Stats.jsx
	index.css
	main.jsx
vite.config.js

Key Files and Directories

• src/: Contains the source code for the application.
  • App.jsx: The main application component.
  • components/: Contains reusable React components.
    • Form.jsx: Component for the form used to add items.
    • Item.jsx: Component representing a single item in the list.
    • Logo.jsx: Component for the application logo.
    • PackingList.jsx: Component for displaying the list of items.
    • Stats.jsx: Component for displaying statistics about the packing list.
  • index.css: Global CSS styles.
  • main.jsx: Entry point for the React application.
• data.js: Contains initial data for the application.
• package.json: Contains project metadata and dependencies.
• vite.config.js: Configuration file for Vite.
• eslint.config.js: Configuration file for ESLint.
• biome.json: Configuration file for Biome.

Installation

To install the project dependencies, run the following command:

pnpm install

Scripts

The following scripts are available in the package.json file:

• dev: Starts the development server.

  pnpm run dev

• build: Builds the project for production.

  pnpm run build

• lint: Runs ESLint to lint the codebase.

  pnpm run lint

• preview: Previews the production build.

  pnpm run preview

Configuration

Vite

The Vite configuration is located in vite.config.js. It includes settings for building and serving the application.

ESLint

The ESLint configuration is located in eslint.config.js. It defines the linting rules for the project.

Biome

The Biome configuration is located in biome.json. It includes various rules for code quality and style.

Components

App.jsx

The main application component that renders the entire application.

Form.jsx

A form component used to add new items to the packing list.

Item.jsx

A component representing a single item in the packing list.

Logo.jsx

A component that displays the application logo.

PackingList.jsx

A component that displays the list of items to be packed.

Stats.jsx

A component that displays statistics about the packing list, such as the number of items packed and unpacked.

Data

The initial data for the application is defined in data.js:

export const initialItems = [
  { id: 1, description: "Passports", quantity: 2, packed: false },
  { id: 2, description: "Socks", quantity: 12, packed: true },
  { id: 3, description: "Charger", quantity: 1, packed: false },
];

Styling

Global CSS styles are defined in src/index.css. Each component may also have its own styles defined within the component file.

Linting

ESLint is used to ensure code quality and consistency. The configuration is defined in eslint.config.js. To run the linter, use the following command:

pnpm run lint

Building and Running

Development

To start the development server, run:

pnpm run dev

Production

To build the project for production, run:

pnpm run build

To preview the production build, run:

pnpm run preview