🏆ATC Reward Point System
A reward point system for ATC to incentivize cooperative users to complete quaterly and yearly targets and earn points.
Project Overview
The ATC Reward Point System (RPS) is a modern e-commerce frontend application that is specifically designed for the ATC couriers's cooperate customers to earn points and redeem rewards. As the frontend developer, I collaborated with a backend developer and a UI/UX designer to create a robust, user-friendly interface that handles cart management, checkout processes, and user authentication.
Technical Implementation
Architecture & Development
The project was built using Next.js with TypeScript, focusing on performance and maintainability. We implemented a component-based architecture with reusable UI components and efficient state management using Jotai. The UI was crafted in collaboration with a UI/UX designer to ensure an optimal user experience.
State Management & API Integration
For state management, we used Jotai for global state and local state for component-specific data. The cart functionality was implemented with persistent storage, and API integration was handled through Axios with custom interceptors for error handling and authentication.
Performance Optimization
To ensure optimal performance, we leveraged Next.js's server-side rendering capabilities, implemented code splitting, and optimized the build process. The application handles cart operations and checkout processes efficiently.
Technologies Used
Frontend
- Next.js with TypeScript for type safety and optimal performance
- Tailwind CSS for maintainable styling
- Jotai for state management
- Axios for API communication
- @headlessui/react for accessible components
- react-toastify for notifications
Development Tools
- Visual Studio Code as IDE
- ESLint and TypeScript for code quality
- Git for version control
Authentication & Login
The authentication system is designed to provide secure access to the application, with custom login implementation, password recovery flow, and session management using cookies.
Home Page
The home page showcases the main features of the application, including the gift card list, search functionality, and user authentication.
Cart & Checkout
The cart system features persistent storage and efficient state management. The checkout process includes a multi-step flow with order processing and payment integration.
Orders & Account Management
Users can view their order history and manage their account settings through an intuitive interface.
Mobile Responsive Design
The application is fully responsive, providing an optimal experience across all devices. Here's a look at the mobile interface:
Mobile home page
Mobile login page
Mobile cart page
Mobile orders page
Mobile account settings page
Mobile navigation sidebar
Development Process
The project was developed using an agile methodology, with regular communication between me, the backend developer, and the UI/UX designer. Key challenges included implementing a responsive design, optimizing performance for the cart and checkout processes, and ensuring a seamless user experience across all devices.