/MERN01-exercise-tracking

MERN ile gelistirilen bir egzersiz takip web uygulamasi.

Primary LanguageJavaScript

MERN - Egzersiz Takip Projesi

Giriş

  • Bu proje, MERN mimarisini pekiştirme amaçlı olarak oluşturulmuştur.

Kurulum

1. Projeyi klonlayın

git clone https://github.com/erhanurgun/MERN01-workout-project.git workout-project

2. .env dosyasını oluşturun

cd workout-project && cd backend
cp .env.example .env

3. NPM paketlerini yükleyin

npm install

4. MongoDB Atlas bağlantı adresini .env dosyasına ekleyin

Bunun için aşağıda anlatılan adımları takip ediniz:
  1. MongoDB Atlas adresine gidin ve kaydolun.
  2. Üye olduktan sonra açılan sayfada aşağıdaki gibi bir ekran göreceksiniz. Görseldeki seçimleri yapın ve Finish butonuna tıklayın. MongoDB Atlas
  3. Bir sonraki ekranda sadece FREE seçeneğini seçin ve Create butonuna tıklayın. MongoDB Atlas
  4. Bir sonraki ekranda QuickStart altında ki Data Services alanına yönlendirileceksiniz. Burada Username ve Password alanlarını doldurun ve Create User butonuna tıklayın. ( Bu bilgileri bir yere not alın. ) MongoDB Atlas
  5. Daha sonra aynı alanda, en altta ki Finish and Close butonuna ardından da Go to Overview butonuna tıklayın. MongoDB Atlas
  6. Yönlendirildiğiniz sayfada, Connect butonuna ve ardından açılan modal'da Compass alanına tıklayın. MongoDB Atlas
  7. Açılan sayfada, I don't have Compass alanına tıklayın ve işlemleri takip ederek programı indirip kurulumunu yapınız. ( Eğer bilgisayarınızda MongoDB Compass yüklü ise I have Compass alanına tıklayın ve gerekli adımları takip edin. ) MongoDB Atlas
  8. Bir sonraki sayfa da yine adımları takip ederek veritabanı bağlantısını tamamlayın. ( Bu alanda gösterilen 2. resimdeki veritabanı yapılandırma işlemini yapmasanız dahi atlas otomatik olarak yapacaktır. ) MongoDB Atlas MongoDB Atlas
  9. Daha sonra mevcut sayfada Copy butonuna tıklayın ve .env dosyasındaki DB_URL alanına yapıştırın. ( Username ve Password alanlarını da kopyalayıp .env dosyasındaki ilgili alanlara yapıştırın. )
  10. Son olarak DB_URL 'nin sonuna dbName?retryWrites=true&w=majority ekleyin. ( Bu işlemi yapmazsanız, bağlantıda sorun yaşayabilirsiniz. )
# Örnek:
DB_URL=mongodb+srv://erhanurgun:ufjcWOACZ@mernapp.ykuw3qz.mongodb.net/urgunsoft?retryWrites=true&w=majority
  • dbName alanını boş bırakabilirsiniz. ( eğer burayı boş bırakırsanız, MongoDB Atlas otomatik olarak test isimli bir veritabanı oluşturacaktır. )

5. .env dosyasını düzenleyin

DB_URL=     # MongoDB bağlantı adresi.
SECRET=     # JWT için gerekli gizli anahtar. ( Herhangi bir şey olabilir. örn: OIBxuAHu###UrgunSoft###CU9VayJ$P4 )
PORT=       # Backend için kullanılacak port numarası.

6. PROXY'yi düzenleyin

{
  "proxy": "https://workout-tracker-app-jkr8.onrender.com",
  "...":"..."
}
  • frontend/package.json içindeki proxy alanını kendinize göre düzenleyiniz.

Kullanım

Local Ortamda Çalıştırmadan Önce:

1. Projeyi çalıştırmak için aşağıdaki komutları çalıştırınız

# Backend için;
cd backend && npm run dev
# Frontend için;
cd frontend && npm start

2. Tarayıcıdan aşağıdaki adrese gidiniz

