DEV Community

Cover image for We're open now. Drape Fit is no longer available...
Yang Li
Yang Li

Posted on

We're open now. Drape Fit is no longer available...

I'd like to make some of my private ex-projects public now.

😱 How? Why?

📌 drapefit-new-trial-mern

New version TRIAL of Drape Fit Web App using MERN

ATTENTION! - Do not TRUST this deprecated styling service anymore!!!

I hope this archived project source would be helpful to whom want to learn MERN at production level...

System Architecture Diagram

Image description

Pre-requisites 

current release: v0.1.5
latest working: v0.1.6
Enter fullscreen mode Exit fullscreen mode 
node.js version: ^18.12.0
mongodb version: ^6.0.4
yarn version: ^1.22.4
Enter fullscreen mode Exit fullscreen mode

Please refer to the scripts part of ./package.json file:

  "scripts": {
    "backend": "node --max-old-space-size=4096 backend/server.js",
    "backend:hotdev": "nodemon --max-old-space-size=4096 backend/server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run backend:hotdev\" \"npm run client\"",
    "test:server_mocha": "mocha -r esm backend/app.test.js --exit",
    "test:client_jest": "npm run test --prefix frontend",
    "test:c8": "npx c8 node backend/app.js",
    "test:c8_report": "npx c8 report && start \"\" \"coverage/index.html\"",
    "client:build": "npm run build --prefix frontend",
    "server:local": "npm run client:build && node --max-old-space-size=4096 backend/server.js",
    "server:ec2_dev": "pm2 start ecosystem.config.js --node-args=\"--experimental-loader newrelic/esm-loader.mjs --max-old-space-size=4096\"",
    "server:ec2_prod": "npm run client:build && pm2 start ecosystem.config.js --node-args=\"--experimental-loader newrelic/esm-loader.mjs --max-old-space-size=8192\""
  },
Enter fullscreen mode Exit fullscreen mode 
# Install node modules
$ yarn install

# Launch local live servers
$ yarn run dev

# Launch AWS EC2 remote server in development mode
$ yarn run server:ec2_dev

# Make backend unit test using Mocha
$ yarn run test:server_mocha
Enter fullscreen mode Exit fullscreen mode

Visit

Image description

User Authentication with Redux Toolkit

Authentication workflow built with the MERN stack & Redux Toolkit.

Features

  • User Login/SignIn & SignUp
  • Protected routes with React Router v6
  • JWT storage with LocalStorage
  • Automatically fetches user details on page load (Header.js)
  • React Redux

Usage

Environment Variables

*.env files are as the followings:

> ./environments/dev.env
> ./environments/prod.env
Enter fullscreen mode Exit fullscreen mode 
NODE_ENV=YOUR_NODE_ENV # development | production
## Ports
PORT=YOUR_PORT
PORT_REACT=YOUR_REACT_PORT
## MongoDB
MONGO_URI_MAIN=YOUR_MONGO_URI_MAIN
MONGO_URI_INVENTORY=YOUR_MONGO_URI_INVENTORY
MONGO_URI_SUPPLIER=YOUR_MONGO_URI_SUPPLIER
MONGO_URI_MERCHANDISE=YOUR_MONGO_URI_MERCHANDISE
## Secrets / Keys
JWT_SECRET=YOUR_JWT_SECRET
BEARER_TOKEN_PREFIX=YOUR_BEARER_TOKEN_PREFIX
## AWS Server
SERVER_IP=YOUR_SERVER_IP
SERVER_DOMAIN=YOUR_SERVER_DOMAIN
AWS_REGION=YOUR_AWS_REGION
S3_BUCKET_NAME=YOUR_S3_BUCKET_NAME
## Multer Upload
MULTER_DEST_DIR=YOUR_MULTER_DEST_DIR
## Email
DRAPEFIT_SVC_MAIL=YOUR_DRAPEFIT_SVC_MAIL
SUPER_ADMIN_EMAIL=YOUR_SUPER_ADMIN_EMAIL
SUPER_ADMIN_INITPWD=SUPER_ADMIN_INITIAL_PASSWORD
## Payment - Stripe
STRIPE_TEST_SK=YOUR_STRIPE_TEST_SECRET_KEY
STRIPE_LIVE_SK=YOUR_STRIPE_LIVE_SECRET_KEY
STRIPE_ENDPT_SECRET=YOUR_STRIPE_ENDPOINT_SECRET
Enter fullscreen mode Exit fullscreen mode

Frontend (React) Config Variables 

frontend/src/configs/MyEnvConfig.js
Enter fullscreen mode Exit fullscreen mode

MyEnvConfig.js file is as below:

