Skip to content

Latest commit

 

History

History
115 lines (86 loc) · 4.62 KB

README.md

File metadata and controls

115 lines (86 loc) · 4.62 KB
Raw

🎮 Social media app for Warzone gamers

Created as a hobby project for educational purposes only. This app is not affiliated with, endorsed by, or associated with Call of Duty or Activision."

If you like it, please drop a star 🙂

Table of contents

Screenshots

Home page

home2 0 home2 1 home2 3

Home page mobile screen

navmob1 navmob2

Post liked by (when pressing post-information button)

postLikedBy2

Notifications page

notifications2 0

Profile page

profile benny desktop profile desktop

Profile mobile screen

bigMStats! nurrminatorProfileMobile

Search page

search-nurrm

Lists page

listFeed

List create modal

listModal

Login screen

login2

Technologies

Project is created with:

  • React
  • Next.js
  • Tailwind CSS
  • Tailwind Modals
  • Firebase
  • Node.js (writing cloud functions)
  • Context api (state management)
  • Netlify (hosting)
  • Rapid api (fetching player statistics)
  • react-beautiful-dnd (listing players)
  • react-flip-move (animating list of items)
  • react-twitter-embed (displaying news)
  • Hero icons
  • react-intersection-observer (highlighting Post after notification-click)

Features

  • Login (email + password)
  • Share and like posts
  • Create lists
  • Personal notifications
  • View statistics
  • Responsive design
  • Guest mode
  • View latest news

Todo

  • Find a Warzone 2 api and replace current one.
  • Come up with a nicer design for Profile page (desktop, mobile ok) + add logic for reviewing other players (strengths/weaknesses)
    • Personal notification after being reviewed by another player OR when a player has updated his favorite saying
  • In profile page see trend for k/d. ↘ or ↗ or ➡️.
  • Come up with a better design for lists
  • Automatic scroll down to the corresponding post/list when user clicks on a notification + css animation highlighting the corresponding post.
  • Comments on Posts.
  • Make the mobile screen size more user firendly.
  • Upgrade Firebase version so that we can install firebase-hooks in order to render loading indicator while verifying user.
  • Paginate posts data
  • Add a special celebration Post when a user has a new win.
    • Implement same feature but when user has increased(significantly) his k/d (todo)
    • install react-hot-toast and notify the user. Ok ✅

Author

Created by Peter
Website: Peter portfolio
Instagram
Linkedin

Setup

//setup guide coming...you will need to create a firebase project and set up email/password auth. 
//For fetching player statistics you need to setup a rapidapi account and get a key from https://rapidapi.com/elreco/api/call-of-duty-modern-warfare
//If you want to enable notifications you need to add cloud functions, to do that you need to
//change project billing to to blaze plan.