אופן העבודה

הגרסה החדשה של פלטפורמת Workway נבנית מאפס על ידי הצוות שלנו. אנחנו לומדים מהטעויות שעשינו בגרסה הקודמת, והפעם הקוד של הפלטפורמה יהיה מסודר וברור לכל חברי הצוות!

בפרויקט הזה אנחנו עובדים עם React ו-Tailwind CSS בצד ה-Frontend, ועם Strapi בצד ה-Backend. חשוב לשמור על קוד מסודר ומאורגן כדי שנוכל להתרחב בקלות בהמשך ולהוסיף פיצ'רים חדשים בצורה יעילה.

מבנה הפרויקט:

הפלטפורמה שלנו מחולקת לשלושה חלקים עיקריים:

1. משתמשים לא רשומים (מבקרים)
2. משתמשים רשומים (לקוחות)
3. פרילנסרים

כדי לתמוך במבנה הזה, נשתמש בארגון הבא של הקבצים והתיקיות:

src/
  ├── components/    # קומפוננטות כלליות שמשמשות בכל האתר
  │   ├── Header/
  │   │   ├── Header.js
  │   │   └── Header.css
  │   ├── Footer/
  │   │   ├── Footer.js
  │   │   └── Footer.css
  │   └── ...        # קומפוננטות נוספות
  ├── layouts/       # תבניות (Layouts) עבור חלקים שונים באתר
  │   ├── PublicLayout.js     # תבנית למשתמשים לא רשומים
  │   ├── UserLayout.js       # תבנית למשתמשים רשומים
  │   ├── FreelancerLayout.js # תבנית לפרילנסרים
  ├── pages/         # דפי האתר מחולקים לפי סוג המשתמש
  │   ├── public/    # דפים למשתמשים לא רשומים
  │   │   ├── HomePage.js
  │   │   ├── ListingsPage.js
  │   │   ├── ListingDetailsPage.js
  │   │   ├── JobsPage.js
  │   │   ├── JobDetailsPage.js
  │   │   └── FreelancerProfilePage.js
  │   ├── user/      # דפים למשתמשים רשומים
  │   │   ├── DashboardPage.js
  │   │   ├── CreateJobPage.js
  │   │   └── SettingsPage.js
  │   ├── freelancer/ # דפים לפרילנסרים
  │   │   ├── DashboardPage.js
  │   │   ├── CreateListingPage.js
  │   │   └── PortfolioPage.js
  ├── App.js         # הקובץ הראשי שמטפל בניווט בין דפים
  └── index.js       # נקודת הכניסה הראשית לפרויקט

הסבר על מבנה הפרויקט:

1. src/components/

   • קומפוננטות כלליות: כאן נשמור את כל הקומפוננטות שמשותפות לכל חלקי האתר, כמו Header, Footer, כפתורים כלליים ועוד.
   • ארגון לפי תיקיות: כל קומפוננטה נמצאת בתיקייה משלה, עם קבצי ה-JavaScript וה-CSS הרלוונטיים.

2. src/layouts/

   • תבניות עיצוב: התיקייה הזו מכילה את התבניות השונות המשמשות כשלד לדפים לפי סוג המשתמש.
     • PublicLayout.js: תבנית לדפים שמיועדים למשתמשים לא רשומים. תכלול את ה-Header וה-Footer הגלובליים.
     • UserLayout.js: תבנית למשתמשים רשומים (לקוחות), כולל ניווט צדדי ותכונות נוספות.
     • FreelancerLayout.js: תבנית לפרילנסרים, עם ניווט וכלים ספציפיים לפרילנסרים.

3. src/pages/

   • חלוקה לפי סוג משתמש: הדפים מחולקים לתיקיות לפי סוג המשתמש, מה שמקל על התחזוקה וההבנה של המבנה.
     • public/: דפים שמיועדים למבקרים ומשתמשים לא רשומים.
       • HomePage.js: דף הבית עם מידע על האתר.
       • ListingsPage.js: רשימת כל ה-LISTINGS (גיגים) של הפרילנסרים.
       • ListingDetailsPage.js: פרטים על גיג ספציפי.
       • JobsPage.js: דף המציג את כל העבודות שהמשתמשים מחפשים עבורן פרילנסרים.
       • JobDetailsPage.js: פרטים על עבודה ספציפית.
       • FreelancerProfilePage.js: פרופיל ציבורי של פרילנסר.
     • user/: דפים שמיועדים למשתמשים רשומים (לקוחות).
       • DashboardPage.js: לוח בקרה של המשתמש.
       • CreateJobPage.js: דף ליצירת עבודה חדשה.
       • SettingsPage.js: הגדרות המשתמש.
     • freelancer/: דפים שמיועדים לפרילנסרים.
       • DashboardPage.js: לוח בקרה של הפרילנסר.
       • CreateListingPage.js: דף ליצירת גיג חדש.
       • PortfolioPage.js: ניהול הפורטפוליו של הפרילנסר.

