A platform for managing event tickets.
Before running this project, you must have the following installed:
- Node.js (v16.18.0 or later)
- Yarn
- Clone this repository to your local machine.
- Run
yarn
in the project directory to install all required dependencies. - Create a
.env
file at the root directory of the project and add the necessary environment variables. See the.env.sample
file for reference. - Run
yarn start
oryarn dev
to start the application.
Available development scripts:
yarn dev
: Start the development server.yarn build
:Build the production versionyarn start
:Start the production server.yarn lint
:Run ESLint for syntax checking.yarn prepare
:Install Husky.
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.
.
├── .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
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
:修復 bugperf
:改善程式的性能refactor
:重構程式碼,不添加新功能或修復 bugrevert
:還原先前的 commitstyle
:改善程式碼風格,例如縮排、空格等test
:增加或修改測試程式
-
title (sentence-case)
- 簡短地描述提交的改變。主題應遵循句子格式,即首字母大寫,其餘字母小寫。 Ex:
This is an example of sentence case.
- 簡短地描述提交的改變。主題應遵循句子格式,即首字母大寫,其餘字母小寫。 Ex:
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
Below are React code examples for some of the main ESLint rules
- react/button-has-type:
// Warning: Missing button type
<button>Click me</button>
// Correct: Specifying button type
<button type="button">Click me</button>
- 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>;
- 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>;
- 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>;
- 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>
);
- react/jsx-props-no-spreading:
// This rule is disabled, so the following code is allowed
const InputComponent = ({ ...props }) => <input {...props} />;
- 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>;
- 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>;
};
- no-unused-vars:
// Warning: Unused variable 'unusedVar'
const ExampleComponent = () => {
const usedVar = 'Hello, world!';
const unusedVar = 'I am not used';
return <div>{usedVar}</div>;
};
- 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 };
- 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';