diff --git a/README.md b/README.md index c1652f3..5c94432 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,136 @@ -# DigistabStore +# DigistabStore - A modern E-Comerce Plataform -To start your Phoenix server: +Hi, welcome to Digistab Store! 👋
+This is my portfolio project showcasing a modern e-commerce platform built with Elixir and Phoenix LiveView. I created this project to demonstrate my expertise in building real-time web applications with a focus on user experience and my skills with all that LiveView has to provide. - * Run `mix setup` to install and setup dependencies - * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server` -Now you can visit [`localhost:4000`](http://localhost:4000) from your browser. +## ✨ Key Features -Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html). +### Real-time Product Management +- Dynamic product creation and editing with live updates +- Rich text description editor for detailed product information +- Multi-image upload with S3 integration +- Smart price and stock management -## Learn more +### Smart Search & Organization +- Category-based product organization +- Real-time search with instant results +- Tag system for flexible product classification +- Featured products carousel - * Official website: https://www.phoenixframework.org/ - * Guides: https://hexdocs.pm/phoenix/overview.html - * Docs: https://hexdocs.pm/phoenix - * Forum: https://elixirforum.com/c/phoenix-forum - * Source: https://github.com/phoenixframework/phoenix +### Modern User Experience +- Responsive design that works on all devices +- Real-time updates without page refreshes +- Image galleries with lazy loading +- Clean, intuitive interface + +## 🛠 Technology Choices + +That's some technologies that I have mastered: + +### Backend +- **Elixir & Phoenix**: For scalability and real-time features +- **PostgreSQL**: Reliable data storage with powerful querying capabilities, and an amazing relation with Ecto. + +### Frontend +- **Phoenix LiveView**: Enabling rich, real-time user experiences without complex JavaScript +- **TailwindCSS**: For rapid UI development and consistent design +- **AlpineJS**: Lightweight JavaScript for enhanced interactivity +- **Hero Icons**: Beautiful, consistent iconography + +### Infrastructure +- **AWS S3**: Scalable image storage +- **AWS CodeDeploy**: Automated deployment pipeline +- **GitHub Actions**: CI/CD automation + +## 🚀 See It In Action + +Visit the live demo: [DigistabStore Demo](https://digistab-store.alissonmachado.dev/) + +### Preview Screenshots +![image info](./readme/default.png) +![image info](./readme/new_product.png) +![image info](./readme/show_product.png) + + + +### 👨‍💻 What you can do? + +In this early version, you can do some basic things: + +- Main page with product list, search bar, and a beautiful hero made with AlpineJS. +- Filter items by name or description in the search bar. +- Add products. +- View details about the product in show page. +- Edit the existent products (photo edit not available yet). + + +### 🌟 What's Next? + +I'm continuously improving this project. Here are some features I'm planning to add: + +- Advanced search filters +- User authentication +- Shopping cart functionality +- Order management system +- Payment integration + + +## 💻 Local Development + +Want to run this project locally? Here's how: + +1. Prerequisites: + ```bash + # Versions I used for development + elixir 1.17 + erlang 27 + postgres 12+ + node 18+ + ``` + +2. Setup: + ```bash + # Install dependencies + mix setup + + # Start the server + mix phx.server + ``` + +Visit [`localhost:4000`](http://localhost:4000) to see the application running. + +## 🎓 Learning Resources + +During the development of this project, I found these resources particularly helpful: + +- [Phoenix LiveView Documentation](https://hexdocs.pm/phoenix_live_view) +- [Elixir School](https://elixirschool.com/) +- [TailwindCSS Documentation](https://tailwindcss.com/) +- [AlpineJS Documentation](https://alpinejs.dev/) + + diff --git a/readme/default.png b/readme/default.png new file mode 100644 index 0000000..8af6124 Binary files /dev/null and b/readme/default.png differ diff --git a/readme/new_product.png b/readme/new_product.png new file mode 100644 index 0000000..1b53f24 Binary files /dev/null and b/readme/new_product.png differ diff --git a/readme/show_product.png b/readme/show_product.png new file mode 100644 index 0000000..6600400 Binary files /dev/null and b/readme/show_product.png differ