🎮 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
• Technologies
• Features
• Todo
• Author

Screenshots

Home page

Home page mobile screen

Post liked by (when pressing post-information button)

Notifications page

Profile page

Profile mobile screen

Search page

Lists page

List create modal

Login screen

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.