Restaurant Menu CRUD App (TypeScript, NextJS, Tailwind, Shadcn/UI, and Firebase)
This project showcases a simple CRUD (Create, Read, Update, Delete) restaurant menu application built using TypeScript, Next.js, Tailwind CSS, shadcn/ui components library, and Firebase for authentication and data storage. The app enables users to create, read, update, and delete menu items from a real-time database.
To run this project locally, you'll need:
- Node.js (https://nodejs.org/) installed on your system
- Basic understanding of TypeScript, Next.js, Tailwind CSS, shadcn/ui components library, and Firebase
-
Clone the repository:
git clone https://github.com/anjerodesu/Roast.git cd Roast
-
Install dependencies:
npm install
-
Set up your Firebase project:
- Sign in to the Firebase Console and create a new project.
- Enable the Authentication and Realtime Database services for your project.
- Create an application for web and note down the configuration details.
-
Configure Firebase in your Next.js project:
- In the root folder of the project, create a
.env.local
file. Initialise Firebase with the provided configuration:NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain NEXT_PUBLIC_FIREBASE_DATABASE_URL=your-database-url NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your-measurement-id
- In the root folder of the project, create a
-
Start the development server:
npm run dev
Navigate to http://localhost:3000
in your web browser, and you should see Roast's homepage, the
restaurant menu CRUD app, in action! Authenticated users can create, read, update, and delete menu items from the
Firebase database. The application utilizes Firebase authentication for secure access control.
This project is licensed under the MIT License - see the LICENSE file for details.