This project was my first project with the Laravel framework. I wanted to create a dynamic E-Commerce website, so I choose to use the Laravel/Livewire tech stack. Additionally, I used vanilla JS, some library like HTMX and Swiper, and Bootstrap for the front end part. I also used the Pusher websocket to create real-time notifications.
Tip
You can use the Dockerfile as well as the docker-compose file if you want to test this app.
git clone https://github.com/NullBrunk/CyberShop && cd CyberShop
docker-compose up --buildNote
- The Web application is hosted on the port
80 - The API is hosted on the port
8000 - The SMTP mail client is hosted on the port
8025(you'll receive the mail confirmation here when you signup)
The products are sorted by categories. Each category has its own search bar, and there is a general search bar that searches across all categories.
On the product display pages, you can see the products, their names, categories, prices, and average rating.
overview.mp4
You can create an account with whatever email address you want, but you’ll need to validate it by clicking on the link sent by email. You can reset your password using the same email address.
login_signup_reset.mp4
As you can see, livewire is used for the dynamic validation.
You can sell a product by adding it in the “market” section. Give it a name, a price, a category, and a main image. You can also add secondary images.
Finally, a MD-like editor is available for the product description (bold, italic, list, strikethrough text, links and so on).
products.mp4
The drag & drop functionnality is done with filepond.js.
You can leave a comment on any product by adding a title, a rating, and your comment. Again, a markdown-like editor is available to help you style your text. Finally, you can “heart” other people’s comments.
comments.mp4
You can customize your profile by changing your profile picture, email, or password. There is also a profile page displaying the products you are selling, the number of hearts your comments have received, your average product rating, the number of comments you have made, and a list of your recent comments.
profile.mp4
When you add a product to your cart, it appears in the small dynamic cart icon in the navbar. Clicking on this cart icon takes you to a more detailed page where you also have the option to buy by making the payment (we have chosen to use Stripe).
payment.mp4
I chose livewire for the dynamic cart page.
There is a chat that allows you to interact with sellers or other clients. It is dynamic and supports sending messages as well as images. Additionally, the notification component in the navbar uses WebSockets, making it real-time. Therefore, you will receive notifications instantly as they happen.
chatbox.mp4
The dynamic notification component is updated using livewire + pusher.js websocket.
- Thanks to Md-khokon for this amazing e-mail template.