The personal project is mine alone, unique in every way. Only I know what has happened and only I can determine the future direction of the project. Honestly, I never expected my project to encompass so many technical key terms. Much of the content evolved from one or two sentences exchanged with teacher Peng Peng, classmates, and teaching assistants. Because I was willing to venture further into the unknown, the final outcome far exceeded my initial expectations.
Technology Stack
- React: useEffect, useState, useCallback
- Custom Hooks: useAuthState, useRequireAuth
- Redux: useSelector, useDispatch
- Redux Toolkit: createSlice, createAction
- Next.js: App Router
- TypeScript
- ESLint
- Jest: Integration Tests
- Self-Built WYSIWYG Canvas Editor
- Firebase: Cloud Firestore, Storage, Authentication
- Vercel
Responsive Web Design
Main Features
Brush
Eraser
Undo & Redo
Drag & Drop
Keyboard Shortcuts
Secondary Features
Member System (Login & Logout)
Shopping Cart
Third-Party Payment (Tappay)
Order History Management
Component Architecture
Custom Hooks
useAuthState: The useAuthState hook is designed for managing user authentication states in a React application. It leverages Firebase's authentication service to listen for changes in the user's authentication status.
useRequireAuth: The useRequireAuth hook is utilized to manage access control in React components, particularly when certain user interactions require the user to be authenticated (logged in).
Canvas Structure Diagram
Redux Toolkit
Jest
