https://github.com/attilacsanyi/next-meals

Demonstrating NextJS app router and different React 19 hooks
https://github.com/attilacsanyi/next-meals

nextjs nextjs15 react typescript udemy-course

Last synced: 6 months ago
JSON representation

Demonstrating NextJS app router and different React 19 hooks

• Host: GitHub
• URL: https://github.com/attilacsanyi/next-meals
• Owner: attilacsanyi
• Created: 2024-12-10T15:25:22.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-12-14T11:05:19.000Z (10 months ago)
• Last Synced: 2025-02-15T01:17:29.517Z (8 months ago)
• Topics: nextjs, nextjs15, react, typescript, udemy-course
• Language: TypeScript
• Homepage:
• Size: 5.04 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Next Meals

![Next.js 15](https://img.shields.io/badge/-Next.js%2015-000000?style=flat-square&logo=next.js)

![React](https://img.shields.io/badge/-React-61DAFB?style=flat-square&logo=react&logoColor=black)

![CSS](https://img.shields.io/badge/-CSS-1572B6?style=flat-square&logo=css3)

![SQLite](https://img.shields.io/badge/-SQLite-003B57?style=flat-square&logo=sqlite)

![better-sqlite3](https://img.shields.io/badge/-better--sqlite3-4479A1?style=flat-square)

![slugify](https://img.shields.io/badge/-slugify-9cf?style=flat-square)

![xss](https://img.shields.io/badge/-xss-red?style=flat-square)

Example project following the **Next.js 15 & React - The Complete Guide** based on [Maximilian Schwarzmüller's Udemy course](https://www.udemy.com/course/react-the-complete-guide-incl-redux).



## Next Meal Demo

- **Next.js 15 Core Features**

  - App Router with file-based routing

  - Server Components as default

  - Server Actions for form handling (meals sharing)

  - Dynamic Routes for meal details (`[mealSlug]`)

  - Static Metadata API for SEO

  - Loading UI and Error Boundaries

  - Not Found pages handling

- **React Hooks & Patterns**

  - `useActionState` for form submission states

  - `useFormStatus` for indicating form submission state

  - `useRef` for file input handling

  - `useState` for image preview

  - `useEffect` for image slideshow

  - `usePathname` for active link detection

- **Data & Image Handling**

  - SQLite database integration with `better-sqlite3`

  - Image optimization with `Next/Image` component

  - File upload handling for meal images

  - XSS protection with `xss` package

  - Slug generation with `slugify`

- **Styling & UI**

  - CSS Modules for scoped styling

  - Responsive design with media queries

  - Custom animations and transitions

  - SVG background with gradient

  - Google Fonts integration

  - Image slideshow component

## Screenshots

Meal Home



Meal Detail



Share Meal Page