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
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/Ozleblebici/emarket.git
!! If you get an error, install nodejs and npm : use these specific versions!
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
Step 1- If you have MySQL Server and got your password, go down: (if not GO TO STEP 2)
Create a database called mydb
in local server with givin script or do it with MySql menu options and SKIP STEP 2
CREATE DATABASE mydb;
Manual way (via MySql Workbench app) :
1. Connect to localhost
2. In the MySQL Workbench window that opens, click the Create a new schema in the connected server button on the main toolbar. Then enter the schema name, change the character set and collation if necessary, and click Apply.
3. In the Apply SQL Script to Database window that opens, click Apply. Then click Finish.
4. Check that the database has appeared in the Navigator.
THEN DO NOT TOUCH IT. DO NOT CREATE ANYTHING IN DB MANUALLY , SKIP STEP 2
Step 2- To configure MySQL server, use the following command:
sudo apt-get install mysql-server
To setup root user password
sudo mysql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '12345678';
To properly configure the MySQL database server, you can refer to the tutorial available at this link. For the purpose of this project, make sure to set the MySQL server password as 12345678
. This will ensure consistency with the project requirements. However, if you decide to use a different password, you will need to update the password in the server/src/config/config.js
file accordingly.
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
.env2
file in theserver
directory to.env
. - Create a Stripe account (if you haven't already).
- Find your Stripe secret key for the
server/.env
file on your Stripe account dashboard. - Update the Stripe publishable key in
shop/src/components/Checkout/BuyItem.vue
with 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
.env
file located in theserver
directory 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.
EMARKET_EMAIL=<your_email>
EMARKET_PASSWORD=<your_app_password>
STRIPE_SECRET_KEY=<your_stripe_secret_key>
To ensure that BootstrapVue runs smoothly and 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. You can find this configuration file at server/src/config/config.js
.
Feed Some Data to the Database for the Website (!! IF you don't want to lose your previous data, do not run this script again!!)
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.