Grilli Restaurant

Overview

Grilli is a modern, full-stack restaurant website built by YLA Dev. Its purpose is to showcase a restaurant’s branding, menu and ambiance while providing an easy way for customers to view offerings and make reservations. The site is tailored to diners and restaurant staff: it features high-quality food imagery and clear navigation for menu browsing, as well as an “Online Reservation” form for booking tables. In this way it serves both the restaurant’s promotional needs and the practical needs of patrons looking to find location, hours, and make a booking. (The live site footer notes “Crafted by YLA Dev”, indicating its developer origin.) The audience includes prospective guests on mobile or desktop devices and the restaurant management team (who would use the backend to update menu items and view bookings).

Tech Stack

The site is built on a Node.js server with Express as the web framework, MongoDB as the database, and EJS as the HTML templating engine. This stack was chosen for its strong JavaScript ecosystem and rapid development workflow. Node.js is an asynchronous, event-driven JavaScript runtime ideal for building scalable web applications. Express is a lightweight, unopinionated framework that adds routing and middleware support on top of Node.js – it provides a robust set of features for web and mobile apps while keeping things modular and fast. MongoDB is a NoSQL document database, chosen for its flexible schema and easy JSON-like data model. Storing menu items, reservation details, and other collections as JSON documents allows quick iteration and scaling without rigid tables. EJS (Embedded JavaScript) was selected for server-side rendering because it lets us generate HTML pages with plain JavaScript and dynamic data injection. Using EJS, Express routes render views by filling templates with data from MongoDB, producing pre-built HTML for each request. Together, this stack (often called the “MEN” stack) enables full-stack JavaScript: the same language on both client and server, speedy development, and easy deployment via services like Vercel.

Key Features

