fit track

การติดตาม

Fit-Track เป็นแอปพลิเคชั่นติดตามการออกกำลังกายที่สร้างขึ้นโดยใช้ Mern (MongoDB, Express, React+Vite, Node.js) สแต็ก เอกสารนี้จะแนะนำคุณตลอดกระบวนการสนับสนุนโครงการนี้

สารบัญ

• การติดตั้ง
  • ส่วนหน้า
  • แบ็กเอนด์
• การบริจาค
  • ฟอกที่เก็บข้อมูล
  • การโคลนนิ่งที่เก็บ
  • การสร้างสาขา
  • การเปลี่ยนแปลง
  • กระทำการเปลี่ยนแปลง
  • ผลักดันการเปลี่ยนแปลง
  • การสร้างคำขอดึง
• ใบอนุญาต

การติดตั้ง

ส่วนหน้า

1. นำทางไปยังไดเรกทอรี frontend :

    cd frontend

2. ติดตั้งการอ้างอิง:

   npm install

3. เริ่มต้นเซิร์ฟเวอร์การพัฒนา:

   npm run dev

แบ็กเอนด์

1. นำทางไปยังไดเรกทอรี backend :

    cd backend

2. ติดตั้งการอ้างอิง:

   npm install

3. การตั้งค่า MongoDB Atlas:

   1. ไปที่ MongoDB Atlas และสร้างบัญชีหากคุณยังไม่มี
   2. สร้างคลัสเตอร์ใหม่โดยทำตามพรอมต์ การสอนการสร้างคลัสเตอร์ Mongo Atlas
   3. เมื่อสร้างคลัสเตอร์ให้ไปที่ส่วน การเข้าถึงฐานข้อมูล และสร้างผู้ใช้ที่มีสิทธิ์ที่จำเป็น
   4. ไปที่ การเข้าถึงเครือข่าย และอนุญาตที่อยู่ IP ของคุณ (หรืออนุญาตให้เข้าถึงได้ทุกที่หากทดสอบในพื้นที่)
   5. ในส่วน คลัสเตอร์ คลิก เชื่อมต่อ จากนั้นเลือก เชื่อมต่อแอปพลิเคชันของคุณ คุณจะเห็นสตริงการเชื่อมต่อที่มีลักษณะเช่นนี้:

       mongodb+srv://<username>:<password>@cluster0.mongodb.net/?retryWrites=true&w=majority
      

   6. แทนที่ <username> และ <password> ด้วยชื่อผู้ใช้และรหัสผ่าน MongoDB Atlas จริงของคุณ คัดลอกสตริงการเชื่อมต่อทั้งหมด

4. เพิ่ม MongoDB ATLAS_URI ไปยังไฟล์ .env :

   • สร้างไฟล์ .env ในไดเรกทอรี backend
   • เพิ่มบรรทัดต่อไปนี้ไปยังไฟล์ .env แทนที่ <your-mongodb-connection-string> ด้วยสตริงการเชื่อมต่อที่คุณคัดลอกจาก MongoDB Atlas:

     ATLAS_URI=mongodb+srv:// < username > : < password > @cluster0.mongodb.net/fit-track ? retryWrites=true & w=majority

5. เริ่มต้นเซิร์ฟเวอร์:

   node server.js

   หรือหากติดตั้ง nodemon สำหรับการอัปเดตสดของแบ็กเอนด์:

   nodemon server.js

โครงสร้างโครงการ

ส่วนหน้า

ไดเรกทอรี frontend มีแอปพลิเคชัน React

