Group Order System - Sell Project

Project Overview

GroupOrder Hub is a full-stack web platform designed to simplify group order management within organizations, businesses, schools, or communities. The system efficiently manages product catalogs, orders, users, and group coordinators in a professional manner.

Project Origin

The project was originally developed in Italian (my preferred language for communication) and subsequently translated into English to make it accessible to a broader international market. All technical documentation and code comments are in English, while this presentation maintains both languages for convenience.

Main Features

? Authentication and Authorization System

- Secure authentication with Passport.js sessions

- Three access levels:

- Product/Order Administrator (`isAdmin`): Manages product catalog and orders

- User Administrator (`isUserAdmin`): Manages users and groups

- Group Coordinator (`isCoordinator`): Views their group's orders

- Standard User: Creates personal orders

? Product Management

- Complete product catalog with:

- Name, description, price

- Categories (Food, Beverages, Snacks, Supplies, Other)

- Availability status

- Full CRUD on products (administrators only)

- Category filtering

- Responsive design with visual cards

? Order System

- Dynamic cart with local persistence

- Order creation with delivery date selection

- Order statuses: Pending, Processing, Completed, Cancelled

- Order management for administrators with:

- Complete view of all orders

- Order status modification

- Ordered item details

- Totals and statistics

? User and Group Management

- Complete user CRUD (user admin only)

- Custom group management:

- Group creation/deletion

- User assignment to groups

- Centralized persistence

- Multiple roles per user

- Advanced search and filters

? Coordinator Dashboard

- View of their group's orders

- Access to each order's details

- Group statistics

? Technology Stack

Frontend

- React 18 with TypeScript

- Wouter for routing

- TanStack Query v5 for state and cache management

- React Hook Form + Zod for form validation

- Shadcn/ui + Tailwind CSS for modern and responsive UI

- Lucide React for icons

- Vite as build tool

Backend

- Node.js with Express

- Passport.js for authentication

- Express Session for session management

- Bcrypt/Scrypt for password hashing

Database

- PostgreSQL (Neon-backed) for production

- Drizzle ORM for database management

- In-Memory Storage available for development

- Well-structured schema with relationships

Deployment

- Configured for Render (render.yaml file included)

- Replit support out-of-the-box

- Automated deployment scripts

- Environment variable management

Demo and Test Credentials

? Demo Link

The system is available in demo on Render with the following protective limitations:

- ❌ Registration disabled

- ❌ User modification/addition/deletion disabled

- ❌ New product addition disabled for demo admin user

- ✅ All other features fully operational

- © Copyright footer on every page

⏱️ IMPORTANT - Startup Time:

The site is hosted on Render with a free account. Due to free account limitations, the server shuts down after 15 minutes of inactivity.

On first access or after a period of inactivity, you'll need to wait approximately 30-60 seconds for the server to reactivate.

During this period you might see a loading message or temporary error. Simply reload the page after a few seconds and the site will be fully functional.

? Test Credentials

To test all features, use these accounts:

1. User Management Administrator

Email: gestione@amministratore.it

Password: Gestione2025!

What you can do:

- View complete user list

- Manage groups (view only in demo)

- See all roles and permissions

- Access user management dashboard

2. Product and Order Administrator

Email: prova@amministratore.it

Password: Prova2025!

What you can do:

- Manage product catalog (modify, delete)

- Note: Adding new products is disabled in demo mode for this user

- View all system orders

- Modify order status

- See complete statistics

- Manage product availability

3. Group Coordinator

Email: massimiliano@gmail.com

Password: massimiliano

What you can do:

- Create personal orders

- View product catalog

- Use shopping cart

- See all orders from their group (Department 1)

- Access coordinator page

? Complete Navigation Guide

1️⃣ As Product Administrator (prova@amministratore.it)

After login:

1. Homepage - Automatically view the product catalog

- Click "Admin Panel" in the menu to access management

2. Admin Panel (`/admin`)

- Products Tab:

- See complete product list with category filters

- Note: "Add Product" button is disabled in demo mode

- Use "Edit" buttons to modify

- Toggle "Available" to manage availability

