GreenMate
Comprehensive Platform for Plant Lovers
GreenMate is a comprehensive plant sales platform utilizing the Open Market API, offering plant sales, personal plant management, plant community features, and plant-related magazine content. Users can access everything from plant purchases to growth management and experience sharing on the site. This project was designed and developed to help even plant beginners easily become familiar with plants.
Details
Led as Project Leader: Designed Project Structure and Tech Stack, Conducted Code Reviews
- Designed the overall project structure and selected the tech stack including React, Next.js, and TypeScript.
- Led code reviews, shared best coding patterns with team members, and drove code quality improvement, thereby enhancing overall development efficiency.
Implemented NextAuth.js-based Social Login and JWT-based Email/Password Login
•Implemented Kakao and Naver social logins using NextAuth.js, and developed a registration system supporting various authentication methods by implementing standard login with JWT authentication. This provided a secure and convenient user authentication flow while optimizing session management and token validation logic.
Optimized State Sharing Between Components with Zustand-based Global Login State Management
•Introduced Zustand to solve the props drilling problem when login state needed to be used across multiple components. This enabled easy access to login information from all components and improved application performance by reducing unnecessary re-renders.
Developed Multi-Step Forms with React Hook Form + Zod and Integrated State Management
•Initially developed with a single-page approach for all information input, but determined that the lengthy registration process increased user drop-off risk and resulted in poor overall UX.
Refactored to a Multi-Step Form structure to reduce input fields users need to focus on at once and enabled visual progress tracking.
Managed form state efficiently with React Hook Form at each step and applied real-time validation using Zod. Also managed step-by-step input data globally through Zustand to implement data sharing between pages and input preservation upon exit.
Built Page Access Control System through Middleware
•Built a page access control system based on user authentication status and permissions using Next.js Middleware. Increased development efficiency by managing access centrally instead of checking permissions individually on each page, enhancing code consistency.
Developed Complete My Page Features (Profile View/Edit, Password Change, Bookmark/Order History/Plant Management)
•Developed all features for the user's My Page. Implemented all necessary functions including profile information view and edit, password change, bookmark management, order history check, and pet plant CRUD operations, and applied responsive design to provide optimized user experience across various devices.