Giter VIP home page Giter VIP logo

maxime1992 / pizza-sync Goto Github PK

View Code? Open in Web Editor NEW
166.0 17.0 48.0 59.08 MB

Pizza-Sync is a web app built on the frontend with angular, ngrx and on the backend with Nest. It let you and your friends/colleagues choose a pizza before placing a group order. Built using https://github.com/maxime1992/angular-ngrx-starter

License: GNU Affero General Public License v3.0

JavaScript 0.48% TypeScript 89.08% HTML 5.82% CSS 4.62%
angular ngrx socket-io nestjs parsing pizza

pizza-sync's Introduction

Image


Features

  • ๐Ÿ• Display pizzas from a given "pizza provider" (Ormeau, Ormeau with mocked data, Tutti Pizza, ...)
  • ๐Ÿ“ท Add your own pizzas pictures for a given pizza provider
  • :octocat: "Connect" with your github username (no need for auth) and display your profile picture
  • โž• Select 1 pizza or more, remove if needed
  • ๐Ÿ”Œ Realtime update with other people connected
  • ๐Ÿ’ธ Choose pizzas by size/price
  • ๐Ÿ”Ž Choose pizzas by ingredients, even if the pizza provider website doesn't provide this feature!
  • ๐Ÿ”ค Search pizza(s) by name
  • ๐Ÿ’ซ Display an "easy order view" with pizzas grouped by their names
  • ๐Ÿ““ Download a CSV file that you can open with Calc or Excel to handle the money for the current order (who already paid and how much)
  • โณ Set a countdown to limit the time of the order (from command line, realtime update on clients)
  • ๐ŸŽฎ Possibility to implement your own pizza provider (with an helper class to keep things easy)
  • ๐Ÿ”ง Possibility to implement new commands (with an helper class too)
Image Image
Enter your name or Github nickname.. ..and sign in.
Image Image
See connected people and their order(s).. ..or how a pizza looks like.
Image Image
Find your favourite pizza by name.. ...or by ingredients.
Image Image
Discover which ingredients are still available during a search. Access the easy order view before making a phone call.
Image Image
Admin can set the countdown.. ..but also the list of providers and choose one

Why ?

This project has been built to easily order pizzas with my former colleagues.

