husekivrak / car-wash-portal Goto Github PK

AMP Customer Service Portal

A streamlined customer service portal for managing car wash memberships.
View Demo · Report Bug · Request Feature

This project was my response to a prompt solicited by a mentor: create a front-end customer service portal for a car wash membership platform within a one-week development timeline.

It's built with TypeScript and Next.js, with Vercel as the deployment platform. For a more complete experience, I also added backend functionalites using a PostgreSQL database hosted on Supabase and managed with Drizzle.

Development was a fun process that allowed opportunities to both explore new libraries (e.g., TanStack Tables and Faker.js) and dive deeper into familiar ones, like Drizzle's relational query builder and prepared statements.

Building the nested form modals was particularly challenging, as it required synchronizing the parent form's options based on its child form's submission and proper modal handling. Integrating server actions and toast notifications with these functionalities provided valuable lessons in state management and component hierarchy.

Despite the limited development timeframe, this project is a work in progress that I hope to revist soon. If you come across any bugs, kindly report them here. Thanks!

(back to top)

See package.json for a full list of dependencies.

(back to top)

Coming soon

Detailed setup instructions will be added soon. In the meantime, feel free to reach out if you have any questions.

(back to top)

The UI design centers around user actions, prioritizing quick access and intuitive workflows for efficient customer support.

• Form modals: Simplified workflows utilizing nested modal dialogs for multi-step processes, with validation and notifications for a user-friendly and error-free experience.
• Sidebar Search: Provides instant access to user details with an autocomplete search bar that dynamically updates as you type.
• Toast Notifications: Immediate feedback on user actions to ensure responsive and efficient operations.

This project uses data tables from shadcn/ui, built on and further customized with the TanStack Tables library to provide an intuitive and user-friendly interface.

• Status Indicators: View account statuses at a glance with color-coded chips and hover to reveal additional details.
• Search and Sort: Quick data access through column-specific search and sort functionalities.
• Pagination: Dynamic pagination with customizable page sizes for easy page nativation.
• Row-Level Actions: Features like copy-to-clipboard for emails and an expanded action menu for streamlined user management.
• Dynamic Data Loading: Real-time data updates during filtering and CRUD operations to reflect the most current information without a page refresh.

(back to top)

Distrubuted under the MIT License. See LICENSE.txt for more information.

Huse Kivrak - [email protected]

Live Demo: AMP Customer Service Portal

Project Link: https://github.com/husekivrak/car-wash-portal