PhotoGems רשת חברתית
סקירה כללית
תמונות
טכנולוגיות שהשתמשתי בהם לפרוייקט
HTML5
CSS3
ReactJS
Firebase
מידע טכני
Firebase אימות משתמשים
-כל אחד יכול ליצור לעצמו משתמש בשימוש באימייל ובסיסמה אישית, באופן זה כל משתמש שנוצר נרשם במערכת של Firebase. כך, בפעם הבאה שהמשתמש מנסה להתחבר למשתמש שלו על אותו מידע להתאים למידע שקיים במערכת.
פרופילים אישיים
-לכל משתמש יש פרופיל אישי משלו. באפשרות כל משתמש רשום לערוך את הפרטים שבפרופיל שלו כגון: תמונת פרופיל, כינוי, ביו, מין, גיל, מוטו, תחביבים, אוכל מועדף וחשבון סקייפ.
בפרופיל גם ניתן למצוא את אוסף כל הפוסטים שהמשתמש העלה בלייב פיד, מסודרות לפי הזמן שהם הועלו.
בנוסף, לכל אחד יש אופציה לצפות של משתמשים אחרים בלחיצה על השם שלהם (לכל משתמש יש לינק ייחודי לפרופיל שלו).
לייב פיד
-לכל משתמש יש אפשרות ליצור פוסט בלייב פיד, שם כל אחד יכול לראות את 25 הפוסטים האחרונים שהועלו על ידי אנשים אחרים וגם של עצמו.
ישנה אופציה בלייב פיד לכל אחד לצפות בלייקים/תגובות של פוסט ספציפי. רק משתמשים מחוברים בעלי יכולת לבצע פעולות מסוימות כגון: לייק ותגובות לתמונות אחרות, ובעל הפוסט יכול יכולת למחוק את הפוסט של עצמו.
Imgur API
-הוא אתר אינטרנט חינמי לאירוח קבצי תמונות. באמצעות שימוש ב API שלהם, כל תמונה שמשתמש מעלה בעצם מועלת לאתר שלהם ומקבלת לינק ייחודי לתמונה. ובעת יצירת הפוסט, אותו לינק נשמר למסד נתונים, כך בעצם מתבצע תהליך השמירה והשיוך של התמונות.
כל תמונה שמועלת לשם מועלת באיכות הכי גבוהה כיוון שהרעיון המרכזי של האתר הוא העלאת תמונות(פוסטים). כל תמונה שמוצגת באתר שומרת על יחס הגובה-רוחב שלה כדי למנוע ממצב של תמונה מעווותת.
איכון להשגת דגל מדינה של המשתמש בשימוש מספר APIs
-בכל פרופיל ובכל תגובה של משתמש, מופיע ליד השם המשתמש דגל של המדינה בה הוא נמצא.
פעולה זו מושגת במספר שלבים: בעת כל התחברות של משתמש, מתבצע אינטרקציה עם הAPI של IPStack כדי להשיג את שם המדינה בה אותו משתמש גר, לאחר מכן מתבצע אינטרקציה עם API נוסף כדי להשיג את הדגל של אותה מדינה (שמתבצע דרך countryflags.io) ולבסוף כל מידע זה נשמר במסד נתונים לגבי אותו משתמש.
בכל פוסט המדינה שתופיע ליד שם המשתמש היא המדינה בה היה נוכח ברגע שהעלה את הפוסט/התגובה, ובכל פעם שהמשתמש יתחבר שוב לאתר המדינה שלו תתעדכן בהתאם.
טיפול בשגיאות ושיפור ממשק המשתמש
-במידה ומשתמש מכניס פרטים לא נכונים בעת מילוי אימייל, תופיע לו הודעת שגיאה. כל תיבה שקיימת באתר בעל מגבלה מסוימת כגון כמות תווים מסויימת וכו', באופן זה ניתן למנוע מצב של ספאם בצורה אפקטיבית יותר.
שימוש ב localStorage כדי לבצע "זכור אותי" בעת התחברות, כך בפעם הבאה שתחזרו לאתר לא תצטרכו לדאוג להתחבר שוב פעם כיוון שהאתר זכר שהתחברתם פעם שעברה.
כאשר משתמש לא מעלה תמונת פרופיל, האתר יספק במקום תמונה אלמונית שמראה שאותו אדם ללא תמונת פרופיל.
כאשר משתמש מנסה לטעון לינק של הפרופיל של עצמו מלינק שמישהו אחר שלח לו או מלחיצה בלייב פיד על השם שלו, במקום שיוצג לו הדף הרגיל של צפייה בפרופיל של משתמשים אחרים, האתר ישלח אותו לדף של "הפרופיל האישי שלי".
דיווח ואבטחת מידע
-ישנה אופציה לדווח על כל פוסט שקיים באתר. בעת לחיצה על הדיווח אותו פוסט עובר למנהלי האתר/האדמינים שייבחנו את בקשה זו ובמקרה הצורך יורידו את הפוסט מהאתר.
דף אינטרנט דינמי (SPA)
-כל המידע שקיים באתר מאוחסן במסד נתונים של Firebase. בעת כל פעולה שמבצע המשתמש בין אם זה צפייה בפרופיל של מישהו אחר או צפייה בלייב פיד, כל המידע שמופיע למשתמש הוא מידע דינמי שמשתנה כל רגע שמיובא מהמסד נתונים ומוגש למשתמש.
בנוסף האתר הוא מסוג SPA, מה שאומר שדף האינטרנט לא מבצע טעינה מחדש בשום שלב באתר מלבד הפעם שהוא נטען לראשונה בפתיחה.
מאובטח מאחורי הקלעים
-לא כל אחד יכול לבצע כל פעולה, כל סוג של בקשה / פעולה נבדקת לטובת יצירת סביבה בטחונית, לדוגמה רק בעל הפוסט יכול למחוק את הפוסט של עצמו. רק משתמשים רשומים יכולים לעשות לייקים ותגובות לאנשים אחרים, ועוד..
אתר רספונסיבי
-פועל בכל סביבה מסוג שהיא, בין אם זה פלאפונים או מחשבים.