Building the Kal View Cafe Food Ordering App — My Demo Prototype for COSC Course Project

Jan 2025 — by Himanshu Singh

This semester, I had the chance to build something simple yet meaningful: a demo food-ordering web application for Kal View Cafe, a popular spot on my college campus. Though the goal wasn't to create a production-ready app, this project helped me combine backend development, UI design, authentication, and real-world workflows into a single functional prototype. Here's the story behind how I built it — and what I learned along the way.

1. The Idea: A Simple Ordering System That Actually Works

The project needed to achieve two core objectives: Allow users (students/customers) to place orders easily, Let the cafe vendor receive, manage, and complete those orders. While the concept was straightforward, the challenge was to make the entire workflow functional, secure, and clean — all within the scope of a course project.

2. The Tech Stack: LAMP + Tailwind + JavaScript

I built the project using a combination of technologies that emphasized backend logic and simplicity.

Backend (LAMP Stack)
Linux, Apache, MySQL, PHP. This stack formed the backbone of the application and handled all data operations efficiently.

Frontend: Tailwind CSS + JavaScript
The interface is lightweight, responsive for large screens, and easy to navigate. Tailwind allowed me to prototype quickly and maintain consistent styling.

Security: Salt + Pepper Encryption
All user credentials are stored securely using: Hashing, Salt & pepper encryption. This ensured safe authentication even in a simple prototype environment.

User Authentication System
I implemented: Session handling, Cookie-based validation, Role-based access (User vs Admin through the same login page).

3. Key Features That Bring the App Together

User Panel
Browse menu items, Place orders, View order status.

Admin Panel
Accessed through the same login interface — but with admin credentials. Admin can: View all incoming orders, Mark orders as processing, Mark orders as completed, Manage workflow in real time. This dual-panel design shows how a small business can digitize everyday processes quickly.

4. Challenges & Trade-Offs

Not every feature reached perfection — and that's part of learning.

Mobile Responsiveness
Due to time constraints, I optimized primarily for desktop screens. The mobile version isn't fully polished yet.

Backend vs Frontend Focus
Since the course emphasized backend and server-side development, most of my time went into building: Authentication, Database logic, Order flow, Security patterns. Still, I ensured the UI looked clean and functional for the demo.

5. What I Learned

This project taught me how to balance: Real user workflows, Backend efficiency, Authentication best practices, Security fundamentals, Production-like thinking within limited constraints. Building an app that simulates a real business scenario pushed me to think about how small decisions in UX and architecture affect the entire system.

6. Demo + Final Prototype

Demo Video: Attached in the post. Prototype Link: https://lnkd.in/gQa9xSWv It's hosted on InfinityFree, so performance may vary — but it works well enough to demonstrate functionality.

Conclusion

This wasn't just a class assignment — it was a complete mini-project where I applied everything I've learned so far in backend development, authentication, and UI design. It gave me the confidence to build more real-world systems and think like an engineer who solves problems end-to-end. If you have suggestions or feedback, I'd love to hear them.