/TA-GABEXT-ASPIRANT

Website E-Commerce MERN Stack

Primary LanguageJavaScript

Website E-Commerce Aksesoris HP dengan MERN Stack

Website ini dibangun menggunakan MERN Stack sebagai tugas akhir untuk mata kuliah Pemrograman Beroirentasi Service

🚀 Link Dokumentasi API, Dokumentasi Pengerjaan, Projek Lain

📸 Screenshot







🧾 Description

MERN stack adalah singkatan dari empat teknologi utama yang digunakan dalam pengembangan aplikasi web modern. MERN merupakan singkatan dari MongoDB, Express, React, dan Node.js. Keempat teknologi ini bekerja bersama-sama untuk membentuk sebuah tumpukan teknologi yang lengkap untuk mengembangkan aplikasi web berbasis JavaScript.

🔑 Keypoints

  • Implementasi MERN Stack
  • Mempelajari membuat REST API dengan ExpressJS
  • Mempelajari Membuat Frontend dengan React
  • Mempelajari cara merancang database dengan MongoDB
  • Mempelajari cara menggunakan Github untuk berkolaborasi dengan programmer lain
  • Mempelajari cara mendeploy aplikasi

⚙ Tools and Technologies used

Client - Afit Santoso

  1. React.js
  2. React-icons
  3. Styled-Components
  4. Firebase
  5. Stripe
  6. Formspree

Admin panel - Atang Nurwahid

  1. React.js
  2. Chakra-ui
  3. React-icons

Backend - Ramanda Ajisaka Asyraf

  1. Node.js
  2. Express.js
  3. MongoDB
  4. JWT
  5. Cloudinary
  6. Bcrypt.js
  7. Stripe

🛠 Installation and setup

Client

  1. Clone repo

  2. Install dependencies yang dibutuhkan :

    npm install

  3. buat file .env lalu liat file .env.sample untuk contoh.

  4. jalankan dengan menggunakan :

    npm start

🏎 Build App

  1. Membuild react app :

    npm run build

Admin panel

  1. Clone repo

  2. Install dependencies yang dibutuhkan :

    npm install

  3. buat file .env lalu liat file .env.sample untuk contoh.

    REACT_APP_BACKEND_HOST=<backend_url>

  4. jalankan dengan menggunakan :

    npm start

🏎 Build App

  1. Membuild react app :

    npm run build

Backend

  1. Clone repo

  2. Install dependencies yang dibutuhkan :

    npm install

  3. buat file .env lalu liat file .env.sample untuk contoh.

    STRIPE_SECRET_KEY=<stripe_secret_key>
DB_URI=<mongo_uri>
JWT_SECRET=<your_jwt_secret>
JWT_EXPIRE=5d
COOKIE_EXPIRE=5
CLOUDINARY_CLOUD_NAME=<cloudinary_cloud_name>
CLOUDINARY_API_KEY=<cloudinary_api_key>
CLOUDINARY_API_SECRET=<cloudinary_api_secret>

  4. jalankan dengan menggunakan :

    npm start