http://localhost:3000
# ya da
http://node.test
  • node.test adresini kullanabilmek için bunu hosts dosyasına eklemeniz gerekmektedir.
  • Aşağıdaki gibi bir ekran göreceksiniz. Kaydolmak için Kaydol butonuna tıklayın. Web App
  • Bu alanda kullanıcı adı ve şifre alanlarını doldurup bir kullanıcı oluşturun. Web App
  • Bu ekranı gördüğünüzde artık kullanmaya başlayabilirsiniz. Web App
  • Mobil cihazlarda da aynı şekilde kullanabilirsiniz.
  • Web App
Panel Kullanımı
  • Örnek olarak bu tarz bir kullanıcı oluşturabilirsiniz. Daha sonra bu kullanıcı ile giriş yapabilirsiniz.
# Demo Kullanıcı:
E-Posta: client@urgun.xyz
Şifre..: iH&@hNuj&D6DFZ&K

3. Postman ile API'yi test etmek için aşağıdaki adrese gidiniz

  • Önce ./_/json/postman_collection.json dosyasını Postman programına import edin. ( API | MERN Workout App isimli bir Collection oluşacaktır.) Postman
  • Daha sonra ./_/json/postman_environment.json dosyasını Postman programına import edin. Ardından şekildeki gibi seçili duruma getirin. ( .ENV - RESTful API | Workout App isimli bir Environment oluşacaktır. ) Postman
  • Environtment için gerekli ayarları yaptıktan sonra, kullanıcı adı ve şifre alanlarını doldurup giriş yapın. Postman
  • Giriş işlemini yaptıktan sonra JSON olarak dönen ilgili token bilgisini kopyalayıp environtment alanında ki TOKEN alanına yapıştırın. Diğer alanları da şekildeki gibi doldurun. Postman
  • Bazen import işleminde TOKEN kısmında sorun oluşabiliyor. Aşağıdaki gibi kontrol sağlayabilirsiniz. Postman
  • Artık API'yi kullanmaya başlayabilirsiniz.

4. Swagger ile API'yi test etmek için aşağıdaki adrese gidiniz

# API Dökümantasyonu için;
http://localhost:3000/api/v1/docs
# ya da
http://node.test/api/v1/docs
  • node.test adresini kullanabilmek için bunu hosts dosyasına eklemeniz gerekmektedir.
  • Dökümantasyon sayfası aşağıdaki gibi olacaktır. Swagger

Destek

  • İletişim iletişim sayfasından benimle iletişime geçebilirsiniz.

Kaynaklar

Kullanılan Paketler

Backend için;
Frontend için;

Faydalanılan Diğer Kaynaklar

Dosya Yapısı

└── + _
│   └── + img
│   │   │ - ss*.png
│   │
│   └── + json
│       │ - postman_collection.json
│       │ - postman_environment.json
│
└── + backend
│   └── + controllers
│   │   │ - userController.js
│   │   │ - workoutController.js
│   │   
│   └── + middlewares
│   │   │ - requireAuth.js
│   │
│   └── + models
│   │   │ - userModel.js
│   │   │ - workoutModel.js
│   │
│   └── + routes
│   │   │ - user.js
│   │   │ - workout.js
│   │
│   │ - .env.example
│   │ - .gitignore
│   │ - package.json
│   │ - server.js
│
└── + frontend
│   └── + public/*
│   │
│   └── + src
│   │   └── + components
│   │   │   │ - Navbar.js
│   │   │   │ - WorkoutDetails.js
│   │   │   │ - WorkoutForm.js
│   │   │
│   │   └── + context
│   │   │   │ - AuthContext.js
│   │   │   │ - WorkoutContext.js
│   │   │
│   │   └── + hooks
│   │   │   │ - useAuthContext.js
│   │   │   │ - useLogin.js
│   │   │   │ - useLogout.js
│   │   │   │ - useSignup.js
│   │   │   │ - useWorkoutContext.js
│   │   │
│   │   └── + pages
│   │   │   │ - Home.js
│   │   │   │ - Login.js
│   │   │   │ - Signup.js
│   │   │
│   │   │ - App.js
│   │   │ - index.css
│   │   │ - index.js
│   │
│   │ - .gitignore
│   │ - package.json
│   
│ - .gitignore
│ - README.md
.
.
.

Daha fazlası için https://erhanurgun.com.tr websitemizi ziyaret edebilirsiniz...