Restaurant Reservation Application with NextJS 13

Welcome to the Restaurant Reservation Application built with NextJS 13! This app will guide you through the amazing features that NextJS 13 has to offer by creating a restaurant reservation system where users can view restaurants and reserve tables.

Table of Contents

• Introduction
• Features
• File System In Nextjs 13
• Handling Application States
• Rendering Modes
• Server Side With Nextjs
• Authentication
• Global User Data
• Getting Started
• Images from inside the app

Introduction

NextJS 13 is a powerful higher-level framework built on top of React that revolutionizes web application development. In this course, I learned how to leverage NextJS 13 to build a restaurant reservation application from scratch.

Features

• View restaurants and their details.
• Reserve tables at your favorite restaurants.
• Handle loading, error, not found, and success states seamlessly.
• Utilize server and client components effectively.
• Set up a Postgres database with Prisma for data storage.
• Implement authentication using middleware, hashers, and JSON Web Tokens (JWT).
• Store user data globally with the Context API.
• Create a sophisticated availability and scheduling system using advanced algorithms.

File System in NextJS 13

Learned how to structure my project using the NextJS 13 file system. Define static and dynamic routes effortlessly by organized my files and folders.

Handling Application States

I have handled loading, error, not found and success states in my app to ensure a smooth user experience.

Rendering Modes

I dove deep into the different rendering modes of React components. I understood when to use server components and when to prefer client components.

Server Side with NextJS

I defined data models with a Postgres database and Prisma (ORM). I used Supabase

Authentication

I implemented a scratch authentication method. I used middleware, hashes and JSON Web Tokens (JWT) to secure my application.

Global User Data

I stored user data globally using the Context API for a consistent user experience across the application.

Getting Started

To get started with this project, follow these steps:

Clone the repository: git clone /~https://github.com/yourusername/restaurant-reservation-app.git Install dependencies: npm install Configure your database and authentication settings. Run the application: npm run dev

Images from inside the app