waitless
waitless copied to clipboard
swrzalek
Web Queue Ordering App | Django, Vue, React, Websockets
Waitless
Vue 3, Composition API, Atomic Design, Tailwind, Websockets | React, React Query, AntD | Django Channels, Django Rest Framework, Docker, Github Actions
Web Queue Ordering App
Live queue app for premises owners, helping keeping distance and saving time for staying in line. Built with Django, React and Vue.
Table of Contents
- Features
- Demo
- Contributing
Features
- PWA for Customer: End users can order product by with app, watch it status change live and pick up when it is ready with code. Built with Vue 3 and TailwindCSS.
- Vendor Dashboard: Premises owners (vendors) have total control of orders, menus and products. Built with React and AntDesign,
- Server App: Built with Django, webserver handles live orders with websockets.
Frontend Details - Vendor App
- Built with React 17.0.2
- Ant Design for fast UI development
- React Query to keep data fresh
- useWebsocket to wrap Websocket API
PWA Details - Customer App
- Built with Vue 3
- Composables use to limit Vuex
- Atomic Design I wanted to test this approach in real live project
- TailwindCSS for tailored to the need design
- Mobile First Approach
- Designed in Figma - Link
- Progressive Web App with assets generated by this CLI
- Vue Router, Vuex, Vue-Toastification
Backend Details - Server App
- Django
- Django Rest Framework
- Django Channels
- Channels Redis
- PostgresSQL
- PyTest
- JWT Tokens
- Images upload to AWS with Boto3
- Closed in Docker container
- Github Actions for build and deploy
Demo
Want to see Waitless in action?
In order to keep it clean there are limitations on app, which is one premises per user and one live order per user . On video above you can see how it works.
Test Account: l: [email protected] p: @CBb@UZiSj9Sjzw
Test Account: Create it yourself, no email confirmation is required.
Contributing and Conclusion
I would love your contributions and help in making it better.
swrzalek