Weirdstore

Welcome to weirdstore, your one-stop solution for managing your store with a touch of uniqueness!

Table of Contents

• Introduction
• Features
• Images and Video
• Technologies Used
• Why Redux RTK
• Installation
• Dockerization
• Usage
• Contributing
• Postman Collection
• License

Introduction

Weirdstore is a comprehensive and innovative store management system designed to simplify and enhance the way you run your store. Whether you are managing a small boutique or a large retail chain, weirdstore provides the tools you need to succeed.

IMAGES AND VIDEO

shop.webm

Features

• User-friendly Interface: An intuitive and easy-to-navigate interface.
• Inventory Management: Keep track of your stock with ease.
• Sales Tracking: Monitor your sales and performance.
• Customer Management: Manage customer information and interactions.
• Customizable Settings: Tailor the system to meet your specific needs.
• Security: Robust security measures to protect your data.

Technologies Used

• React: For building the user interface.
• Tailwind CSS: For styling the components.
• Redux Toolkit (RTK): For state management.
• Node.js: For the backend server.
• Express.js: For handling backend routes.
• MongoDB: For the database.

Why Redux RTK

Redux Toolkit (RTK) is used in weirdstore for the following reasons:

• Simplified Configuration: RTK simplifies the setup process and reduces boilerplate code.
• Improved Performance: RTK provides performance optimizations out of the box.
• Enhanced Readability: RTK improves code readability and maintainability.
• Integrated Best Practices: RTK includes best practices for using Redux, making it easier to write robust and scalable code.

Postman Collection

Easily test and interact with the weirdstore API using Postman. Click the button below to fork the collection and get started:

Installation

Follow these steps to install weirdstore on your local machine:

1. Clone the repository:

   git clone https://github.com/doguhannilt/weirdstore.git
   cd weirdstore

2. Install dependencies:

   npm install

3. Run the application:

   npm start

Usage

Once the application is up and running, you can access the following features:

• Dashboard: Get an overview of your store's performance.
• Inventory: Add, edit, or remove products from your inventory.
• Sales: Record and track sales transactions.
• Customers: Manage customer profiles and order history.
• Reports: Generate reports to analyze your business metrics.

Contributing

We welcome contributions from the community! If you would like to contribute to weirdstore, please follow these steps:

1. Fork the repository:

   git fork https://github.com/doguhannilt/weirdstore.git

2. Create a new branch:

   git checkout -b feature/your-feature-name

3. Make your changes and commit them:

   git commit -m "Add new feature"

4. Push to the branch:

   git push origin feature/your-feature-name

5. Create a Pull Request: Submit your changes for review.

Dockerization

Weirdstore Backend Setup

This document describes how to set up and run the doguhannilt/weirdstore-backend Docker container, including how to connect it to a MongoDB instance.

Prerequisites

• Docker installed on your system.
• Docker Compose (if using Docker Compose for multi-container setups).

Steps to Set Up and Run

1. Clone the Repository

   First, clone the repository containing the Docker setup:

   git clone https://github.com/weirdstore.git
   cd your-repository

2. Create a Docker Network

   Create a Docker network if it does not already exist. This network will allow your containers to communicate with each other:

   docker network create weirdstore

3. Run MongoDB Container

   Start a MongoDB container on the weirdstore network. This example uses the official MongoDB Docker image:

   docker run -d --network weirdstore --name mongo mongo:latest

4. Run the Backend Container

   Start the doguhannilt/weirdstore-backend container on the same network:

   docker run -d --network weirdstore --name backend -e MONGO_URI=mongodb://mongo:27017/ doguhannilt/weirdstore-backend

   Here, the MONGO_URI environment variable is set to point to the MongoDB container (mongo) on the weirdstore network.

5. Verify Container Status

   Check if both containers are running:

   docker ps

   You should see both mongo and backend containers listed.

6. Access Logs

   To view the logs of the backend container:

   docker logs backend

   To view the logs of the MongoDB container:

   docker logs mongo

Troubleshooting

• Cannot connect to MongoDB: Ensure that the MongoDB container is running and accessible. Verify the MONGO_URI is correctly set in the backend container.
• MongoDB container not found: Double-check that the MongoDB container is running on the weirdstore network and that you used the correct container name in the MONGO_URI.

Cleaning Up

To stop and remove the containers and network when you are done:

docker stop backend mongo
docker rm backend mongo
docker network rm weirdstore

Acknowledgements

We would like to extend our heartfelt thanks to the following individuals for their invaluable tutorial videos that helped in the development of weirdstore:

• HuXn WebDev: For their comprehensive tutorials on modern web development.
• Dave Gray: For his insightful videos on JavaScript and React.
• Lama Dev: For providing detailed guides on frontend development and best practices.

Admin Control

Admin Capabilities	Description
Create User	Admins can create new user accounts through the navigation bar.
Create Product	Admins can add new products to the inventory via the navigation bar.
Update Product	Admins can update existing product details using the navigation bar.
Delete Product	Admins can remove products from the inventory through the navigation bar.

Video

• Note: Some of features are still buggy, feel free to fix them.

Weirdstore-1.webm

Weirdstore-2.webm

License

This project is licensed under the MIT License. See the LICENSE file for details.

Feel free to replace the placeholder links with actual URLs and customize the content further to fit your project's specifics.

Weirdstore Project Dependencies

Backend Package Dependencies

Dependencies

• bcryptjs: ^2.4.3
• concurrently: ^8.2.2
• cookie-parser: ^1.4.6
• cors: ^2.8.5
• dotenv: ^16.4.5
• express: ^4.19.2
• express-async-handler: ^1.2.0
• express-formidable: ^1.2.0
• jsonwebtoken: ^9.0.2
• mongoose: ^8.4.1
• multer: ^1.4.5-lts.1
• nodemon: ^3.1.3

Frontend Package Dependencies

Dependencies

• @paypal/react-paypal-js: ^8.4.0
• @reduxjs/toolkit: ^2.2.5
• apexcharts: ^3.49.1
• axios: ^1.7.2
• flowbite: ^2.3.0
• moment: ^2.30.1
• react: ^18.2.0
• react-apexcharts: ^1.4.1
• react-dom: ^18.2.0
• react-icons: ^5.2.1
• react-redux: ^9.1.2
• react-router: ^6.23.1
• react-router-dom: ^6.23.1
• react-slick: ^0.30.2
• react-toastify: ^10.0.5
• slick-carousel: ^1.8.1

Dev Dependencies

• @types/react: ^18.2.66
• @types/react-dom: ^18.2.22
• @vitejs/plugin-react: ^4.2.1
• autoprefixer: ^10.4.19
• eslint: ^8.57.0
• eslint-plugin-react: ^7.34.1
• eslint-plugin-react-hooks: ^4.6.0
• eslint-plugin-react-refresh: ^0.4.6
• postcss: ^8.4.38
• tailwindcss: ^3.4.4
• vite: ^5.2.0

Docker

Note: 19 June 2024 Docker Added

Service	Docker Hub Link
Frontend	Frontend Docker
Backend	Backend Docker