GameHub

A full-fledged, modern, dark-themed, fully-responsive ecommerce frontend application.

Demo

Check out the live version deployed on Vercel here.

Description

Powered by Typescript and Next.js, GameHub is a frontend ecommerce platform for creating a game catalgoue. It also comes equipped with a cart system that could be developed later to add payment functionalities.

The platform offers a sleek dark theme, along with search functionality, pagination, categories and carousels.

Thanks to the role-based authentication system, users can browse the products and add them to their cart, and admins can perform all CRUD operations on games and categories and examine other users' carts.

The dashboard system features an advanced table widget to filter, search and sort products and categories. It also enables admins to upload files, create tags, and delete products.

Features

• ✅ Built with Nextjs 15’s App Router, Typescript and Tailwind CSS.
• ✅ Role-based authentication with Auth.js.
• ✅ A dashboard system for CRUD operations with advanced tables.
• ✅ A cart system using the Context API.
• ✅ Sleek animations and carousels.
• ✅ Lazy image loading.
• ✅ Support for file upload.
• ✅ Instant notification system.

Getting Started

Installation

1. Clone the repository:

git clone https://github.com/ahmadnourallah/gamehub

2. Install dependencies:

npm install

Environment Variables

Before deploying the platform, make sure to define the following environment variables:

• NEXT_PUBLIC_API: The URL of the backend system. It must refer to an accessible RESTful API with resources defined similar to those in Game Store API.
• NEXTAUTH_SECRET: A confidential cryptographic key used to sign and verify JWTs for authentication. You can generate a random one using: node -e "console.log(require('crypto').randomBytes(32).toString('hex'));".
• HOSTNAMES: An array of hostnames you will use to fetch your images.

Deployment

You can fire up the development server using:

npm run dev

Building the application can be done by running:

npm run build

You can preview the production build through:

npm run start

Technologies

The system is built with the latest technologies:

• TypeScript
• Next.js 15
• Tailwind CSS
• Motion
• TanStack Query
• Mantine Tables
• Embla Carousel
• React Toastify

License

This project is licensed under the GNU GPLv3 License - see the LICENSE.md file for details.