For Live Demo login use:
- Email: pos@example.com
- Password: funkypos
Funky Point of Sale is a dummy Point of Sale (POS) application built using Next.js 15+ and React 19, developed as part of my learning journey through Jonas Schmedtmann’s Ultimate React Course. This project is a work in progress and is intended to demonstrate the use of the modern Next.js App Router, React, and Supabase in building a real-world, full-stack application.
Project purpose and goals
The main goal of this project is to apply and reinforce the React and Next.js concepts covered in the course by building a practical, real-world-inspired application. I wanted to go beyond passive learning and actually build something functional, while experimenting with the latest React features like Server Components and the Next.js App Router. The long-term purpose is to create a clean, well-structured project that demonstrates my ability to build interactive UIs, manage application state, and follow modern frontend architecture practices.
Overview
Currently, the app allows users to browse a list of products, add them to a cart, proceed through a simple checkout flow, and view the list of created orders. The UI is minimal for now, but the core logic is already functioning.
The backend is powered by Supabase, which handles data storage, authentication, and real-time updates—making it easy to manage orders and product information without building a custom backend from scratch.
Implemented features so far include:
- Authentication: Secure login and logout flow using Supabase Auth.
- Product browsing: Fetching product data from Supabase and displaying it in a responsive grid.
- Interactive cart: Adding, removing, and adjusting quantities of products directly from the UI.
- Order creation: Submitting cart contents to Supabase and clearing the cart upon successful checkout.
- User feedback: Toast notifications to confirm actions like adding items or successfully placing an order.
- Order management: Viewing a list of past orders, with detailed information available for each order.
Future development will include but not limited to the following features:
- Product management UI: Admin interface for adding, editing, or removing products directly from the app.
- Order filtering: Search and filter orders by date, status, or payment method.
- Improved checkout flow: Support for discount codes, multiple payment options, and order notes.
- Mobile-first design improvements: More responsive layouts and touch-friendly interactions.
- Analytics dashboard: Visual summaries of sales performance, popular products, and customer activity.
Ultimately, this project is intended to evolve into a full-featured POS simulation, while remaining clean and well-organized from a code perspective.
Problems and thought process
Building this project has been a rewarding learning experience with a few challenges along the way. One key challenge was balancing server and client components in Next.js — especially when working with Supabase’s server-side client that relies on cookies and headers. I had to carefully structure API calls and data fetching to ensure they only run in the appropriate server environment, avoiding runtime errors.
Styling was another area where I had to think strategically. I opted for Sass with CSS Modules because it gives me enough control over styles without adding unnecessary complexity. The thought process behind every choice—from routing structure to component organization—was guided by scalability and maintainability.
I’m approaching the project iteratively, learning from each step and building in a way that allows me to easily extend and improve it over time.