Full-stack app utilizing React and TypeScript to demonstrate type-safe patterns of user interaction and reactive design.
Install dependencies with npm:
npm installCompile TypeScript and run the dev server with Vite:
npm run devFormat and lint with Prettier and ESLint (respectively):
# format
npm run format
# lint
npm run lintYou can watch a demo of the software running on the dev server here:
/: Root url leads to authentication if user not signed in. Users can use Google OAuth to login to the app
/dashboard: Landing page for the different management pages. Defaults to inventory view. The collapsible sidebar serves as the global navigation in mobile and web views. It also includes a global search bar.
/dashboard/inventory: Shows a filterable gallery of product cards.
/dashboard/products/${productId}/<edit>: \The base products URL shows a table of filterable products and an option to add a new product. You can view details with the productId in the URL. An additional /edit leads to a page where you can edit the given product.
/dashboard/categories/${categoryId}/<edit>: The base categories URL shows a table of categories and an option to add a new child category. You can view details with the categoryId in the URL. An additional /edit leads to a page where you can edit the given category.
/dashboard/manufacturers/${manufacturerId}/<edit>: The base manufacturers URL shows a table of manufacturers and an option to add a new manufacturer. You can view details with the manufacturerId in the URL. An additional /edit leads to a page where you can edit the given manufacturer.
/dashboard/users: A makeshift way to manage users and revoke access (Firestore and Authentication rules haven't been set up)
- Visual Studio Code on Fedora Workstation 43
- TypeScript 5
- Node.js/ Vite.js
- Prettier & ESLint
- TanStack Dev Tools
- React TypeScript
- TanStack Form, Query, Routing, and Table
- Zod Validation
- Tailwind CSS & Shadcn
- Firebase Authentication
- Firebase Hosting
- Firebase App Check
{Make a list of websites that you found helpful in this project}
- Redirect common name params to the proper route (i.e.
manufacturer/nvidiashould redirect to the NVIDIA details page) - This entire project uses static data, the third part of this project will implement the backend with FireStore and TanStack Query