We usually ordered at l'Ormeau and thus, the backend part of the project is parsing this website.
(note: at the time I built the app, L'Ormeau website was like that)

Pizza-Sync also accepts others pizzas-providers! So if you want to use it with your local pizzeria, you'd just have to add a new pizza-provider that parses the website.

Is it just about Pizza ?

It could ๐Ÿ• โค๏ธ ... But not totally.

It's also a demo to show how to use Angular with the following stack :

  • @angular/cli
  • @angular/material
  • @angular/flex-layout
  • @ngrx/store
  • @ngrx/effects
  • @ngrx/entity
  • socket.io

And NestJs on the backend.

This is a medium size project, not too complicated but still, with a lot of things in it (normalized data with Redux, real time, little cli to interact with the app in real time from command line on the server, ...). If you see things to improve, feel free to open an issue, or even better: Make a PR!

How do I run it locally ?

Dev mode

Terminal 1 :

cd backend
yarn
yarn run start:watch

Then a prompt pizza-sync$ will appear. It's up to the admin to decide when the app should stop accepting orders. Admin can change the countdown on the fly. To do that simply run the following command into the prompt countdown --hour X --minute Y with X = 11 and Y = 20 for example. The app will update the countdown in realtime on the frontend. Even if the countdown has already reached 0, you can run this command multiple times.

Terminal 2 :

cd frontend
yarn
yarn start

You'll then be able to open the app at : http://localhost:4200.

Docker mode (for production use)

There are 2 Dockerfiles:

  • Dockerfile.api - Run the node server containing the API (HTTP + Socket)
  • Dockerfile.nginx - Run an nginx server which serves static assets directly and let HTTP + Sockets go through

The simplest way to run them both:

docker-compose up

If you do not want to use docker-compose, you can build and run them separately:

# terminal 1
docker build -f Dockerfile.api -t pizza-sync-api .
docker run -it --rm --name pizza-sync-api pizza-sync-api

# terminal 2
docker build -f Dockerfile.nginx -t pizza-sync-nginx .
docker run -it --rm -p 3000:80 --name pizza-sync-nginx --link pizza-sync-api:pizza-sync-api pizza-sync-nginx

Then just go to http://localhost:3000.

When using docker-compose, you'll see the logs of the API but also the logs from NGINX.
If you want to run commands on the API (countdown, providers, provider, etc) you need to do the following, into another terminal:

docker-compose up
docker ps
# look for the ID of the API container, let's call it API-ID
docker attach API-ID

Contribution

Any contribution is very welcome โœจ !

There are plenty of things to do with this small project. Here are some ideas :

  • Improve the layout (theme, responsiveness, logo, ...)
  • Angular universal ? Having a super fast init would be awesome !
  • Create a PWA with at least a service worker to cache the assets
  • Add mocks to run the app without the backend
  • Deploy the app on Github pages (needs mocks first)

You can also take a look into the issues and pick up one which is not already assigned.


Image Pizza-Sync logos have been designed by Happyksu!

pizza-sync's People

Contributors

alagane avatar albinscode avatar happyksu avatar kevincaradant avatar maxime1992 avatar ppaysant avatar sgarciabordes avatar victornoel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pizza-sync's Issues

Can't connect

Steps to reproduce:

  • be unlogged
  • load pizza-sync web page in your browser
  • before login box appears, click on pizza (any one)

The pizza img appears, maximized, but never, never you will see the login box again.
You need to reload to log.

Setup NestJs for the backend

I've been keeping an eye on NestJs for few months and it seems to be really amazing.

Typescript, decorators, on top of express, websocket integration, syntax similar to Angular... Pizza-Sync seems to be the perfect candidate for a first app with NestJs!

Setup Travis as CI

We definitely miss some E2E and unit tests.

Once they're here, Travis would be a nice fit for CI.

Would also be useful to enforce lint + prettier checks!

Split backend (Models - Controllers)

As the app is growing up, the backend was designed in the most simple way at the beginning.

It would be a good idea to split it into models and controllers.

use images from the public folder instead of looking up within frontend

Thanks to PR #51 (with docker), I noticed a weird thing in code:

I decided to use the local images directly from the frontend folder instead of using the ones from backend/public.

This is because while we develop, we don't have to build the frontend and put it in backend/public.

But with Docker, we only keep the backend folder and thus, we loose all local pictures.

Setup Cypress and make some E2E tests

E2E tests are definitely missing here and I ended up breaking the export as CSV function after a library update which removes an rxjs operator I was using...

Cypress seems to be the perfect replacement for protractor and Pizza-Sync seems to be an excellent playground to play around!

Question about importing _colors.scss

Terrific sample project, by the way.

According to https://material.angular.io/guide/theming

The theme file should not be imported into other SCSS files. This will cause duplicate styles to be written into your CSS output. If you want to consume the theme definition object (e.g., $candy-app-theme) in other SCSS files, then the definition of the theme object should be broken into its own file, separate from the inclusion of the mat-core and angular-material-theme mixins.

I'm (very) new to scss and Angular Material, so I may be miss-interpreting this, but where you
@import '../../styles/shared/_colors';

eg in features.component.scss
isn't this doing just what the above tells us not to do, as mat-core is included in _colors.scss?

create a docker for the API, another for static assets with Nginx

Node is single thread and serving the assets from the backend is really a bad idea.

The refactor of the backend to use Nest doesn't even serve the public folder in production anymore.

Nginx seems well suited for that use case:

  • serve static content
  • let HTTP calls to the api go through
  • let websockets go through

Logo Design Proposal for Pizza-sync

Hi, my name is Ksenia. I'm a graphic designer and I'd like to collaborate on your open source project and propose free logo design for your project. If it's something you're interested in, please, let me know!

Best regards,
Ksenia

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.