- Orders Tab:

- View all system orders

- Filter by status (All, Pending, Processing, Completed, Cancelled)

- Click on an order to see complete details

- Change order status from dropdown

3. Logout - From the top right menu

2️⃣ As User Administrator (gestione@amministratore.it)

After login:

1. User Management (`/user-admin`)

- "Complete list" Tab:

- See all users with ID, name, email, group, roles

- Use search bar to filter

- In normal version: Edit/Delete buttons for each user

- "Users by group" Tab:

- View users grouped by group

- Separate section for administrators

- Manage Groups (view only in demo):

- List of existing groups

- In normal version: add/remove groups

2. Navigation

- From dropdown menu you can return to Home or Logout

3️⃣ As Coordinator (massimiliano@gmail.com)

After login:

1. Homepage - Available product catalog

- Filter by category (All, Food, Beverages, Snacks, Supplies, Other)

- Click "Add to Cart" on desired products

- Modify quantity in cart with + and -

- See total updated in real time

2. Cart (side panel)

- See all added products

- Modify quantities

- Remove products

- Click "Checkout" to proceed

3. Checkout

- Select desired delivery date

- Review order summary

- Confirm order

4. My Orders (`/my-orders`)

- See complete history of your orders

- Details of each order with items and totals

- Current status of each order

5. Coordinator Page (`/representative`)

- View ALL orders from "Department 1" group

- See complete details of each group order

- Monitor status and totals

? Project Structure

workspace/

├── client/ React Frontend

│ ├── src/

│ │ ├── components/ Reusable components

│ │ │ └── ui/ Shadcn UI components

│ │ ├── pages/ App pages

│ │ ├── hooks/ Custom hooks (auth, cart, classes)

│ │ └── lib/ Utilities and configurations

├── server/ Express Backend

│ ├── auth.ts Authentication configuration

│ ├── routes.ts API endpoints

│ ├── storage.ts Data persistence layer

│ └── index.ts Server entry point

├── shared/ Shared code

│ └── schema.ts DB schema and Zod validations

├── storage/ Persistent data (in-memory)

│ └── app-data.json

├── render.yaml Render configuration

└── package.json Dependencies

? Information for Buyers

What You Receive:

✅ Complete source code with all files

✅ Detailed technical documentation (INSTALLATION.md, README.md)

✅ Database schema with Drizzle ORM

✅ Deployment configurations for Render and Replit

✅ Complete authentication system secure and robust

✅ Modern UI with Shadcn/ui and Tailwind

✅ All reusable components

Easy Customization

The system has been designed to be easily customizable:

- Branding: Change colors, logo and texts

- Categories: Modify/add product categories

- Roles: Extend the permissions system

- Groups: Customize organizational structure

- UI: Modifiable modular components

Use Cases

- ? Companies: Corporate cafeteria orders

- ? Schools: Student snack/lunch orders

- ?️ Condominiums: Collective shopping

- ? Events: Group order management for events

- ? Retail: B2B small quantity order system

- ? Universities: Educational material orders

? Post-Sale Notes

Support

⚠️ IMPORTANT: After the sale concludes, the project passes completely to the buyer. I do not provide post-sale support, maintenance, or technical assistance. The code is well documented and structured to allow any developer to continue development.

License

The code is sold without warranties and as is. The buyer receives all rights for use, modification, and commercial distribution of the code.

? Technical Metrics

- Lines of Code: ~8,000+ (including comments and configurations)

- React Components: 40+

- API Endpoints: 20+

- Database Tables: 5 (users, products, orders, orderItems, availableGroups)

- Dependencies: All updated and maintained

- Performance: Optimized with TanStack Query and caching

- Security: Password hashing, secure sessions, input validation

? Why Buy This Project?

✅ Save months of development - Complete and working system

✅ Clean and professional code - TypeScript, best practices

✅ Scalable - Modular and maintainable architecture

✅ Modern - Current and popular technology stack

✅ Deploy-ready - Configurations already prepared

✅ Secure - Robust authentication and data validation

✅ Responsive - Works on desktop, tablet and mobile

✅ Documented - Well-commented code and complete documentation