Skip to content

Fullstack inventory management application for D&D players. Built with React and Material UI

Notifications You must be signed in to change notification settings

snaeem3/inventory-client

Repository files navigation

Contributors Forks Stargazers Issues

D&D Social Inventory

This project showcases a Dungeons & Dragons inventory client application built with React and Material UI. Create items, manage your character inventory, keep track of your gold, and view items/inventories of other users!

View Demo

home page

Table of Contents
  1. Project Links
  2. Features
  3. Planned Features
  4. Skills Involved with this project
  5. Installation

Project Links

Live view: inventory-client-plum.vercel.app/

NodeJS Backend: github.com/snaeem3/inventory-api

This project was inspired by a previous application: github.com/snaeem3/inventory-application

(back to top)

Features

💼 User Account Management: Sign up and manage your account, enabling you to add items from the catalog to your personal inventory

📦 Effortless Inventory Management: Seamlessly manage your items and their quantities from the dedicated inventory page

⚔️ Equipment Tracking: Quickly equip and unequip items to monitor your character's active gear and possessions

💰 Gold Management: Utilize the Gold tracker to efficiently manage your gold reserves, keeping track of your wealth

📜 Transaction History: Create and log gold transactions to remember when and where your wealth is going

🛠️ Custom Item Creation: Craft custom items for yourself or share them with friends

👥 Social Interaction: Explore the inventories of friends and other users

item detail

gold

(back to top)

Planned Features

  • Parties
    • Create and join a party to view items carried by your friends
    • Utilize a group treasury to manage your party's gold
    • Easily track the total quantity of specific items (e.g. health potions)
  • Inventory Organization
    • Custom categories/tags
    • Favorite items
    • Mark items as private
    • Item groups/folders
  • User interaction
    • Favorite/follow other users
    • Transactions to transfer gold to other players

(back to top)

Skills involved with this project:

  • ReactJS & Javascript
    • Authentication management
      • Sign up, Log in, and Log out functionality
      • createContext and useAuth providers/hooks to store local user auth data
      • jwtDecode to store and manage JSON web tokens from the server
    • Axios to communicate with the NodeJS server
      • GET, POST, PUT, and DELETE requests
      • Axios interceptor to include token information when sending a request
      • Async error handling
    • React Hooks
      • useState
      • useEffect
    • React Router (BrowserRouter, Routes, Route, Link, etc.) for handling navigation and routing within the application.
      • Protected Routes to limit access of specified pages to authorized users
      • useLocation to transfer data from the previous page to the new page
    • Image uploading for profile pictures and items
    • React functional components
    • Conditional rendering based on log-in status, admin status, etc.
    • Javascript Object Array methods- map, includes, sort, every, etc.
  • Material UI styled components
    • ThemeProvider and useTheme for managing global colors/styles
    • Responsive design for mobile and desktop use
  • JSDoc to document components and functions
  • App deployment with Vercel

(back to top)

Installation:

  1. Clone the repository:

    git clone git@github.com:snaeem3/inventory-client.git
  2. Navigate to the project directory:

    cd inventory-client
  3. Install dependencies:

    npm install
  4. Update the baseURL variable in src/config.js with the URL of your api server

    const config = {
      baseURL: "YOUR_URL_HERE",
    };
  5. Start the development server:

    npm run dev
  6. Open your browser and navigate to http://localhost:5173 to view the application.

(back to top)

About

Fullstack inventory management application for D&D players. Built with React and Material UI

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published