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
Table of Contents
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
💼 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
- 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
- ReactJS & Javascript
- Authentication management
- Sign up, Log in, and Log out functionality
createContext
anduseAuth
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
, andDELETE
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.
- Authentication management
- Material UI styled components
ThemeProvider
anduseTheme
for managing global colors/styles- Responsive design for mobile and desktop use
- JSDoc to document components and functions
- App deployment with Vercel
-
Clone the repository:
git clone git@github.com:snaeem3/inventory-client.git
-
Navigate to the project directory:
cd inventory-client
-
Install dependencies:
npm install
-
Update the
baseURL
variable insrc/config.js
with the URL of your api serverconst config = { baseURL: "YOUR_URL_HERE", };
-
Start the development server:
npm run dev
-
Open your browser and navigate to http://localhost:5173 to view the application.