wes-q / top-wesbook

The Odin Project - Wesbook is my own version of Facebook, built from scratch

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Wesbook - my own version of Facebook.

Note: Kindly wait for the website to load for the first time, free hosting service is implementing spindown on inactivity)

Tablet Laptop vs Mobile Screenshots

1-Login-Page-Desktop-Light 1-Login-Page-Mobile-Light 2-Newsfeed-Mobile-Dark 2-Newsfeed-Mobile-Light 3-Newsfeed-Desktop-Dark 3-Newsfeed-Desktop-Light 4-Friends-Desktop-Light 4-Friends-Mobile-Dark 4-Friends-Mobile-Light 5-Profile-Desktop-Dark 5-Profile-Desktop-Light 5-Profile-Mobile-Dark 6-Messenger-Desktop-Dark 6-Messenger-Desktop-Light 6-Messenger-Mobile-Dark

What I learned from this project:

  • Frontend and backend integration and production deployment
  • REST APIs
  • JWT (Json Web Tokens)
  • Express
  • Nodemailer (for sending verification emails)
  • User Authentication (local signup)
  • Oauth User Authentication (login via Google)
  • Oauth User Authentication (login via Facebook)
  • Oauth User Authentication (login via Github)
  • User Authorization (certain actions are available only to verified users)
  • Effective data modeling using MongoDB / Mongoose
  • User sessions stored in the database
  • Handling of expired sessions
  • Serving static files (user can upload a profile photo)
  • Implement game sound effects
  • DOM manipulation using React
  • Input Validation (frontend, backend and database)
  • Responsive app design fit for mobile and desktop usage
  • Client-side routing using React router
  • Design using Tailwind css
  • Learn how to use Cloudinary as a cloud storage for files

About

The Odin Project - Wesbook is my own version of Facebook, built from scratch


Languages

Language:JavaScript 94.7%Language:Handlebars 2.9%Language:CSS 1.8%Language:HTML 0.3%Language:Dockerfile 0.3%