A virtual ecommerce website with admin page using Next.js, Node js, Express js, and Mongoose.
The client and admin application is deployed to netlify and can be accessed through the following link:
The website resembles a real store and you can add products to your cart and pay for them. If you want to try the checkout process, you can use the dummy card number provided by stripe for testing which is 4242 4242 4242 4242 with any expiration date, CVC, and zip codes. Please DO NOT provide real card number and data.
To run this application, you have to set your own environmental variables. For security reasons, some variables have been hidden from view and used as environmental variables with the help of dotenv package. Below are the variables that you need to set in order to run the application:
Server env variables
-
MONGODB_URI: this is the connection string of your MongoDB Atlas database for server.
-
SESSION_KEY: a secret message for the session. You can use any string here for server.
-
STRIPE_PRIVATE_KEY: the stripe package is used to process payment in the checkout route. To get this, you should set up a stripe account and put your private API key here. For client.
-
STMP_EMAIL, STMP_PASSWORD: the email and password given to nodemailer to send/receive the email. Please put a real email and password here because you will receive the messages sent from the contact us form on this email. Gmail recommended. For server.
-
JWT_KEY: a secret message for the sign jwt. You can use any string here. For server.
-
EXPIRESIN: jwt expiration time in string default will be 7 days. For server
-
SALTROUNDS: bcrypt salt round use 12. For server
-
CLIENT_URL: client URL. For server
-
ADMIN_URL: admin URl. For server
-
PORT: server port. For server
-
STORAGE_CREDENTIALS_PATH: path to google cloud storage credentials file
-
STORAGE_BUCKET_NAME: google cloud storage bucket name
-
STORAGE_PROJECT_ID: google cloud storage project id
Client env variables
-
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: the stripe package is used to process payment in the checkout route. To get this, you should set up a stripe account and put your publishable key here.
-
STRIPE_SECRET_KEY: the stripe package is used to process payment in the checkout route. To get this, you should set up a stripe account and put your secret key here.
-
STRIPE_SIGNING_SECRET: the stripe package is used to process payment in the checkout route. To get this, you should set up a stripe account and put your signing secret.
-
SERVER_URL: enter your server url here.
Admin env variables
- SERVER_URL: enter your server url here.
Now you can run app in the terminal.
# for client
npm run dev
# for admin
npm run dev
# for server
npm run dev
The application is built with:
- Node.js version (v18.12.1).
- Express version (v4.18.1).
- Express-GraphQL (v0.12.0).
- GraphQL (v15.8.0).
- Graphql-Upload-Minimal (v1.5.4): for images upload through graphql api.
- MongoDB version (v4.12.0).
- Google Cloud Storage (v6.6.0): for hosting images.
- Connect mongo (v4.6.0): for storing session in mongodb
- Nodemailer (v6.8.0): used to send emails from the contact us form
The application displays a virtual bags store that contains virtual products and contact information.
Users can do the following:
- Create an account, login or logout, forget password, change password, modifying info.
- Add and remove products to favorite.
- Product search
- Browse available products added by the admin
- Add, modify and Delete products from the shopping cart
- Display the shopping cart
- To checkout, a user must be logged in
- Checkout information is processed using stripe and the payment is send to the admin
- View Orders History
Admins can do the following:
- Create an account, login or logout, forget password, change password, modifying info.
- 3 level of admin access, Gold, Sliver, Bronze.
- Creating, modifying and deleting products (Gold and Sliver only).
- Creating and deleting categories (Gold and Sliver only).
- Creating, modifying and deleting banners (Gold and Sliver only).
- Applying coupon to a user (Gold and Sliver only).
- Sending inbox to a user.
- Blocking user which will prevent them from accessing there account (Gold only).
- Sending admin invite (Gold only).
All the models can be found in the server/models directory created using mongoose.
- name (String)
- email (String)
- password (String)
- photoUrl (String)
- gender (String)
- birthday (Date)
- phoneNumber (String)
- addresses (Array):
~ name (String)
~ street (String)
~ city (String)
~ state (String)
~ country (String)
~ info (String)
~ phoneNumber (String)
~ phoneNumber2 (String)
~ default (String) - blocked (Boolean)
- name (String)
- email (String)
- password (String)
- photoUrl (String)
- gender (String)
- birthday (Date)
- phoneNumber (String)
- level (String)
- title (String)
- slug (String)
- category (String)
- description (String)
- image:
~ name
~ url - stock (Number)
- rating (Array):
~ name (String)
~ value (Number) - discount (String)
- currency (Object):
~ name (String)
~ symbol (String)
~ symbolNative (String)
~ decimalDigits (Number)
~ rounding (Number)
~ code (String)
~ namePlural (String) - reviews (Array):
~ name (String)
~ title (String)
~ message (String)
~ rating (String)
~ userId (String)
- title (String)
- description (String)
- image (String)
- link (String)
- name (String)
- email (String)
- code (String)
- discount (Number)
- description (String)
- userId (String)
- expiresIn (String)
- userId (String)
- data (Array of String)
- title (String)
- description (String)
- userId (String)
- userId (String)
- totalPrice (String)
- orderId (String)
- status (String)
- paymentMethod (String)
- deliveryMethod (String)
- address:
~ name (String)
~ street (String)
~ city (String)
~ state (String)
~ country (String)
~ info (String)
~ phoneNumber (String)
~ phoneNumber2 (String)
~ default (String) - products (Array):
~ id (String)
~ price (String)
~ quantity (String) - pickup (String)
- trackingId (String)
- paymentId (String)
- progess (Array):
~ name (String)
~ checked (Boolean) - shippingFee (String)
- coupon:
~ id (String)
~ email (String)
~ discount (Number)
~ description (String)
~ userId (String)
~ expiresIn (Date)
~ code (String) - phoneNumber (String)
- name (String)
- email (String)
- validationToken (String)
- expiresIn (Date)
- MIT License
- Copyright 2022 © Nunu Olamilekan