4. App.js

   • הקובץ הראשי שמנהל את הניווט בין הדפים באמצעות React Router. כאן נבצע את הגדרת הנתיבים (Routes) ונגדיר איזה Layout ישמש לכל נתיב.

5. index.js

   • נקודת הכניסה הראשית לפרויקט. כאן נטען את הקומפוננטה <App /> אל ה-DOM.

מדוע חשוב לשמור על מבנה כזה?

הפרדת קוד ולוגיקה

• תחזוקה קלה: המבנה המודולרי מאפשר לכל חבר צוות לעבוד על חלקים שונים של הפרויקט בלי להתנגש.
• הרחבה ופיתוח: קל להוסיף פיצ'רים חדשים או לשנות קיימים בלי להשפיע על חלקים אחרים.

שימוש ב-Layouts

• קוד חוזר (Reusability): ה-Layouts מאפשרים לנו להגדיר מבנים משותפים לדפים רבים, כמו Header, Footer וניווט צדדי.
• עיצוב עקבי: מבטיח שכל הדפים עבור סוג משתמש מסוים ישמרו על מראה ותחושה אחידים.
• תחזוקה מרכזית: שינויים ב-Layout מתעדכנים אוטומטית בכל הדפים שמשתמשים בו.

דוגמה לשימוש ב-Layout

// src/layouts/PublicLayout.js

import React from 'react';
import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';

const PublicLayout = ({ children }) => (
  <>
    <Header />
    <main>{children}</main>
    <Footer />
  </>
);

export default PublicLayout;

// src/pages/public/HomePage.js

import React from 'react';
import PublicLayout from '../../layouts/PublicLayout';

const HomePage = () => (
  <PublicLayout>
    {/* תוכן דף הבית */}
    <section>
      <h1>ברוכים הבאים ל-Workway</h1>
      <p>הפלטפורמה שמחברת בין לקוחות לפרילנסרים.</p>
    </section>
  </PublicLayout>
);

export default HomePage;

עבודה עם Tailwind CSS

• עיצוב מהיר ואחיד: Tailwind מאפשר לנו להשתמש במחלקות CSS מוכנות כדי לעצב את האלמנטים בקלות.
• ערכות נושא: באמצעות שימוש במשתנים (Custom Properties), נוכל לתמוך בערכות נושא שונות כמו מצב כהה ובהיר.

דוגמה לשימוש במשתני צבעים

/* בקובץ styles.css */
:root {
  --color-primary: #1a202c; /* צבע כהה */
  --color-secondary: #2d3748;
}

[data-theme='light'] {
  --color-primary: #ffffff; /* צבע בהיר */
  --color-secondary: #edf2f7;
}

שימוש בקובץ React

<div className="bg-primary text-secondary">
  {/* תוכן הקומפוננטה */}
</div>

ניהול נתיבים (Routes) ב-App.js

ב-App.js, ננהל את כל הנתיבים של האפליקציה ונגדיר איזה Layout ישמש לכל נתיב.

דוגמה:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PublicLayout from './layouts/PublicLayout';
import UserLayout from './layouts/UserLayout';
import FreelancerLayout from './layouts/FreelancerLayout';
import HomePage from './pages/public/HomePage';
import DashboardPage from './pages/user/DashboardPage';
// ייבוא דפים נוספים

const App = () => (
  <Router>
    <Switch>
      {/* נתיבים למשתמשים לא רשומים */}
      <Route path="/" exact>
        <PublicLayout>
          <HomePage />
        </PublicLayout>
      </Route>
      {/* נתיבים למשתמשים רשומים */}
      <Route path="/dashboard">
        <UserLayout>
          <DashboardPage />
        </UserLayout>
      </Route>
      {/* נתיבים לפרילנסרים */}
      <Route path="/freelancer/dashboard">
        <FreelancerLayout>
          <FreelancerDashboardPage />
        </FreelancerLayout>
      </Route>
      {/* נתיבים נוספים */}
    </Switch>
  </Router>
);

export default App;

סיכום

שמירה על מבנה פרויקט מסודר וברור היא קריטית להצלחת הפיתוח המשותף שלנו. המבנה המוצע יאפשר לנו:

• לשפר את שיתוף הפעולה בין חברי הצוות.
• להאיץ את פיתוח הפיצ'רים החדשים.
• להקל על תחזוקת הקוד והתאמתו לצרכים המשתנים.