- Bu proje, MERN mimarisini pekiştirme amaçlı olarak oluşturulmuştur.
git clone https://github.com/erhanurgun/MERN01-workout-project.git workout-project
cd workout-project && cd backend
cp .env.example .env
npm install
- MongoDB Atlas adresine gidin ve kaydolun.
- Ü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. - Bir sonraki ekranda sadece
FREE
seçeneğini seçin veCreate
butonuna tıklayın. - Bir sonraki ekranda QuickStart altında ki Data Services alanına yönlendirileceksiniz. Burada
Username
vePassword
alanlarını doldurun veCreate User
butonuna tıklayın. ( Bu bilgileri bir yere not alın. ) - Daha sonra aynı alanda, en altta ki
Finish and Close
butonuna ardından daGo to Overview
butonuna tıklayın. - Yönlendirildiğiniz sayfada,
Connect
butonuna ve ardından açılan modal'daCompass
alanına tıklayın. - 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ü iseI have Compass
alanına tıklayın ve gerekli adımları takip edin. ) - 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. )
- Daha sonra mevcut sayfada
Copy
butonuna tıklayın ve.env
dosyasındakiDB_URL
alanına yapıştırın. (Username
vePassword
alanlarını da kopyalayıp.env
dosyasındaki ilgili alanlara yapıştırın. ) - Son olarak
DB_URL
'nin sonunadbName?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 olaraktest
isimli bir veritabanı oluşturacaktır. )
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ı.
{
"proxy": "https://workout-tracker-app-jkr8.onrender.com",
"...":"..."
}
frontend/package.json
içindekiproxy
alanını kendinize göre düzenleyiniz.
# Backend için;
cd backend && npm run dev
# Frontend için;
cd frontend && npm start
http://localhost:3000
# ya da
http://node.test
node.test
adresini kullanabilmek için bunuhosts
dosyasına eklemeniz gerekmektedir.- Aşağıdaki gibi bir ekran göreceksiniz. Kaydolmak için
Kaydol
butonuna tıklayın. - Bu alanda
kullanıcı adı
veşifre
alanlarını doldurup bir kullanıcı oluşturun. - Bu ekranı gördüğünüzde artık kullanmaya başlayabilirsiniz.
- Mobil cihazlarda da aynı şekilde kullanabilirsiniz.
- Ö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
- Önce
./_/json/postman_collection.json
dosyasınıPostman
programına import edin. (API | MERN Workout App
isimli birCollection
oluşacaktır.) - 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 birEnvironment
oluşacaktır. ) - Environtment için gerekli ayarları yaptıktan sonra,
kullanıcı adı
veşifre
alanlarını doldurup giriş yapın. - Giriş işlemini yaptıktan sonra
JSON
olarak dönen ilgili token bilgisini kopyalayıpenvirontment
alanında kiTOKEN
alanına yapıştırın. Diğer alanları da şekildeki gibi doldurun. - Bazen import işleminde
TOKEN
kısmında sorun oluşabiliyor. Aşağıdaki gibi kontrol sağlayabilirsiniz. - Artık API'yi kullanmaya başlayabilirsiniz.
# 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 bunuhosts
dosyasına eklemeniz gerekmektedir.- Dökümantasyon sayfası aşağıdaki gibi olacaktır.
- İletişim iletişim sayfasından benimle iletişime geçebilirsiniz.
└── + _
│ └── + 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...