orassayag / pizza-restaurant

Next.js Custom hooks Tailwind CSS (My first project with this framework, instead of CSS modules). Socket.IO-Client @headlessui/react + framer-motion (For the cool animations). fontawesome (For the cool fonts). chance (For randomizing users). sass (To support SCSS). yup (Validation)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pizza Restaurant

A very cool project - A Pizza Restaurant management.

SERVER:

Node.js TypeScript MongoDB Socket.IO Express Winston (As a local logger). chance (For randomizing workers).

CLIENT:

Next.js Custom hooks Tailwind CSS (My first project with this framework, instead of CSS modules). Socket.IO-Client @headlessui/react + framer-motion (For the cool animations). fontawesome (For the cool fonts). chance (For randomizing users). sass (To support SCSS). yup (Validation). Ho, and.. shhh... don't tell Domino's Pizza I took their slices images (CSS Sprite) from them.. It will be our secret. :)

Getting Started

Instructions:

  1. Since I didn't make it on a container (Lake of time), please make sure to have MongoDB installed on your PC.
  2. Fork the project or download it.
  3. Open the server project.
  4. On the terminal: npm i
  5. Once finished, on terminal: npm run dev
  6. Wait for MongoDB and Socket.IO to be up.
  7. Open the client project.
  8. On the terminal: npm i
  9. Once finished, on terminal: npm run dev
  10. Wait for the client to connect to the server's Socket.IO.
  11. Once the UI is up, click on the red "Order" button and make some yummy pizzas.
  12. Once you click on the "Checkout" button you will start to see all your orders.
  13. Let the show begin and happy testing! :)
  14. If, for some reason, you submitted orders and you don't see them, reload the page. If it's not work, restart the server (& the client if needed).

Author

License

This application has an MIT license.

About

Next.js Custom hooks Tailwind CSS (My first project with this framework, instead of CSS modules). Socket.IO-Client @headlessui/react + framer-motion (For the cool animations). fontawesome (For the cool fonts). chance (For randomizing users). sass (To support SCSS). yup (Validation)


Languages

Language:TypeScript 46.9%Language:JavaScript 42.3%Language:SCSS 10.0%Language:CSS 0.8%