• public : มีสินทรัพย์สาธารณะของแอปพลิเคชัน
• src : มีซอร์สโค้ดของแอปพลิเคชัน
  • components : ส่วนประกอบ UI ที่ใช้ซ้ำได้
    • Home : ส่วนประกอบโฮมเพจ
      • Exercise : องค์ประกอบการออกกำลังกายแถวเพื่อแสดงระยะเวลาสถานะ, daycheck
      • ExercisesList : เพื่อแสดงรายการแบบฝึกหัดที่ทำโดยผู้ใช้
      • HeatMap : ขับเคลื่อนโดย apexcharts.js เพื่อแสดงรูทีนการออกกำลังกายของผู้ใช้
      • Quotes : จาก API Ninjas และแสดงคำพูดแบบสุ่มเพื่อกระตุ้นผู้ใช้
      • TotalDays : เพื่อแสดงจำนวนวันที่ผู้ใช้ออกกำลังกาย
      • UserExperience : เพื่อแสดงประสบการณ์ผู้ใช้ด้วยประสบการณ์ที่มี gamified
      • UserRoutine : เพื่อแสดงกิจวัตรประจำสัปดาห์ของผู้ใช้เช่น Streak
    • HomePage : การแสดงและแสดงผลหน้าแรก
    • Login : การแสดงหน้าเข้าสู่ระบบ
    • SignUp : การแสดงหน้าผู้ใช้ลงทะเบียนและแก้ไข
    • navbar : Navbar Component
• App.jsx : องค์ประกอบหลักที่ตั้งค่าเส้นทาง
• main.jsx : จุดเข้าใช้งานของแอปพลิเคชัน React

แบ็กเอนด์

ไดเรกทอรี backend มีเซิร์ฟเวอร์ Node.js และแอปพลิเคชันด่วน

• models : มีสคีมาพังพอน
  • exercise.model : สคีมาออกกำลังกาย
  • user.model : สคีมาผู้ใช้
• routes : มีเส้นทาง API
  • exercises : เส้นทาง API แบ็กเอนด์สำหรับแบบฝึกหัด
  • user : เส้นทาง API แบ็กเอนด์สำหรับผู้ใช้
• server.js : จุดเข้าของแอปพลิเคชันเซิร์ฟเวอร์

การบริจาค

เรายินดีต้อนรับผลงาน! หากต้องการมีส่วนร่วมในการติดตามให้ทำตามขั้นตอนเหล่านี้:

ฟอกที่เก็บข้อมูล

1. แยกที่เก็บโดยคลิกที่ปุ่ม "ส้อม" ที่ด้านบนขวาของหน้าที่เก็บใน GitHub

การโคลนนิ่งที่เก็บ

2. โคลนที่เก็บข้อมูลของคุณไปยังเครื่องในพื้นที่ของคุณ:

   git clone https://github.com/your-username/Fit-Track.git

3. นำทางไปยังไดเรกทอรีโครงการ:

    cd Fit-Track

การสร้างสาขา

4. สร้างสาขาใหม่สำหรับคุณสมบัติหรือการแก้ไขข้อผิดพลาดของคุณ (สร้างสาขาตามปัญหาที่กำลังทำงานอยู่):

   git switch -c your-branch-name

การเปลี่ยนแปลง

5. ทำการเปลี่ยนแปลงของคุณเป็น codebase คุณสามารถแก้ไขไฟล์โดยใช้โปรแกรมแก้ไขรหัสที่คุณต้องการ

กระทำการเปลี่ยนแปลง

6. เพิ่มการเปลี่ยนแปลงในพื้นที่จัดเตรียม:

   git add .

7. กระทำการเปลี่ยนแปลงด้วยข้อความเชิงพรรณนา:

   git commit -m " Description of your changes "

ผลักดันการเปลี่ยนแปลง

8. ผลักดันการเปลี่ยนแปลงไปยังที่เก็บข้อมูลของคุณ:

   git push origin your-branch-name

การสร้างคำขอดึง

9. สร้างคำขอดึงจากที่เก็บส้อมของคุณไปยังที่เก็บหลัก ไปที่แท็บ "คำขอดึง" บนที่เก็บหลักและคลิก "คำขอดึงใหม่" ทำตามคำแนะนำเพื่อสร้างคำขอดึงของคุณ

นี่เป็นเพียงจุดเริ่มต้น! ฉันหวังว่าจะได้มีส่วนร่วมที่มีความหมายมากขึ้นและร่วมมือกับชุมชนที่น่าทึ่งนี้ มาสร้างสิ่งที่ยอดเยี่ยมด้วยกันและทำให้ Fit-Track ดีที่สุดเท่าที่จะทำได้! ?

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT - ดูไฟล์ใบอนุญาตสำหรับรายละเอียด