W'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.
- Live-Demo: https://restaurant-js-arnob.vercel.app/
Note: This project is implemented in JavaScript. A TypeScript version is also available at RestaurantTS-NextJS.
- Project Summary
- Features
- Technology Stack
- Project Structure
- Installation
- Running the Project
- API & Routing
- Component Walkthrough
- Learning & Teaching Content
- Keywords
- Deployment
- References
- Conclusion
- Responsive design with TailwindCSS utility-first framework
- Modern UI/UX with smooth animations (Framer Motion & TailwindCSS Animate)
- Date selection and management (date-fns, React-Day-Picker)
- Interactive map via React-Leaflet
- Dynamic iconography with Lucide-React and React-Icons
- Scroll effects and responsive queries (React-Scroll, React-Responsive)
- Google Fonts optimization (next/font)
- Modular, reusable component architecture
- Easy setup and deployment via Vercel
- Clean, semantic codebase for learning and teaching
- Framework: Next.js 14 (React-based SSR/SSG framework)
- Language: JavaScript (ES6+)
- Styling: TailwindCSS, tailwindcss-animate
- Animation: Framer Motion
- Date Handling: date-fns, React-Day-Picker
- Maps: React-Leaflet
- Icons: Lucide-React, React-Icons
- Responsive Utilities: React-Responsive, React-Scroll
- Font Optimization: next/font
- Deployment: Vercel
Note: The actual file/folder names may differ slightly depending on your customization.
/
├── app/
│ ├── page.js # Main homepage
│ └── ... # Other Next.js App Directory files
├── components/ # Reusable React components
├── public/ # Static assets (images, icons)
├── styles/ # TailwindCSS, global styles
├── package.json # Dependencies and scripts
├── tailwind.config.js # TailwindCSS configuration
├── next.config.js # Next.js configuration
└── README.md # Project documentation
-
Clone the repository:
git clone https://github.com/arnobt78/RestaurantJS--TailwindCSS-Fundamental-Project-5.git cd RestaurantJS--TailwindCSS-Fundamental-Project-5 -
Install dependencies:
Make sure you have NodeJS installed.
Then run:npm install # or yarn # or pnpm install # or bun install
Install specific packages (if not auto-installed):
npm i framer-motion date-fns react-leaflet lucide-react react-day-picker react-scroll react-icons react-responsive tailwindcss-animate
Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to view the app.
You can start editing the main page by modifying app/page.js. The app supports hot reloading for rapid development.
This project is a static front-end site and does not connect to a backend API by default.
Next.js routing is file-based; each file in the app/ directory corresponds to a route:
/→app/page.js(Homepage)- Additional pages/components can be added under
app/or as dynamic segments.
If you wish to add an API or server-side logic, refer to the Next.js API Routes documentation.
- Header & Navigation: Responsive site header, mobile-friendly nav using Tailwind's utilities
- Hero Section: Eye-catching introduction with animations (Framer Motion)
- Menu Display: Showcases featured dishes or menu categories using card components
- Reservation: Date selection with React-Day-Picker and date-fns
- Location/Map: Interactive map using React-Leaflet for showing restaurant location
- Contact Section: Clean, accessible form for user inquiries
- Footer: Social links, copyright
All components are modular and reusable.
Example (simplified):
// components/Hero.jsx
import { motion } from "framer-motion";
export default function Hero() {
return (
<motion.section initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
<h1 className="text-4xl font-bold">Welcome to RestaurantJS</h1>
<p className="mt-4">Experience modern dining with us!</p>
</motion.section>
);
}This project is ideal for:
- Learning Next.js (App Router, SSR/SSG, routing)
- Mastering TailwindCSS for rapid UI prototyping
- Using animation libraries (Framer Motion, tailwindcss-animate)
- Integrating third-party React libraries (maps, icons, date pickers)
- Understanding component-driven design in React
- Practicing responsive web development
Customization Tips:
- Add new pages by creating files in
app/ - Update menu and content in the corresponding components
- Modify Tailwind config for branding
- Deploy easily with Vercel for free
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
The easiest way to deploy is with Vercel:
- Push your project to GitHub
- Import the repository into Vercel
- Choose the default settings; Vercel will handle the build and deployment
For more details, see Next.js deployment documentation.
- Next.js Documentation
- Learn Next.js
- TailwindCSS Documentation
- Framer Motion Docs
- React-Leaflet Docs
- React-Day-Picker Docs
- Vercel Docs
This 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.
Feel free to use this project repository and extend this project further!
If you have any questions or want to share your work, reach out via GitHub or my portfolio at https://arnob-mahmud.vercel.app/.
Enjoy building and learning! 🚀
Thank you! 😊