PixelPaws: A game discovery platform

PixelPaws: Appwrite Hashnode AppwriteCloud Hackathon

---

Team Details 🙋

• Abhrajit Ray - Abhrajit Ray

Description of Project 📋

• The Idea:

  Ever searched endlessly on the internet for a new game to play, but only to come across old articles and bad Google suggestions? This is where PixelPaws comes in. A game discovery platform that makes it easier for you to find the games that you want to play and also keep track of the ones you're done playing.

• Project planning / Thought process :

  First I needed to figure out the requirements for this to work:
  - A game database for getting all the game data. Found the RAWG API with its amazing collection of quality game data.

  A good frontend tech stack to work with:
  - I primarily use Next.js, Typescript and Tailwind CSS for most of my projects. So it was a no-brainer for me.

  A cloud backend where I could handle the authentication and database for the users:
  - Appwrite had all the things I needed.

• Break down of the building process:

  • Setting up a basic skeleton of the application.

  • Set up user authentication.

  • Database and Collections set up. I've set up two collections - a library and a wishlist, each having the following attributes.

    

  • Building the Frontend for the different pages.

  • Setting up the API and fetching the Game Data.

  • Building the components and making UI improvements on the way.

  • Connecting the application to Appwrite's cloud database and building functionality.

  • Testing and Debugging remaining issues.

  • Optimization.

Features ✨

Authentication:

1. Email and Password based user authentication ->
   For email-based auth users can signup using their email address and password.

   

2. Password Recovery ->
   In case, a user forgets their password, an email is sent to their mail for password recovery which redirects the user to the password reset page.

3. Discord OAuth Service ->
   Users can login directly to the application using their Discord account. This entire OAuth session creation is handled by Appwrite.

Game Discovery: 🎮

1. Dashboard page showing Featured and Upcoming games.

2. Most Popular page for filtering games by popularity.

3. New Releases page displaying all the latest and upcoming games along with their genre and release dates.

4. Game Page showing the details, screenshots, ratings, and description of the game.

   

5. Filtering by Genre.

6. Searching for any game.

   

7. Adding to Library and Wishlist. ✅ Being done via Appwrite's cloud Database.

   

Fully Responsive design across all devices:

Tech Stack 🔧

• Next.js 13.4

  • A really great framework. Good documentation. What else do I need? 😌

• Typescript

  • I have a love-and-hate relationship with Typescript. Tons of annoying type errors every day but it's all worth it.

• Tailwind CSS

  • The best CSS framework on the planet. 👑

• Appwrite

  • Authentication: The entire project depends on the complete authentication package that Appwrite offers. User-specific experiences wouldn't be possible without it.

  • Database: The addition of games to the library and wishlist is powered by Appwrite's cloud database. Users can add their favourite games to the respective collections and view them whenever they want.

• RAWG API

  • Fetching the Games and Game data: The huge and up-to-date collection of game data is very useful.

• Vercel: Deployment 🚀 ( I've disabled image optimization for now because my free plan is about to reach the limit. )

Challenges I Faced 💪

Well, this was the fastest I've built a project and the hardest I've worked on one 😅. It was very difficult, as it was my first time working with Appwrite and trying to figure stuff out. Facing multiple errors every day with very little documentation or references, especially for the RAWG API. But it's all part of the development process and what makes it satisfying in the end.

Here are a few of the major challenges that I faced:

• At first, for a quick and easy solution (hehe), I had set up my authentication using next-auth and forgotten about it. At a later stage, I realised that I would be missing out on all the User and auth features that the Appwrite cloud console offers along with the security of the permission-based collections.
  I had to migrate the entire authentication system from next-auth to Appwrite's Auth and make lots of structural changes. There was only one week left and it took me two whole days to figure out how everything worked. It was worth it!

• This was my first time using an API on a pretty big scale like this for fetching data. I faced multiple request overflows and sent a lot of necessary requests to the API service for the game data. Later I came to know about caching the responses and also storing them in local storage for future use. This way I reduced the number of requests by a lot and made the application more efficient. 🔥

• I did not know about search indexes in Appwrite or how they worked. Also, querying and updating the data in the collections based on certain events on the application was a bit difficult and took me a while to figure out.

Future Scope:

• Email Verification

• Getting Game Reviews

• Youtube API for gaming content

• Gaming News

Conclusion:

Overall, it was a great experience. I got to learn a lot by building this project. If anyone faces any issues in the future building with Appwrite, Nextjs 13 or RAWG API, feel free to refer to my code. Cheers!

Public Code Repo

🔗 https://github.com/abhrajitray77/pixel_paws

Demo Link

🚀 https://pixelpaws.vercel.app/

Demo Login Credentials:
Email: meowzee@pixels.com
Password: demologin777

Video Preview: