A modern, responsive e-commerce web application built with Vue.js for fishing enthusiasts. This application provides a complete online shopping experience for fishing gear, equipment, and accessories.
- Product Catalog: Browse fishing equipment and gear
- Shopping Cart: Add, remove, and manage items
- Order Processing: Complete purchase workflow
- Customer Receipts: Digital receipt generation
- Size Guide: Interactive sizing modal for products
- User Authentication: Secure login and registration
- User Profiles: Personal account management
- Favorites System: Save preferred products
- Order History: Track past purchases
- Responsive Design: Mobile-first approach with Tailwind CSS
- Interactive Modals: Smooth user interactions
- Category Navigation: Organized product browsing
- Modern UI/UX: Clean and intuitive interface
- Vue.js 3 - Progressive JavaScript framework
- Vue Router - Official routing library
- Pinia/Vuex - State management
- Tailwind CSS - Utility-first CSS framework
- lucide-vue-next - icons for use
- Vite - Next generation frontend tooling
- PHP - PHP runtime
- ES6+ - Modern JavaScript features
- Component-based Architecture - Modular development
- Single File Components - Vue SFC structure
fishing-store/
├── 📄 README.md # Project documentation
├── 📄 index.html # Main HTML template
├── 📦 package.json # Dependencies and scripts
├── ⚙️ vite.config.js # Vite configuration
├── ⚙️ tailwind.config.js # Tailwind CSS configuration
├── 📁 public/ # Static assets
│ ├── 🖼️ fishingLogo.png # Application logo
│ └── 🖼️ vite.svg # Vite logo
└── 📁 src/ # Source code
├── 📄 App.vue # Root component
├── 📄 main.js # Application entry point
├── 🎨 style.css # Global styles
├── 📁 assets/ # Project assets
│ ├── 🖼️ vue.svg # Vue logo
│ ├── 🖼️ preview.png # Preview images
│ └── 🖼️ preview_add.png
├── 📁 components/ # Reusable components
│ ├── 🧩 navbar.vue # Navigation bar
│ ├── 🧩 footer.vue # Footer component
│ └── 🧩 modal_form.vue # Modal form component
├── 📁 router/ # Routing configuration
│ └── 📄 index.js # Route definitions
├── 📁 stores/ # State management
│ └── 📄 auth.js # Authentication store
└── 📁 views/ # Page components
├── 🏠 homePage.vue # Home page
├── 🛒 card.vue # Shopping cart
├── 📋 order_product.vue # Order processing
├── 🧾 customer_receipt.vue # Receipt view
├── 📏 Size_Guide_Modal.vue # Size guide modal
├── 🔧 modal.vue # Generic modal
├── 📁 categories/ # Category-related views
│ ├── ❤️ add_favorite.vue # Add to favorites
│ ├── 📋 cate_demo.vue # Category demo
│ └── 📄 cate_detail.vue # Category details
└── 📁 mod/ # Module components
├── 🔐 AuthModal.vue # Authentication modal
├── 🔐 AuthView.vue # Authentication view
├── ❤️ FavoriteButton.vue # Favorite button
└── 👤 Registration_user.vue # User registration
Before running this project, make sure you have the following installed:
- Node.js (v22.12.0 or higher)
- npm (v8.0.0 or higher) or yarn
- Git for version control
-
Clone the repository
git clone https://github.com/yourusername/fishing-store.git cd fishing-store -
Install dependencies
npm install # router npm install vue-router # icon npm install lucide-vue-next # axios npm install axios
-
Environment setup (if needed)
cp .env.example .env # Edit .env file with your configuration
npm run dev
# or
yarn devThe application will be available at http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build locallynpm run lint- Run ESLintnpm run format- Format code with Prettier
npm run build
# or
yarn buildThe built files will be in the dist/ directory, ready for deployment.
| Component | Description |
|---|---|
App.vue |
Root application component |
navbar.vue |
Main navigation bar |
footer.vue |
Site footer |
modal_form.vue |
Reusable modal form |
| View | Purpose |
|---|---|
homePage.vue |
Landing page with featured products |
card.vue |
Shopping cart management |
order_product.vue |
Order processing and checkout |
customer_receipt.vue |
Order confirmation and receipt |
| Component | Functionality |
|---|---|
AuthModal.vue |
Login/signup modal |
AuthView.vue |
Authentication page |
Registration_user.vue |
User registration form |
| Component | Feature |
|---|---|
add_favorite.vue |
Add products to favorites |
FavoriteButton.vue |
Toggle favorite status |
Size_Guide_Modal.vue |
Product sizing information |
Add screenshots of your application here
- Homepage
- Product catalog
- Shopping cart
- User authentication
- Mobile responsive views
We welcome contributions to the Fishing Store project! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Make your changes
- Commit your changes
git commit -m 'Add some amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow Vue.js best practices
- Use Tailwind CSS for styling
- Write clear, descriptive commit messages
- Add comments for complex logic
- Test your changes thoroughly
This project is licensed under the MIT License - see the LICENSE.md file for details.
If you have any questions or need help getting started
- 📧 Email: namtola4444@gmail.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
- Vue.js community for the amazing framework
- Tailwind CSS team for the utility-first CSS framework
- All contributors who help improve this project
Happy Fishing! 🎣
Built with ❤️ for the fishing community