|
| 1 | +# Gift Store |
| 2 | + |
| 3 | +You will be creating a full-stack application to manage your gift store. It will allow the owner of the stoer to execute all CRUD operations on his gifts,. In order to do this you will be using MongoDB with the [Mongoose ODM](http://mongoosejs.com/). Your front end will display views created from data in the database. You will use [ReactJS](https://facebook.github.io/react/) for that, and will serve your application with a [NodeJS](https://nodejs.org/) web server, using [ExpressJS](https://expressjs.com/). |
| 4 | + |
| 5 | +Please work on the following features **in order**, moving on to the next feature only after the one you are working on is complete. **Please commit WORKING code early and often**. In addition, after each step, please follow the guidelines for a commit message. |
| 6 | + |
| 7 | +### Part 1 - Products Table |
| 8 | + |
| 9 | +1. **As a user**, I want to be able to view the products I have in my database. If no product are present in the database, I will have to see a message indicating that `You have no product` and a button to create new ones. |
| 10 | + |
| 11 | +To implement this user story, you should: |
| 12 | + |
| 13 | +- Write an ExpressJS web server that listens to request on port `8000`. |
| 14 | +- Run this command to create a brand new React App in a folder named `client`. Then navigate to it. |
| 15 | + ``` |
| 16 | + npx create-react-app client |
| 17 | + cd client/ |
| 18 | + ``` |
| 19 | +- You may want to use [React Router](https://reactrouter.com/) or [Conditional Rendering](https://www.reactjs.org/docs/conditional-rendering.html) to navigate between components. |
| 20 | +- Write a script that would add the dummy data to your database when `npm run seed-database` is run from the command line. Add this command to the `package.json` to be able to run it with `npm`. When you have this working, run the command so that your database is populated. |
| 21 | + \_Note: Create a Product Schema under `server/models/Product.js`. It should have these following attributes: |
| 22 | + - `id`: Number |
| 23 | + - `category`: String |
| 24 | + - `quantity`: Number |
| 25 | + - `brand`: String |
| 26 | + - `image`: String _(the url of the image)_ |
| 27 | +- Complete the route `/api/products` in `server/routes/products.routes.js` so that requests to this route are responded to with the data for all the products, retrieved from the database. |
| 28 | +- You can use the `dummy_data.js` for your front end views. Then, you can refactor your front end to retrieve seed data from the server rather than using the dummy data. |
| 29 | +- Render the products in a `Table` containing the image, the name, the brand, the category, the price and the quantity |
| 30 | +- **WHEN COMPLETE AND WORKING, make a commit that says `Part 1 Complete`** |
| 31 | + |
| 32 | +### Part 2 - Create new Products |
| 33 | + |
| 34 | +1. **As a user**, I want to be able to create new products and save them in the database. Create a `NewTask` component containing these inputs: |
| 35 | + |
| 36 | +- `Name`: text |
| 37 | +- `Category`: text |
| 38 | +- `Quantity`: positive number |
| 39 | +- `Price`: positive number |
| 40 | +- `Image`: text (the url of the image) |
| 41 | + |
| 42 | +The data from the form should be sent to `/api/products` and saved to the database. |
| 43 | + |
| 44 | +- **WHEN COMPLETE AND WORKING, make a commit that says `Part 2 Complete`** |
| 45 | + |
| 46 | +### Part 3 - Edit Existing Products |
| 47 | + |
| 48 | +1. **As a user**, I want to update the existing products in my management system. |
| 49 | + |
| 50 | +- With every `Row` in the products table, there should be an `Edit` button. |
| 51 | +- When the user clicks on `Edit`, a `Modal` should be rendered |
| 52 | +- The `Modal` should contain a form similar to the `CreateProduct` form |
| 53 | +- The inputs should be prefilled with `defualtValues` of the product data with 2 buttons (`save` / `cancel`) |
| 54 | +- The user can click on `Cancel` to cancel changes |
| 55 | +- The user can update the data and click on `save` |
| 56 | +- The Modal should be closed and the `Table` should be updated with the nes data |
| 57 | +- You should send a PUT request to `/api/products/:id` with the new data from the form |
| 58 | + |
| 59 | +- **WHEN COMPLETE AND WORKING, make a commit that says `Part 3 Complete`** |
| 60 | + |
| 61 | +### Part 4 - Delete existing products |
| 62 | + |
| 63 | +1. **As a user**, I want to delete products. |
| 64 | + |
| 65 | +- With every `Row` in the products table, there should be a `Delete` button. |
| 66 | +- When the user clicks on `Delete`, a `Modal` should be rendered |
| 67 | +- The `Modal` should contain 2 buttons: `Confirm` and `Cancel` |
| 68 | +- Clicking on `Cancel` will close the Modal |
| 69 | +- Clicking on `Delete` should delete the selected Product and close the Modal |
| 70 | +- The deleted Product should no longer appear in the `ProductsList` |
| 71 | + |
| 72 | +- **WHEN COMPLETE AND WORKING, make a commit that says `Part 4 Complete`** |
| 73 | + |
| 74 | +### Part 5 - Predefined Categories |
| 75 | + |
| 76 | +1. **As a user**, I want to group products by category |
| 77 | + |
| 78 | +- Create a `Category.js` model, `categories.routes.js` router, and a `categories.controller.js` controller |
| 79 | +- Each Category should have: |
| 80 | + - id: String |
| 81 | + - title: String |
| 82 | +- Create new categories through Postman |
| 83 | +- Refactor the Category input in `CreateProduct` form to be a `Dropdown` containing the categories' titles |
| 84 | + |
| 85 | +- **WHEN COMPLETE AND WORKING, make a commit that says `Part 5 Complete`** |
| 86 | + |
| 87 | +### API Structure |
| 88 | + |
| 89 | +> **Pro tip:** Install and use [Postman](https://www.getpostman.com/) to test your API routes for this section |
| 90 | +
|
| 91 | +Using the existing code provided in `server/`, follow the steps below to build out a Paintings API: |
| 92 | + |
| 93 | +| URL | HTTP Verb | Request Body | Result | |
| 94 | +| :---------------: | :-------: | :----------: | :----------------------------------------------------------: | |
| 95 | +| /api/products | GET | empty | Return JSON of all products | |
| 96 | +| /api/products | POST | JSON | Create new Product and return JSON of created Product | |
| 97 | +| /api/products/:id | DELETE | empty | Return JSON of single Product with matching `id` | |
| 98 | +| /api/products/:id | PUT | JSON | Update Product with matching `id` and return updated Product | |
| 99 | +| /api/categories | POST | JSON | Create a new category | |
| 100 | +| /api/categories | GET | JSON | Return JSON of all categories | |
| 101 | + |
| 102 | +## Available Resources |
| 103 | + |
| 104 | +- [Stack Overflow](http://stackoverflow.com/) |
| 105 | +- [MDN](https://developer.mozilla.org/) |
| 106 | +- [ExpressJS Docs](https://expressjs.com/) |
| 107 | +- [Body Parser Middleware Docs](https://github.com/expressjs/body-parser) |
| 108 | +- [Mongo Docs](https://www.mongodb.com/) |
| 109 | +- [Mongoose ODM Docs](http://mongoosejs.com/) |
| 110 | +- [Cloudinary API](https://cloudinary.com/documentation/node_integration) |
| 111 | +- [ReactJS Docs](https://facebook.github.io/react/) |
| 112 | +- [React Router Docs](https://github.com/ReactTraining/react-router/tree/master/docs) |
| 113 | +- [NodeJS Docs](https://nodejs.org/) |
| 114 | +- [Postman](https://www.getpostman.com/) |
| 115 | +- Docs for any npm packages you might use |
0 commit comments