WaterZilla is a robust full-stack web application designed to streamline the online water purchasing and delivery process. Built with a powerful MERN-like stack, it features a modern React frontend and offers the flexibility of two distinct backend implementations: one using Node.js with Express, Sequelize, and MySQL, and another using Node.js with Express, Mongoose, and MongoDB.
This application provides a seamless, intuitive portal for customers to order water and track deliveries, while equipping administrators with a comprehensive dashboard to manage every aspect of the business—from customers and orders to inventory and sales reporting.
- WaterZilla - Online Water Delivery Management System
The administrative panel is a central hub for managing the entire business operation.
- Analytics Dashboard: Get a real-time overview of business performance with key metrics:
- Total Orders & Sales Figures
- Breakdown of orders by status (New, Accepted, Delivered, Cancelled)
- Total registered customers and partner companies.
- Order Management: A complete system to track and update orders throughout their lifecycle.
- View orders categorized by their status.
- Inspect individual order details, including customer information and delivery address.
- Update order status from "New" to "Accepted" or "Delivered".
- Customer Management (CRUD): Full control over the user base.
- View a complete list of registered customers.
- Access and edit detailed customer profiles, including personal and address information.
- Ability to add or remove customers from the system.
- Product & Inventory Management (CRUD): Easily manage the water bottle catalog.
- Add new water bottle products with details like name, price, quantity, size, and image.
- Images are seamlessly uploaded and managed via Cloudinary.
- Update existing product information and delete discontinued items.
- Company Management (CRUD): Manage the portfolio of water bottle companies.
- Add, view, update, and delete company profiles and logos.
- Reporting Engine: Generate insightful reports for business analysis.
- Visualize order statistics with interactive Pie and Bar charts (using Recharts).
- Export detailed sales and order reports to PDF format for documentation and meetings.
- Content Management:
- Dynamically update the public-facing "About Us" page with new text and images.
- System Notifications:
- Receive real-time notifications for key events like new orders or cancellations.
A user-friendly and secure interface for customers to interact with the service.
- Secure Authentication: Customers can register for a new account or log in securely. Authentication is handled by JWT (JSON Web Tokens).
- Product Catalog: Browse a clean, visual catalog of available water bottles.
- Order Placement: A simple and intuitive process to select a product and place an order.
- Order History & Tracking:
- View a personalized history of all past and current orders.
- Track the real-time status of each order (e.g., Accepted, Out for Delivery).
- Option to cancel an order before it is processed.
- Product Reviews:
- Read reviews from other customers on the product checkout page.
- Post new reviews to share feedback on products.
- Ability to delete their own previously posted reviews.
WaterZilla is built with a decoupled frontend and backend architecture, allowing for scalability and maintainability.
| Technology | Description |
|---|---|
| React | A JavaScript library for building user interfaces. |
| React Router | For declarative, client-side routing. |
| React Context API | For global state management (e.g., authentication). |
| Axios | Promise-based HTTP client for making API requests. |
| Tailwind CSS | A utility-first CSS framework for rapid UI development. |
| DaisyUI | A component library for Tailwind CSS. |
| Formik & Yup | For building and validating forms with ease. |
| Recharts | A composable charting library for data visualization. |
| jsPDF | For generating client-side PDFs. |
The project includes two complete, interchangeable backend implementations.
| Technology | MySQL Implementation (/server) |
MongoDB Implementation (/server2) |
|---|---|---|
| Runtime Environment | Node.js | Node.js |
| Framework | Express.js | Express.js |
| Database | MySQL | MongoDB |
| ORM / ODM | Sequelize (Object-Relational Mapper) | Mongoose (Object Data Modeling) |
| Authentication | jsonwebtoken (JWT), bcrypt (hashing) |
jsonwebtoken (JWT), bcrypt (hashing) |
| Middleware | cors, Custom Auth Middleware |
cors, Custom Auth Middleware |
Follow these instructions to set up and run the project on your local machine.
Make sure you have the following software installed:
- Node.js (v14 or newer)
- Git
- For MySQL Backend: A running MySQL server instance.
- For MongoDB Backend: A running MongoDB server instance.
git clone https://github.com/Qamar2315/Waterzilla.git
cd WaterzillaNavigate to the client directory and install the necessary dependencies.
cd client
npm installNote: The frontend is configured to communicate with the backend at http://localhost:8080.
You can run either the MySQL or the MongoDB backend.
- Navigate and Install Dependencies:
cd server npm install - Database Configuration:
- Open the
server/config/config.jsonfile. - Update the
developmentobject with your MySQL username, password, and desired database name.
"development": { "username": "your_mysql_user", "password": "your_mysql_password", "database": "waterzilla_db", "host": "127.0.0.1", "dialect": "mysql" }
- Open the
- Create Database & Run Migrations:
- From the
/serverdirectory, run the Sequelize CLI commands to set up your database schema.
# Make sure you have sequelize-cli installed globally or as a dev dependency # npm install -g sequelize-cli npx sequelize-cli db:create npx sequelize-cli db:migrate
- From the
- Navigate and Install Dependencies:
cd server2 npm install - Database Configuration:
- Open the
server2/index.jsfile. - Ensure the MongoDB connection string points to your local database instance. The default is
mongodb://127.0.0.1:27017/waterzilla.
async function main() { await mongoose.connect('mongodb://127.0.0.1:27017/waterzilla'); console.log("connected"); }
- Open the
- Seed Initial Data (Optional):
- The
/server2directory contains aseeder.jsfile to populate the database with initial admin data. To run it:
node seeder.js
- The
To run WaterZilla, you need to start both the client and your chosen backend server.
-
Start the Backend Server (from
/serveror/server2directory):npm start # Or for development with nodemon # nodemon index.js
The server will start on
http://localhost:8080. -
Start the Frontend React App (from the
/clientdirectory in a new terminal):npm start
The application will open automatically in your web browser at
http://localhost:3000.
Contributions are welcome! If you would like to contribute to WaterZilla, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourAmazingFeature). - Make your changes.
- Commit your changes (
git commit -m 'Add some amazing feature'). - Push to the branch (
git push origin feature/YourAmazingFeature). - Open a Pull Request.
This project is licensed under the MIT License. Feel free to explore, modify, and distribute WaterZilla according to the terms of the license.
For any inquiries or feedback, please reach out to: Qamar Ul Islam - [email protected]