{"id":15131582,"url":"https://github.com/arnobt78/Restaurant-1-WFoodJS--NextJS-Frontend","last_synced_at":"2025-08-19T22:32:47.163Z","repository":{"id":256871516,"uuid":"856674851","full_name":"arnobt78/RestaurantJS-NextJS-Website","owner":"arnobt78","description":"RestaurantJS App is a NextJS 14 Static Frontend Website, using React.js, Javascript, TailwindCSS, Framer-Motion, TailwindCSS-Animate, Date-fns, React-Leaflet, Lucide-React, React-Day-Picker, React-Scroll, React-Icons, React-Responsive features and deployed on Vercel.","archived":false,"fork":false,"pushed_at":"2024-09-16T13:20:43.000Z","size":4470,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-19T04:08:29.943Z","etag":null,"topics":["date-fns","javascript","lucide-react","nextjs","nextjs14","react-components","react-day-picker","react-hooks","react-icons","react-leaflet","react-responsive","react-router","react-scroll","reactjs","restaurant-website","restuarent-app","tailwind-animate","tailwindcss","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://restaurant-js-arnob.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-13T01:53:27.000Z","updated_at":"2024-09-16T13:20:46.000Z","dependencies_parsed_at":"2024-10-31T12:37:48.988Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/RestaurantJS-NextJS-Website","commit_stats":null,"previous_names":["arnobt78/restaurantjs-nextjs-website"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FRestaurantJS-NextJS-Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FRestaurantJS-NextJS-Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FRestaurantJS-NextJS-Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FRestaurantJS-NextJS-Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/RestaurantJS-NextJS-Website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230374123,"owners_count":18216042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date-fns","javascript","lucide-react","nextjs","nextjs14","react-components","react-day-picker","react-hooks","react-icons","react-leaflet","react-responsive","react-router","react-scroll","reactjs","restaurant-website","restuarent-app","tailwind-animate","tailwindcss","vercel-deployment"],"created_at":"2024-09-26T04:00:29.029Z","updated_at":"2025-08-19T22:32:47.158Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Restaurant-1 W'FoodJS - Modern Next.js Frontend Restaurant Website (Design 1)\n\n![project23](https://github.com/user-attachments/assets/77de8404-aeba-4f67-b5fe-0438e80bda73) ![Screenshot 2024-09-13 at 03 34 24](https://github.com/user-attachments/assets/1ef89f8a-e6f8-4bfa-9c95-453e35bbf4ee) ![Screenshot 2024-09-13 at 03 35 51](https://github.com/user-attachments/assets/9f3eb9e5-5dd7-46fd-9b23-aee505fa84d1) ![Screenshot 2024-09-13 at 03 34 55](https://github.com/user-attachments/assets/bd1df324-3ba9-45d9-a530-5ebce27cfe36) ![Screenshot 2024-09-13 at 03 35 12](https://github.com/user-attachments/assets/d6f0347c-3ec7-41d1-9d64-695ee0ddfd24) ![Screenshot 2024-09-13 at 03 35 33](https://github.com/user-attachments/assets/7bff98ba-b797-4c01-962e-ec0e2156bbd6)\n\n---\n\n## Project Summary\n\nW'FoodJS is a modern, visually appealing static restaurant website built with Next.js 14, React.js, TailwindCSS, and a suite of supporting libraries. This project demonstrates how to build a responsive, animated, and interactive front-end application using a best-practices tech stack, suitable for learning, teaching, and real-world static site deployments.\n\n- **Live-Demo:** [https://restaurant-js-arnob.vercel.app/](https://restaurant-js-arnob.vercel.app/)\n\n\u003e _Note: This project is implemented in JavaScript. A TypeScript version is also available at [RestaurantTS-NextJS](https://github.com/arnobt78/RestaurantTS-NextJS-Website)._\n\n---\n\n## Table of Contents\n\n- [Project Summary](#project-summary)\n- [Features](#features)\n- [Technology Stack](#technology-stack)\n- [Project Structure](#project-structure)\n- [Installation](#installation)\n- [Running the Project](#running-the-project)\n- [API \u0026 Routing](#api--routing)\n- [Component Walkthrough](#component-walkthrough)\n- [Learning \u0026 Teaching Content](#learning--teaching-content)\n- [Keywords](#keywords)\n- [Deployment](#deployment)\n- [References](#references)\n- [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- Responsive design with TailwindCSS utility-first framework\n- Modern UI/UX with smooth animations (Framer Motion \u0026 TailwindCSS Animate)\n- Date selection and management (date-fns, React-Day-Picker)\n- Interactive map via React-Leaflet\n- Dynamic iconography with Lucide-React and React-Icons\n- Scroll effects and responsive queries (React-Scroll, React-Responsive)\n- Google Fonts optimization (next/font)\n- Modular, reusable component architecture\n- Easy setup and deployment via Vercel\n- Clean, semantic codebase for learning and teaching\n\n---\n\n## Technology Stack\n\n- **Framework:** [Next.js 14](https://nextjs.org/) (React-based SSR/SSG framework)\n- **Language:** JavaScript (ES6+)\n- **Styling:** [TailwindCSS](https://tailwindcss.com/), [tailwindcss-animate](https://github.com/joe-bell/tailwindcss-animate)\n- **Animation:** [Framer Motion](https://www.framer.com/motion/)\n- **Date Handling:** [date-fns](https://date-fns.org/), [React-Day-Picker](https://react-day-picker.js.org/)\n- **Maps:** [React-Leaflet](https://react-leaflet.js.org/)\n- **Icons:** [Lucide-React](https://lucide.dev/), [React-Icons](https://react-icons.github.io/react-icons/)\n- **Responsive Utilities:** [React-Responsive](https://github.com/contra/react-responsive), [React-Scroll](https://www.npmjs.com/package/react-scroll)\n- **Font Optimization:** [next/font](https://nextjs.org/docs/basic-features/font-optimization)\n- **Deployment:** [Vercel](https://vercel.com/)\n\n---\n\n## Project Structure\n\n\u003e _Note: The actual file/folder names may differ slightly depending on your customization._\n\n```\n/\n├── app/\n│   ├── page.js            # Main homepage\n│   └── ...                # Other Next.js App Directory files\n├── components/            # Reusable React components\n├── public/                # Static assets (images, icons)\n├── styles/                # TailwindCSS, global styles\n├── package.json           # Dependencies and scripts\n├── tailwind.config.js     # TailwindCSS configuration\n├── next.config.js         # Next.js configuration\n└── README.md              # Project documentation\n```\n\n---\n\n## Installation\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/arnobt78/RestaurantJS--TailwindCSS-Fundamental-Project-5.git\n   cd RestaurantJS--TailwindCSS-Fundamental-Project-5\n   ```\n\n2. **Install dependencies:**  \n   Make sure you have [NodeJS](https://nodejs.org/en/) installed.  \n   Then run:\n   ```bash\n   npm install\n   # or\n   yarn\n   # or\n   pnpm install\n   # or\n   bun install\n   ```\n\n   **Install specific packages (if not auto-installed):**\n   ```bash\n   npm i framer-motion date-fns react-leaflet lucide-react react-day-picker react-scroll react-icons react-responsive tailwindcss-animate\n   ```\n\n---\n\n## Running the Project\n\nStart the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the app.\n\nYou can start editing the main page by modifying `app/page.js`. The app supports hot reloading for rapid development.\n\n---\n\n## API \u0026 Routing\n\nThis project is a static front-end site and does not connect to a backend API by default.  \nNext.js routing is file-based; each file in the `app/` directory corresponds to a route:\n\n- `/` → `app/page.js` (Homepage)\n- Additional pages/components can be added under `app/` or as dynamic segments.\n\nIf you wish to add an API or server-side logic, refer to the [Next.js API Routes documentation](https://nextjs.org/docs/pages/building-your-application/routing/api-routes).\n\n---\n\n## Component Walkthrough\n\n- **Header \u0026 Navigation:** Responsive site header, mobile-friendly nav using Tailwind's utilities\n- **Hero Section:** Eye-catching introduction with animations (Framer Motion)\n- **Menu Display:** Showcases featured dishes or menu categories using card components\n- **Reservation:** Date selection with React-Day-Picker and date-fns\n- **Location/Map:** Interactive map using React-Leaflet for showing restaurant location\n- **Contact Section:** Clean, accessible form for user inquiries\n- **Footer:** Social links, copyright\n\nAll components are modular and reusable.  \nExample (simplified):\n```jsx\n// components/Hero.jsx\nimport { motion } from \"framer-motion\";\nexport default function Hero() {\n  return (\n    \u003cmotion.section initial={{ opacity: 0 }} animate={{ opacity: 1 }}\u003e\n      \u003ch1 className=\"text-4xl font-bold\"\u003eWelcome to RestaurantJS\u003c/h1\u003e\n      \u003cp className=\"mt-4\"\u003eExperience modern dining with us!\u003c/p\u003e\n    \u003c/motion.section\u003e\n  );\n}\n```\n\n---\n\n## Learning \u0026 Teaching Content\n\nThis project is ideal for:\n\n- Learning Next.js (App Router, SSR/SSG, routing)\n- Mastering TailwindCSS for rapid UI prototyping\n- Using animation libraries (Framer Motion, tailwindcss-animate)\n- Integrating third-party React libraries (maps, icons, date pickers)\n- Understanding component-driven design in React\n- Practicing responsive web development\n\n**Customization Tips:**\n\n- Add new pages by creating files in `app/`\n- Update menu and content in the corresponding components\n- Modify Tailwind config for branding\n- Deploy easily with Vercel for free\n\n---\n\n## Keywords\n\n`Next.js`, `React`, `TailwindCSS`, `Framer Motion`, `Static Site`, `Restaurant Website`, `Frontend`, `Animation`, `Responsive Design`, `React Components`, `Learning Project`, `Map Integration`, `UI/UX`, `Vercel Deployment`, `JavaScript`\n\n---\n\n## Deployment\n\nThe easiest way to deploy is with [Vercel](https://vercel.com/):\n\n- Push your project to GitHub\n- Import the repository into Vercel\n- Choose the default settings; Vercel will handle the build and deployment\n\nFor more details, see [Next.js deployment documentation](https://nextjs.org/docs/deployment).\n\n---\n\n## References\n\n- [Next.js Documentation](https://nextjs.org/docs)  \n- [Learn Next.js](https://nextjs.org/learn)  \n- [TailwindCSS Documentation](https://tailwindcss.com/docs)  \n- [Framer Motion Docs](https://www.framer.com/motion/)  \n- [React-Leaflet Docs](https://react-leaflet.js.org/docs/)  \n- [React-Day-Picker Docs](https://react-day-picker.js.org/)  \n- [Vercel Docs](https://vercel.com/docs)\n\n---\n\n## Conclusion\n\nThis project is a showcase of modern static site development using the React and Next.js ecosystem, featuring powerful UI frameworks and libraries to deliver a delightful learning and user experience.\n\n---\n\n## Happy Coding! 🎉\n\nFeel free to use this project repository and extend this project further!\n\nIf you have any questions or want to share your work, reach out via GitHub or my portfolio at [https://arnob-mahmud.vercel.app/](https://arnob-mahmud.vercel.app/).\n\n**Enjoy building and learning!** 🚀\n\nThank you! 😊\n\n---\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FRestaurant-1-WFoodJS--NextJS-Frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2FRestaurant-1-WFoodJS--NextJS-Frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FRestaurant-1-WFoodJS--NextJS-Frontend/lists"}