export default {
  baseurl: {
    dev: 'YOUR_DEV_BASEURL',
    prod: 'YOUR_PROD_BASEURL'
  },
  stripe: {
    pbKey: 'pk_test_YOUR_PUBLISHABLE_KEY'
  },
  bearer: {
    tokenPrefix: 'YOUR_BEARER_TOKEN_PREFIX'
  },
  gcaptcha: {
    siteKey: 'YOUR_GOOGLE_RECAPTCHA_SITEKEY'
  },
  aws: {
    region: 'YOUR_AWS_REGION',
    s3Bucket: 'YOUR_S3_BUCKET'
  }
};
Enter fullscreen mode Exit fullscreen mode

AWS Credentials by Files

This is necessary for AWS JavaScript SDK integration.

  • ~/.aws/credentials 
  [default]
  aws_access_key_id=YOUR_AWS_ACCESS_KEY_ID
  aws_secret_access_key=YOUR_AWS_SECRET_ACCESS_KEY
Enter fullscreen mode Exit fullscreen mode
  • ~/.aws/config 
  [default]
  aws_access_key_id=YOUR_AWS_ACCESS_KEY_ID
  aws_secret_access_key=YOUR_AWS_SECRET_ACCESS_KEY
Enter fullscreen mode Exit fullscreen mode

For details, please refer here.

For Win 10, the path would be the following:

C:\Users\admin\.aws
Enter fullscreen mode Exit fullscreen mode

Image description

For Ubuntu 20.04 on AWS EC2, the path would be the following:

/home/ubuntu/.aws
Enter fullscreen mode Exit fullscreen mode

Image description

Install Dependencies

Backend & Frontend

$ yarn install

$ cd backend
$ yarn install

$ cd frontend
$ yarn install
Enter fullscreen mode Exit fullscreen mode

📌 Fix Low Space Issue on Free-Tier EC2 Instance

Low space issue might occur MongoDB server down💦

# Remove temp files (ONLY on Emergency!!!)
$ sudo rm -rf /tmp/*

# Clear current user's general cache (ONLY on Emergency!!!)
## Resolving the ‘No Space Left on Device’ Error on Linux
$ sudo rm -rf ~/.cache/*

# Remove APT cache
## check the disk space consumed
$ sudo du -csh /var/cache/apt
## clean this cache
$ sudo apt-get clean
## if clean up only the outdated packages
$ sudo apt-get autoclean

# Clean journal logs
## check the log size
$ sudo journalctl --disk-usage
## clear these logs which are older than certain days (e.g. 2 days)
$ sudo journalctl --vacuum-time=2d

# Remove old kernels (optional)
$ sudo apt-get autoremove --purge
Enter fullscreen mode Exit fullscreen mode

📘 Listing file sizes in folder

$ du -hsc * | sort -hr
Enter fullscreen mode Exit fullscreen mode

🎯 MongoDB LogRotate on Ubuntu 20.04

We sometimes experience that the MongoDB server would get down on the EC2 test instance unexpectedly.

Trying to find out what might let the DB server down, I've noticed that the MongoDB log file's size is extremely large, even bigger than 100MB.

Since stdin & stdout processes such as logging are really memory-costing, it would be certainly an overload for the EC2 test instance of small tier.

To solve this issue, I've introduced the LogRotate function of Ubuntu to the MongoDB server.

$ sudo nano /etc/logrotate.d/mongod
Enter fullscreen mode Exit fullscreen mode

Copy and paste the following content:

/var/log/mongodb/*.log {
    daily
    rotate 30
    compress
    dateext
    missingok
    notifempty
    sharedscripts
    postrotate
        /bin/kill -SIGUSR1 `cat /var/lib/mongodb/mongod.lock 2> /dev/null` 2> /dev/null || true
        systemctl restart mongod
    endscript
}
Enter fullscreen mode Exit fullscreen mode

To test the configuration running:

$ logrotate -f -v /etc/logrotate.d/mongod
Enter fullscreen mode Exit fullscreen mode

📌 drapefit-cakephp

Full Source code for Drape Fit (https://www.drapefit.com) which is hosted on cPanel.

I hope this archived project source would be helpful to whom want to learn CakePHP at production level...

Database - MySQL 

|
|- db_dump_mysql
|--|
|--|-- drapefit_test.sql
|
Enter fullscreen mode Exit fullscreen mode

Style Guide - WordPress 

|
|- styleguide
|--|
|
Enter fullscreen mode Exit fullscreen mode

Inventory Page 

|
|- inventory
|--|
|
Enter fullscreen mode Exit fullscreen mode

Supplier Page 

|
|- supplier
|--|
|
Enter fullscreen mode Exit fullscreen mode

😱🎃

Top comments (0)

Read next

hyperkai profile image

Places365 in PyTorch

Super Kai (Kazuya Ito) -

osita profile image

Who is siitecch for ?

Christopher osita -

marianacaldas profile image

Understanding the problem space in product management

Mariana Caldas -

cloudypansy7 profile image

How to Stay Positive in a Busy World_20241220_205415

Penn McCain -