Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/codingbygopal/aromaa-next.js

AroMaa is built with Next.js 15, Tailwind CSS, and Shadcn/UI, leveraging ISR (Incremental Static Regeneration), Streaming with Suspense, server-side pagination, and filtering with URL state management. The app also supports Dark/Light mode and achieves top-tier Lighthouse performance.
https://github.com/codingbygopal/aromaa-next.js

foodrecipeapp front-end-development frontend incremental-static-regeneration next-js nextjs nextjs-typescript nextjs15 nextjs15-rc nextjs15example reactjs responsive seo seo-optimization shadcn shadcn-ui tailwindcss

Last synced: 23 days ago
JSON representation

AroMaa is built with Next.js 15, Tailwind CSS, and Shadcn/UI, leveraging ISR (Incremental Static Regeneration), Streaming with Suspense, server-side pagination, and filtering with URL state management. The app also supports Dark/Light mode and achieves top-tier Lighthouse performance.

Awesome Lists containing this project

README

        

# AroMaa - Food Recipes App (Next.js 15)

**Tech Stack**: Next.js 15, Tailwind CSS, Shadcn/UI, DummyJSON API

**AroMaa** is a cutting-edge, responsive food recipe app leveraging the latest web technologies for superior performance, accessibility, and SEO.

---

## **Key Features**
- **ISR (Incremental Static Regeneration)**: Ensures fast builds and fresh content without requiring full rebuilds.
- **Streaming with Suspense**: Enables progressive data rendering for a seamless user experience.
- **Server-Side URL-Based Pagination & Filtering**: Optimized for large recipe collections with shareable, SEO-friendly URLs.
- **Bookmarkable URLs**: Easily share specific filtered views or recipes.
- **Latest Async Request API**: Efficiently handles `params` and `searchParams`.
- **React 19**: Built on the latest React version for modern capabilities.
- **Next Font**: Provides performance-optimized typography.
- **Dynamic Sitemap Generation**: Automatically creates up-to-date sitemaps for search engines.
- **Static and Dynamic Metadata Generation**: Enhances SEO and social sharing with auto-generated metadata.
- **URL-Based State Management**: Allows bookmarking and sharing specific filters and views.
- **Best Web Vitals Scores (Lighthouse)**: Exceptional performance metrics verified by Lighthouse.
- **Fully Mobile-Responsive Design**: Optimized for all screen sizes and devices.

---

## **Performance**
Check out the **Lighthouse Report** for AroMaa:
![Lighthouse Score](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/aromaa-lighthouse.JPG)

---

## **Themes**
The app supports both **Dark** and **Light** themes, providing a user-friendly, accessible interface.

---

## **Responsiveness**
AroMaa is fully optimized for all screen sizes, ensuring a seamless experience across devices.

---

## **Previews**

### **Home Page (Dark Theme)**
![Home Dark](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/home-dark.png)

### **Home Page (Light Theme)**
![Home Light](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/home-light.png)

### **Recipes Page (Dark Theme)**
![Recipes Dark](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/recipes-dark.png)

### **Recipes Page (Light Theme)**
![Recipes Light](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/recipes-light.png)

### **Recipe Details Page (Dark Theme)**
![Details Dark](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/details-dark.png)

### **Recipe Details Page (Light Theme)**
![Details Light](https://raw.githubusercontent.com/CodingByGopal/imagesAsLink/refs/heads/main/aromaa/details-light.png)

---

**Built with**:
- **Next.js 15** for unmatched performance.
- **Tailwind CSS** for responsive design.
- **Shadcn/UI** for modern, polished components.