PeterEriksson / dugb-3

Social media web-app for Call of Duty Warzone gamers. Hobby project.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

🎮 Heliga Gibblocket - a social media app for gamers

Full-stack web app for Call of Duty gamers. Design is inspired by Twitter. Welcome to your other home from Caldera/Verdansk. Post your thoughts, rank your teammates, view satistics + more.

A hobby project built over a longer period of time. The project is created for educational purposes. It is only being used by a small group of users.

If you like it, please drop a star 🙂

Table of contents

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

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

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 ✅
  • Database sanitation (delete nested data using cloud functions. see firebase extensions)

Author

Created by Peter
Website: Peter resume
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.

About

Social media web-app for Call of Duty Warzone gamers. Hobby project.


Languages

Language:JavaScript 95.9%Language:CSS 4.1%