This project is a complete web app with a frontend, backend, and database. It uses the Vue.js framework for the frontend, the Express.js framework for the backend on a Node.js app, and a MySQL database. If you want to set up this project, start here: https://github.com/mohammadrony/emarket#project-setup.
This e-commerce system features three levels of category system (category, sub-category, sub-sub-category) and some products with different pieces of information in that category. You can also search products with keywords and price ranges in a category. You can see other customer reviews for those products as well. Then, you can add as many products to the cart for 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 the email address you provided with your contact information so you can check your order at any time. On the home screen, there is also a promotion of products available.
All features available to users without logging in are also available to logged-in users. In addition, by logging in to the system or signing up, you can have a wishlist to save products in the database and find them later. You can also add a review or rating to a product. If you forget your password, you can reset it by sending a verification code. This web app also includes a user profile. You need to verify your email to create your account.
All features available to users without logging in and logged-in users are also available to admin users. As an admin, you have a custom way to create or delete a product from any category. You can also create, edit, or delete a category. You can also delete any other customer's review of a product. In the admin panel, you have a list of all registered users in your system, and you can change their role to give them admin access. You also have an order list with the user's contact information, shipping address, and product information.
This project uses many good features of 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 from visiting any 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 most 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 is used to work with different types of databases. This project worked with the MySQL database here. Media files are saved and public URLs generated. Please refer to the repository for further information on these topics. I trust that you will find this project both useful and well-structured. If you still have any questions, create an issue or ask me anyway.
- Vue.js
- State management - Vuex
- Vue routing
- Component design - Bootstrap Vue
- Payment gateway - Stripe
- Node.js
- Express.js
- RESTful API
- Authentication - Passport.js
- Mail automation - Nodemailer
- Database interfacing - Sequelize
- YouTube - The Earth Is Square - Learn Vue 3 for Beginners
- YouTube - Program With Erik - BootstrapVue introduction
- YouTube - freeCodeCamp.org - Backend frontend combining
- YouTube - Stripe Developers - Stripe Checkout
- YouTube - Academind - Uploading an Image
- YouTube - Esterling Accime - Send Email with Node.js
To clone this repository, use the following command:
git clone https://github.com/mohammadrony/emarket.git
To install server dependencies, navigate to the server directory using the following command:
cd server && npm install
To install shop dependencies, navigate to the shop directory using the following command:
cd ../shop && npm install
To configure MySQL server, use the following command:
sudo apt-get install mysql-server
You can follow this tutorial to properly configure the MySQL database server. You can use the MySQL server password as 12345678. If you use any other password, you need to change the password in the server/src/config/config.js file.
To create a database called mydb, you can use the following command after logging into the MySQL shell as the root user:
mysql -u root -p
CREATE DATABASE mydb;
After creating the database, you can exit the MySQL shell by typing:
exit
To set up payment integration with Stripe, you need to follow these steps:
- Rename the
.env2file in theserverdirectory to.env. - Create a Stripe account (if you haven't already).
- Find your Stripe secret key for the
server/.envfile on your Stripe account dashboard. - Update the Stripe publishable key in
shop/src/components/Checkout/BuyItem.vuewith the publishable key from your Stripe account.
To send emails from a Google account using a program, you need to follow these steps:
- Enable 2-step verification for your account.
- Generate an app password (a 16-digit password) for your account.
- Use this app password in the
.envfile located in theserverdirectory as follows:
EMARKET_EMAIL=<your_email>
EMARKET_PASSWORD=<your_app_password>
For more information on generating app passwords, you can refer to this Stack Overflow answer and the required steps to generate app passwords in a Google account. Additionally, you can also refer to the official Nodemailer package documentation on using Gmail account.
If you don't want to use a Gmail account to send emails, you can configure the transporter for sending email in the controller files located in server/src/controllers/*. Note that we do not publish the .env file to the public GitHub repository, as it contains secret information. You can check the .gitignore file located at the top of the directory to see what files are excluded from the repository. Here is what the .env file should look like in the server directory.
STRIPE_SECRET_KEY=<your_stripe_secret_key>
To ensure that BootstrapVue runs smoothly and 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.
Please make sure to check and match the database configuration for user, password, and database information. You can find this configuration file at server/src/config/config.js.
To add some initial data to the database for the website, run the following command:
cd server && npm run seed
Start the backend server first with the following command:
cd server && npm start
To start the Vue application in another terminal window, run the following command:
cd shop && npm run serve
Your application should be running locally on port 8080. Verify this by going to http://localhost:8080 in your web browser.
If you have any problems or suggestions, please feel free to open an issue. We will work on resolving it as soon as possible. Thank you for using our application.