{"id":23282586,"url":"https://github.com/mohammadrony/emarket","last_synced_at":"2025-08-21T13:33:35.485Z","repository":{"id":132791847,"uuid":"314507162","full_name":"mohammadrony/emarket","owner":"mohammadrony","description":"An e-commerce web application in Vue.js Framework with Vuex state management, Stripe payment gateway, Node.js backend and MySQL database.","archived":false,"fork":false,"pushed_at":"2024-05-20T16:29:26.000Z","size":17950,"stargazers_count":16,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-20T19:44:44.787Z","etag":null,"topics":["authentication-middleware","backend-server","bootstrap-vue","database-management","expressjs","frontend-framework","jwt","mail-automation","mysql","nodejs","nodejs-framework","passportjs","payment-gateway","restfull-api","sequelize","state-management","stripe-api","vue-router","vuejs","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohammadrony.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-20T09:32:26.000Z","updated_at":"2024-05-20T16:29:29.000Z","dependencies_parsed_at":"2024-03-21T20:03:45.963Z","dependency_job_id":null,"html_url":"https://github.com/mohammadrony/emarket","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadrony%2Femarket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadrony%2Femarket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadrony%2Femarket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammadrony%2Femarket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohammadrony","download_url":"https://codeload.github.com/mohammadrony/emarket/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230516347,"owners_count":18238381,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication-middleware","backend-server","bootstrap-vue","database-management","expressjs","frontend-framework","jwt","mail-automation","mysql","nodejs","nodejs-framework","passportjs","payment-gateway","restfull-api","sequelize","state-management","stripe-api","vue-router","vuejs","vuex"],"created_at":"2024-12-20T00:18:07.360Z","updated_at":"2024-12-20T00:18:07.974Z","avatar_url":"https://github.com/mohammadrony.png","language":"Vue","readme":"# Vue.js and Node.js Web Application with MySQL Database\n\n## Project Overview\n\nThis is an e-commerce web application with a frontend, backend, and database. It uses Vue.js framework for frontend, Express.js framework for the backend with Node.js, and MySQL database. Instructions for the project setup are [here](https://github.com/mohammadrony/emarket#project-setup).\n\n### Project UI Overview\n\n#### For Users without Logging In\n\nThis e-commerce system features **three levels of category system** (category, sub-category, sub-sub-category) and some products with necessary information in each category. You can also **search for products** with keywords and price ranges in a category. You can see other **customer reviews** for those products as well. Then, you can **add products to your cart and checkout**. To checkout with your product in your cart, you need to provide shipping information and some contact information. Then, you have to pay the bill with your card using the **Stripe checkout method**, and your order will be placed. A link will be sent to your email to **monitor your order status** with the contact information and the products you are buying. On the home screen, there is a **promotion of products** available for new and top selling products.\n\n#### For Users Logging In\n\nIncluding features from above. By logging in to the system or signing up, you can use **wishlist to save products** for you and find them later. You can also **add a review and rating to any product**. You need to **verify your email** to create your account. If you forget your password, you can **reset password by sending a verification mail**. This web app also includes a **user profile with your activities**.\n\n#### For Admin Users\n\nIncluding features from above. As an admin, you have a custom way to **create or delete a product** from any category. You can **create, edit, or delete any category** from the list. You can also **delete a users review** of any product. You can use the **admin panel**, with the list of all registered users in your system, and you can **change user role** in the application. You can also access the **order list** with the user's contact information, shipping address, and product information.\n\n### Programming Overview\n\n#### Frontend Description\n\nThis project is implemented in Vue.js(version 2). The web app features **state management with multiple modules** in the store directory. For the frontend, there's an authentication process with a **reset password** feature that includes email automation. By using **Stripe's payment method**, the web app can process different kinds of cards and currencies supported by Stripe. From the routing pages, you'll find detailed code about how to **restrict someone visiting a route** and show a default page for an **unauthenticated request or any wrong URL** entered. There are also other features, including real-time updates without reloading the page, and more.\n\n#### Backend Description\n\n**RESTful APIs** and authentication management are the two important parts of the backend. The **session middleware and JWT authentication** helped get data from the database securely. Most of the **email automation** is done in the backend. The payment session is generated, and **Sequelize ORM** can be used to work with different types of databases. This project worked with the MySQL database here. **Media files are saved** and public URLs generated. I hope you find this project useful. If you still have any questions, create an issue or ask me anyway.\n\n### Topics included in the project\n\n#### Frontend\n\n- [Vue.js](https://vuejs.org/)\n- [State management - Vuex](https://vuex.vuejs.org/)\n- [Vue routing](https://vuejs.org/v2/guide/routing.html)\n- [Component design - Bootstrap Vue](https://bootstrap-vue.org/)\n- [Payment gateway - Stripe](https://stripe.com/)\n\n#### Backend\n\n- [Node.js](https://nodejs.org/en/)\n- [Express.js](http://expressjs.com/)\n- [RESTful API](https://en.wikipedia.org/wiki/Representational_state_transfer)\n- [Authentication - Passport.js](http://www.passportjs.org/)\n- [Mail automation - Nodemailer](https://nodemailer.com/about/)\n- [Database interfacing - Sequelize](https://sequelize.org/)\n\n#### Database\n\n- [MySQL](https://www.mysql.com/)\n\n#### Tutorials followed\n\n- [YouTube - The Earth Is Square - Learn Vue 3 for Beginners](https://www.youtube.com/watch?v=ZqgiuPt5QZo)\n- [YouTube - Program With Erik - BootstrapVue introduction](https://www.youtube.com/watch?v=-DyKeMa5tYY\u0026list=PL-lxoPS_1OXWb4BlDuSsUrkq66hM5pG33)\n- [YouTube - freeCodeCamp.org - Backend frontend combining](https://www.youtube.com/watch?v=Fa4cRMaTDUI\u0026list=PLWKjhJtqVAbnadueQ-C5keMQQiQau_i0D)\n- [YouTube - Stripe Developers - Stripe Checkout](https://www.youtube.com/watch?v=UjcSWxPNo18)\n- [YouTube - Academind - Uploading an Image](https://www.youtube.com/watch?v=srPXMt1Q0nY)\n- [YouTube - Esterling Accime - Send Email with Node.js](https://www.youtube.com/watch?v=Va9UKGs1bwI)\n\n## Project Setup\n\n### Cloning the repository\n\n```bash\ngit clone https://github.com/mohammadrony/emarket.git\n```\n\n### Configuring MySQL server\n\nInstall MySQL package\n\n```bash\nsudo apt install -y mysql-server\n```\n\nSetup root user password\n\n```bash\nsudo mysql\n\u003e ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '12345678';\n```\n\nYou can follow [this tutorial](https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-22-04) to configure the MySQL server in Ubuntu.\n\nCreate a new MySQL database\n\n```bash\nmysql -u root -p\n\u003e CREATE DATABASE emarket;\n\u003e exit\n```\n\n### Setting up environment variables\n\n#### Stripe payment Integration\n\n1. Rename the `.env.template` file in the `server` directory to `.env`.\n\n2. Find your Stripe secret key for the `server/.env` file on your [Stripe account dashboard](https://dashboard.stripe.com/test/apikeys).\n\n   ```env\n   STRIPE_SECRET_KEY=\u003cstripe_secret_key\u003e\n   ```\n\n3. Update the Stripe publishable key in `shop/src/components/Checkout/BuyItem.vue` from your Stripe account.\n\n   ```env\n   const stripeInit = loadStripe(\u003cstripe_publishable_key\u003e);\n   ```\n\n#### Email automation\n\nSending emails from a gmail account\n\n1. Enable [2-step verification](https://myaccount.google.com/signinoptions/two-step-verification) for your Google account.\n\n2. Generate an [app password](https://myaccount.google.com/apppasswords) (16-digit password) for your account.\n\n3. Use this app password in the `.env` file in the `server` directory in the following format:\n\n   ```env\n   EMARKET_EMAIL=\u003cemail_address\u003e\n   EMARKET_PASSWORD=\u003capp_password\u003e\n   ```\n\nFor more detailed information on generating app passwords, refer to this [Stack Overflow answer](https://stackoverflow.com/questions/45478293/username-and-password-not-accepted-when-using-nodemailer) and these [steps to generate app passwords](https://www.getmailbird.com/gmail-app-password/) in Google account.\n\n*If you use some other mail provider to send email, you will need to update the transporter configuration in `server/src/controllers/` files.*\n\n### BootstrapVue package recommendation\n\nTo ensure that BootstrapVue runs properly without any component issues, it is recommended to use the `vue@2.6.12` and `bootstrap@4.6.1` versions of the packages mentioned by [BootstrapVue](https://bootstrap-vue.org/docs).\n\n### Re-check database configuration\n\nPlease make sure to check and match the database configuration for user, password, and database information in `server/src/config/config.js` file.\n\n### Installing server dependencies\n\nInstall server dependencies from `server` directory\n\n```bash\ncd server \u0026\u0026 npm install\n```\n\n### Installing shop dependencies\n\nInstall shop dependencies from `shop` directory\n\n```bash\ncd shop \u0026\u0026 npm install\n```\n\n### Upload some data for the website\n\nPopulate the database with some dummy data\n\n```bash\ncd server \u0026\u0026 npm run seed\n```\n\n### Start backend server\n\n```bash\ncd server \u0026\u0026 npm start\n```\n\n### Start frontend application\n\n```bash\ncd shop \u0026\u0026 npm run serve\n```\n\n### Browse the application\n\nYour application should be running on \u003chttp://localhost:8080\u003e and your private network.\n\nThank you.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadrony%2Femarket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammadrony%2Femarket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadrony%2Femarket/lists"}