Ticket haven platform

A platform for managing event tickets.

Prerequisites

Before running this project, you must have the following installed:

• Node.js (v16.18.0 or later)
• Yarn

Installation

1. Clone this repository to your local machine.
2. Run yarn in the project directory to install all required dependencies.
3. Create a .env file at the root directory of the project and add the necessary environment variables. See the .env.sample file for reference.
4. Run yarn start or yarn dev to start the application.

NPM scripts

Available development scripts:

• yarn dev： Start the development server.
• yarn build：Build the production version
• yarn start：Start the production server.
• yarn lint：Run ESLint for syntax checking.
• yarn prepare：Install Husky.

Tech Stack

Technologies used in this project

• Next.js: A modern React-based framework for building high-performance web applications.
• React: A JavaScript library for building user interfaces.
• Chakra UI: A simple, modular, and accessible React component library.
• TypeScript: A strongly-typed JavaScript extension, making the development process more reliable and maintainable.
• Zustand: A lightweight state management library.
• Axios: A Promise-based HTTP client for browsers and Node.js.
• Framer Motion: A React library for creating animations and interactive effects.
• ESLint: A static analysis tool for maintaining code quality.
• Husky: A tool for managing Git hooks.

Project structure

.
├── .git                     // Folder for Git version control system
├── .husky                   // Husky configuration folder, used for managing Git hooks
├── .next                    // Folder generated by Next.js compilation, containing static files and cache
├── .vscode                  // Visual Studio Code configuration folder
├── node_modules             // Node.js module folder, storing all dependencies
├── public                   // Static resource folder, such as images, fonts, etc.
├── src                      // Source code folder
│   ├── api                  // Folder for API request-related code
│   ├── app                  // Folder for Next route pages
│   ├── components           // Folder for React components
│   ├── hooks                // Folder for custom React Hooks
│   ├── lib                  // Folder for common libraries and tools
│   ├── stores               // Folder for application state management code, such as Redux or MobX
│   └── types                // Folder for TypeScript type definitions
├── tsconfig.json            // TypeScript configuration file
├── .commitlintrc.json       // CommitLint configuration file, used for checking the format of Git commit messages
├── .env.sample              // .env template file, storing sample environment variables
├── .eslintignore            // ESLint ignore configuration, specifying files that don't need syntax checking
├── .eslintrc.json           // ESLint configuration file, used for setting syntax checking rules
├── .gitignore               // Git ignore configuration, specifying files that don't need version control
├── .prettierignore          // Prettier ignore configuration, specifying files that don't need code formatting
├── .prettierrc              // Prettier configuration file, used for setting code formatting rules
├── README.md                // Project description file
├── next-env.d.ts            // Next.js environment type definition file
├── next.config.js           // Next.js configuration file
├── package.json             // Project configuration file, containing project information, scripts, and dependencies
└── yarn.lock                // Yarn lock file, ensuring consistent dependency versions

Specifications

Commit Message Guidelines

Rules

To keep the commit history neat and easy to understand, we require all Git commit messages to follow the format: [type]: [title]

• type

  • build：修改構建系統或外部依賴
  • ci：修改 CI 配置文件或腳本
  • chore：對非業務邏輯程式碼的更改，例如更新開發工具
  • docs：文件更新
  • feat：新增功能
  • fix：修復 bug
  • perf：改善程式的性能
  • refactor：重構程式碼，不添加新功能或修復 bug
  • revert：還原先前的 commit
  • style：改善程式碼風格，例如縮排、空格等
  • test：增加或修改測試程式

• title (sentence-case)

  • 簡短地描述提交的改變。主題應遵循句子格式，即首字母大寫，其餘字母小寫。 Ex:This is an example of sentence case.

Example

• build: Update eslint config for production
• ci: Add GitHub Actions workflow for automated testing
• chore: Update project dependencies to latest versions
• docs: Add usage instructions to README
• feat: Add new user registration feature
• fix: Resolve login issue for locked accounts
• docs: Update API documentation
• perf: Optimize image loading for faster page rendering
• refactor: Simplify error handling in API client
• revert: Roll back to previous version of login form
• style: Enforce consistent indentation with Prettier
• test: Add unit tests for user registration endpoint

Coding style

Below are React code examples for some of the main ESLint rules

1. react/button-has-type:

// Warning: Missing button type
<button>Click me</button>

// Correct: Specifying button type
<button type="button">Click me</button>

2. react/destructuring-assignment:

// Warning: Destructuring assignment not used
const Greeting = (props) => <div>Hello, {props.name}!</div>;

// Correct: Using destructuring assignment
const Greeting = ({ name }) => <div>Hello, {name}!</div>;

3. react/function-component-definition:

// Warning: Not using arrow function definition
function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}

// Correct: Using arrow function definition
const Greeting = ({ name }) => <div>Hello, {name}!</div>;

4. react/jsx-filename-extension:

// Warning: Using JSX in .js file
// App.js
const App = () => <div>Hello, world!</div>;

// Correct: Using JSX in .tsx file
// App.tsx
const App = () => <div>Hello, world!</div>;

5. react/jsx-one-expression-per-line:

// This rule is disabled, so the following code is allowed
const Text = ({ name, age }) => (
  <div>
    Hello, {name}! Your age is {age}.
  </div>
);

6. react/jsx-props-no-spreading:

// This rule is disabled, so the following code is allowed
const InputComponent = ({ ...props }) => <input {...props} />;

7. quotes (used in JSX):

// Warning: Using single quotes
const Container = () => <div className='container'>Hello, world!</div>;

// Correct: Using double quotes
const Container = () => <div className="container">Hello, world!</div>;

8. no-console:

// Warning: console.log is used
const FetchData = () => {
  const data = fetch('https://api.example.com/data');
  console.log(data);
  return <div>Data: {data}</div>;
};

9. no-unused-vars:

// Warning: Unused variable 'unusedVar'
const ExampleComponent = () => {
  const usedVar = 'Hello, world!';
  const unusedVar = 'I am not used';

  return <div>{usedVar}</div>;
};

10. object-curly-spacing:

// Warning: Missing space inside curly braces
const person = {name: 'John', age: 30};

// Correct: Space inside curly braces
const person = { name: 'John', age: 30 };

11. operator-linebreak:

// Warning: Operator is placed before the line break
const result = 1 + 2 ?
  'True' :
  'False';

// Correct: Operator is placed after the line break
const result = 1 + 2
  ? 'True'
  : 'False';