You are a team of developers for an e-commerce company. The Engineering team is rebuilding their inventory tracking app from the ground up. Your team has been tasked with creating a Full-Sack (front and back end) RESTful CRUD application to track the items.
npm install
npm run seed
npm run server-dev
- In a seperate terminal,
npm run client-dev
The tiers describe different levels of functionality in your application with the difficulty becoming more complex as you advance through the tiers. Start with Tier I, and complete everything you can, moving as quickly as possible as you can to Tier II. They are described as user stories.
Your team should strive to finish at least the first 4 tiers (a CRUD application) and attempt some of the bonus material.
- As a User, I want to view all items in inventory
- Sequelize Model for Item
- Name, Description, Price, Category, Image
- Express Route to GET all Items
- Front-end View for all Items
- As a User, I want to view any individual item
- Express Route to GET one Item
- Front-end view for one item (click to see)
- As a User, I want to add an item by completing a form
- Add Item front-end form
- Express Route to ADD the Item
- Form or Fetch request to add item when form is submitted
- As a User, I want to remove an item from inventory
- Delete button on Single Item View
- Express Route to DELETE the Item
- Fetch request to delete item when button is clicked
- As a User, I want to edit an item by filling a form
- Edit form on Single Item View
- Express Route to UPDATE the Item
- Fetch request to update item when form is submitted
- Models, Routes for Users and Orders
- As a User, I want my Inventory site to be visually stunning
- As a User, I want to be able to search through data based on search criteria
- As a User, I want to add items to a cart and purchase
- As a User, I want to use the application on a mobile browser
- As an Admin, I want all Add and Edit item requests to have server-side validations
- Header
- Navigation links (Home, Add Item, Search, Cart)
- Main Content Area
- List of Items
- Each Item Card shows:
- Image
- Name
- Description
- Price
- Category
- Clicking on an item card navigates to Individual Item View.
- Header (same as Home Page)
- Item Detail Section
- Large Image of Item
- Name
- Full Description
- Price
- Category
- Actions
- Edit Button (navigates to Edit Item Form)
- Delete Button
- Form Fields
- Name (text input)
- Description (textarea)
- Price (number input)
- Category (dropdown selection)
- Image (file upload)
- Submit Button
- To add the item
- Form Fields (pre-filled with existing item data)
- Name (text input)
- Description (textarea)
- Price (number input)
- Category (dropdown selection)
- Image (file upload)
- Save Changes Button
- Search Bar (on Home Page)
- Allows filtering items by name, category, etc.
- Shopping Cart
- Icon on Header
- Clicking opens a dropdown/popup showing added items and checkout option.
- Responsive Design
- Ensure the layout adjusts for mobile browsers.
- Backend Routes Integration (All Tiers)
- Route to GET all items (for Home Page)
- Route to GET one item (for Individual Item View)
- Route to POST a new item (for Add Item Form)
- Route to DELETE an item (from Individual Item View)
- Route to PUT (update) an item (from Edit Item Form)