An e-commerce web application in Vue.js Framework with Vuex state management, Stripe payment gateway, Node.js backend and MySQL database.
This 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.
This 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.
Including 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.
Including 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.
This 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.
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.
git clone https://github.com/mohammadrony/emarket.git
Install MySQL package
sudo apt install -y mysql-server
Setup root user password
sudo mysql
> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '12345678';
You can follow this tutorial to configure the MySQL server in Ubuntu.
Create a new MySQL database
mysql -u root -p
> CREATE DATABASE emarket;
> exit
Rename the .env.template file in the server directory to .env.
Find your Stripe secret key for the server/.env file on your Stripe account dashboard.
STRIPE_SECRET_KEY=<stripe_secret_key>
Update the Stripe publishable key in shop/src/components/Checkout/BuyItem.vue from your Stripe account.
const stripeInit = loadStripe(<stripe_publishable_key>);
Sending emails from a gmail account
Enable 2-step verification for your Google account.
Generate an app password (16-digit password) for your account.
Use this app password in the .env file in the server directory in the following format:
EMARKET_EMAIL=<email_address>
EMARKET_PASSWORD=<app_password>
For more detailed information on generating app passwords, refer to this Stack Overflow answer and these steps to generate app passwords in Google account.
If you use some other mail provider to send email, you will need to update the transporter configuration in server/src/controllers/ files.
To ensure that BootstrapVue runs properly without any component issues, it is recommended to use the [email protected] and [email protected] versions of the packages mentioned by BootstrapVue.
Please make sure to check and match the database configuration for user, password, and database information in server/src/config/config.js file.
Install server dependencies from server directory
cd server && npm install
Install shop dependencies from shop directory
cd shop && npm install
Populate the database with some dummy data
cd server && npm run seed
cd server && npm start
cd shop && npm run serve
Your application should be running on http://localhost:8080 and your private network.
Thank you.