Responsive Design. The site adapts to different screen sizes, ensuring menus and images look good on phones, tablets, and desktops. Responsive grids and CSS media queries (often a mobile-first approach) were used to rearrange and resize elements smoothly across breakpoints. For example, the navigation collapses into a mobile menu on small screens, and text/image sections stack vertically. This ensures a consistent, accessible user experience on all devices (as industry best practices note, responsive layouts give equal access regardless of device.

Hero Slider & Animations. The homepage opens with a fullscreen hero slider of food imagery. Background images (e.g. a bowl of noodles, rolls of sushi, or pasta) rotate automatically, creating a dynamic first impression. Subtle CSS fade-in and parallax effects on scroll (e.g. text headings and photo galleries fade or slide into view) engage users without being overwhelming. These animations are implemented with simple JavaScript/CSS so as not to hinder performance.

Menu Display. A standout feature is the dynamic menu section. Menu items (with images, titles, descriptions, prices) are stored in MongoDB and rendered through EJS templates. Users can browse categories such as “Breakfast”, “Appetizers”, “Drinks”, and view specialty dishes (e.g. “Lobster Tortellini – $20”). The site also highlights a “Special Dish” banner and “Delicious Menu” list (see images below). The menu page may support filtering by category or linking back to sections on the home page for UX continuity.

Reservation System. The site includes an “Online Reservation” section (see form in the screenshot below). Customers can select party size and time slots from dropdowns and submit a booking request. The backend (Express) handles form submission: inputs are validated (e.g. ensuring the number of guests and date/time fields are present) and then stored in MongoDB. This saves reservation data for restaurant staff to view. (On error, Express-validator or custom checks prompt the user to correct form errors.) Additionally, a prominently-placed “Find A Table” or “Book A Table” button appears in the hero area and navigation to encourage bookings.

Chef Profiles & Story. An “Our Chefs” section (linked from the navbar) introduces the kitchen team with photos and bios. This personal touch builds trust. There is also an “Our Story” or “About Us” section describing the restaurant’s concept, backed by an interior restaurant photo, reinforcing the brand.

Contact & Newsletter. A footer includes contact details, opening hours, and a newsletter subscription form. Subscribing saves the email (again via Express to MongoDB) and shows a confirmation message. Social media links are provided. This ensures guests can follow updates.

UI/UX Design

The site’s layout and visual consistency emphasize a modern, upscale restaurant vibe. High-resolution food photography fills wide sections (with dark overlays for text contrast), matched by a clean, sans-serif font for headings and body text. Accent colors (warm orange/gold for buttons and highlights) stand out against a mostly dark or neutral background. The spacing is airy with generous padding around images and text blocks, giving a premium feel. The navigation bar is fixed at top and uses simple text links; its styling stays consistent across the site.

Responsiveness is achieved through a mobile-first CSS approach: on narrow viewports, columns collapse into single-column stacks, menus become accordion lists or full-width buttons, and text sizes adjust for readability. For example, the multi-column “Our Strength” icons section (with headings like “Hygienic Food”, “Fresh Environment”, “Skilled Chefs”) stacks vertically on mobile.

Interactive elements are intuitive: buttons (e.g. “View Menu” or “Book A Table”) have hover transitions. The reservation form uses placeholders and toggle buttons for party size/time, making it easy to use. Animations (such as fade-ins on scroll for menu items and text) are smooth but minimal, preserving clarity. Overall, the design prioritizes food imagery and clear calls-to-action, aligning with best practices for restaurant websites (e.g. prominent booking buttons and visual menu highlights).

Challenges and Solutions

During development, several technical and design challenges were encountered:

Form Validation: Ensuring the reservation form only accepts valid input was key. We implemented server-side checks using middleware (for example, the express-validator library) to verify that fields like date, time, and guest count are present and correctly formatted. On the client side, simple JavaScript checks prevented empty submissions. Invalid submissions display friendly error messages. This two-layer validation prevented bad data from reaching MongoDB.

Server-Side Rendering Performance: Rendering the entire page on the server with EJS can be heavier than a static site. To optimize, we minimized EJS includes and partials, and enabled template caching so that layouts compile only once. We also paginated or limited data (e.g. showing only featured menu items initially) to reduce render time. Using Vercel’s edge caching (on subsequent requests) further sped up delivery.

MongoDB Schema Design: Designing the data models required thought for flexibility. For the menu, each item document includes fields for name, price, description, category, and image URL. We allowed optional fields (e.g. “isSpecial”: true) to highlight dishes. For reservations, we created a schema with date, time, partySize, and contact info. Early on, we anticipated that menu categories or item fields might change, so we kept the schema simple and used MongoDB’s schemaless nature to our advantage (no need to pre-define columns as in SQL).

Image Handling: The large hero and menu images enhance appeal but could slow loading. We solved this by pre-processing images: resizing and compressing them (using a build script or service like TinyPNG) before deployment. On the site we used responsive <img> or CSS backgroun-img with media queries to load smaller versions on mobile. This kept visual quality high while improving performance.

Design Consistency: Integrating the template’s styles with custom content sometimes caused clashes (e.g. text overlapping images on very small screens). The solution was to adjust CSS breakpoints and ensure all fonts and colors matched the brand palette. The navigation and buttons were restyled to fit the restaurant theme. Iterative user-testing on devices helped catch layout bugs (for instance, ensuring the “Book A Table” button is always visible after the hero slider).

Performance and Deployment

The site is deployed on Vercel, a cloud platform that supports serverless Node/Express apps. Vercel auto-provisions global CDN edges, meaning static assets (CSS, images, compiled HTML) are delivered from locations close to users, improving load times. We used a vercel.json configuration to route all requests through our Express serverless function (as described in Vercel’s Express guide), making deployment straightforward with minimal config changes.

On the backend, we optimized performance by enabling Gzip compression for HTML/CSS/JS, and setting HTTP caching headers on static resources. Since pages are rendered on the server, we leveraged server-side caching: for example, if menu data changes infrequently, we cached the JSON query in memory for a short time. We also minified CSS and JavaScript and eliminated unused code. These steps help pages load quickly even on slower connections.

Given Vercel’s serverless nature, we monitored cold starts (initial latency when a function wakes). We kept our function code lightweight and used Vercel’s experimental bytecode caching to reduce startup time. In practice, the optimized stack yields fast load times: test tools (like Google PageSpeed Insights) score the site well on both desktop and mobile.

Lessons Learned

Building Grilli reinforced many full-stack development lessons. I learned how to integrate front-end templates with a back-end data store: passing MongoDB query results into EJS views smoothly and handling asynchronous code with async/await. Deploying Node/Express on Vercel taught me how to adapt a traditional server app to a serverless environment (for example, using the directory or proper exports). I also gained insight into responsive design trade-offs: while desktop layouts can be wide and complex, we must prioritize content for mobile. Debugging CSS on different screen sizes was especially instructive.

From a project perspective, planning the schema design up front was crucial: a small change (like renaming a field) cascades through routes and views. I learned to modularize code (separating route handlers, view templates, and database models) to keep things manageable. Finally, I experienced the importance of performance tuning for images and scripts – even small optimizations made the UX noticeably smoother on test devices. Overall, the project was a success: the site looks polished, functions correctly, and the development process has given me a deeper understanding of building end-to-end Node.js applications.