🦜 FatBird — Project Portfolio

 

---

📁 Projects

#	Repository	Description	Stack
1	PROJECT 1 — Click Word v1 →	Word-clicking game with hint, clear, and local storage features	Vue.js · TailwindCSS · JSON Server
2	PROJECT 2 — Click Word v2 →	Extended version with user accounts, coins, market, and rank board	Vue.js · Pinia · DaisyUI · JSON Server

---

Section 1  🦜 FatBird 🦜

Team Member

Student ID	Member Name	Contribution	Contribution Rate
65130500062	PHUTHON PHETYOTHA	Data collection Sound effect [UPDATE] Coin Feature [NEW]	20%
65130500101	THANNAPAT KHAMJUN	Implement local storage Clear feature Fix and refactor code overall [UPDATE] Manage user account [NEW]	20%
65130500112	PUTTINAT LERTWECH	Tutorial page [UPDATE] Quiz word setup Animation [UPDATE] Fix and refactor code overall [UPDATE] Market feature [NEW] UI image asset [NEW]	20%
65130500115	LALITA BENJAMANUKUL	Hint feature Fix and refactor code overall [UPDATE] Readme [UPDATE] Components Refactoring [NEW] Sound effect [NEW] Data design [NEW]	20%
65130500117	WARISA THAIAMTHONG	Answer validator UI image asset [UPDATE] Fix and refactor code overall [UPDATE] Time & Rank Board Feature [NEW]	20%

---

Feature

"Click Word" — A game application in which players choose letters to construct words.

Manage User Account

Create User: Players can create their own user account and choose a user profile, which includes a username (3-15 characters) and a password (at least 8 characters). Login: Players can use their user accounts to login to the game. Edit & Delete User: Players can change their username, profile picture, and profile frame, and players can also delete their account. → View source code

Tutorial

How to play this game. → View source code

Sound Effect

Player has the option to set background music and sound effect. → View source code

Mode Selection

Our game features 3 modes: Easy: contains 35 words, each with 4 letters. Medium: contains 35 words, each with 6 letters. Hard: contains 30 words, each with 8 letters. → View source code

Clear

If you select the wrong letter and need to reset your choices, click the "Clear" button. This will remove all selected letters, except those revealed by hints. → View source code

Hint

The game starts with 3 hints. If you get stuck, you can use a hint to reveal one correct letter in the answer box. You'll also earn 5 additional hints for completing each game mode. → View source code

Coin

At the beginning of the game, the player will not have any coins. The player will receive coins when playing through each level: Easy Mode: Get 1 coin Medium Mode: Get 2 coins Hard Mode: Get 4 coins → View source code

Market

Players can use their coins to purchase hints and profile frames in the market. → View source code

Success

Track your success rate by measuring how many levels you complete in each mode. Your progress will contribute to reaching a total of 100%. → View source code

Time & Rank Board

Time: Tracks the time the user plays the game. It starts tracking when the game starts. If the player leaves the page, the time is paused and resumes when the user returns. Rank Board: A ranking board for users in the application. It displays the user rankings along with personal information such as username, number of coins, success rate, and time spent. Users are sorted by: If users have more success, they will be ranked higher. If users have the same success rate, the ranking will be based on time spent — less time = higher rank. → View source code

---

Game Manual

Welcome to Click Word!

Get ready to challenge your knowledge and thinking skills to the fullest. If you're ready, let the fun begin.

---

How To Play?

1. Login with your user account. If you don't have one, create an account first.
2. Click the Start Game button to begin.
3. Select your desired difficulty level. Each level offers unique challenges for an engaging experience.
4. Choose letters from the grid and arrange them to form the correct word.
5. If your answer is incorrect, the selection box will reset.
6. If you make a mistake, you can click the "Clear" button to start over.
7. Use "Hints" to reveal a letter in the correct order if needed.
8. If you run out of hints, you can use coins to buy more hints at the market.
9. If you want a beautiful profile picture frame, you can buy it at the market.
10. If you want to change your username, profile picture, and profile frame, you can click on the profile icon.
11. If you want to see your ranking, press the "Rank Board" button on the home page.

---

📽️ Clip Tutorial To Play Game

▶ Click to Watch Tutorial

---

References

Game Design

• Infinite Word Search Crossy
• UI: DaisyUI and TailwindCSS

Images

• Icons from Flaticon
• Profile Frame Pngegg
• Avatars from Recraft

Animation

• From TailwindCSS and Codepen.io

Sound Effects and Background Music

• Background sound — Cotton Candy (Children Puzzle Game Music)
• ClickButton / Clear / Hint / SelectLetter sound — Click sound
• Success sound — Success 1
• Fail sound — Video game - points lost - retro

Document Research

• Mozilla MDN
• W3Schools
• Pinia

Notable Implementations

• Using the prototype Property · Reference from W3Schools
• Documentation Comments in JSDoc · Reference from GeeksForGeeks
• Implement Queue using Array · Reference from GeeksForGeeks

---

⚙️ Config: Post Backend (CORS Fix)

If you have an issue about Cross-origin resource sharing (CORS) when logging in or creating a new account, follow these steps:

1. Change the port in package.json:

"backend": "json-server --watch ./data/db.json --port 5000"

2. Match the port in vite.config.js:

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:5000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
}

---

_{Made with ❤️ by Team FatBird · Section 1}